enzyme: wrappedComponent doesn't actually pass context values down in tests
Given the following:
import { shallow } from 'enzyme';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
const FooContext = React.createContext();
class Foo extends Component {
static contextType = FooContext;
render() {
const { value1, value2 } = this.context;
return (<div>
<span>Value 1: {value1}</span>
<span>Value 2: {value2}</span>
</div>);
}
}
const someValues = { value1: '1', value2: '2' };
function FooProvider({ children }) {
return (<FooContext.Provider values={someValues}>
{children}
</FooContext.Provider>);
}
FooProvider.propTypes = {
children: PropTypes.node
};
describe('Foo', () => {
let spans;
beforeAll(() => {
const wrapper = shallow(<Foo/>, { wrappingComponent: FooProvider });
spans = wrapper.find('span');
});
it('the first is someValues.value1', () => {
const first = spans.at(0);
expect(first).toExist();
expect(first).toHaveText(`Value 1: ${someValues.value1}`);
});
it('the second is someValues.value2', () => {
const second = spans.at(1);
expect(second).toExist();
expect(second).toHaveText(`Value 2: ${someValues.value2}`);
});
});
Current behavior
Foo ✕ the first is someValues.value1 (17ms) ✕ the second is someValues.value2 (13ms)
● Foo › the first is someValues.value1
Expected <span> components text to match (using ===), but it did not.
Expected HTML: "Value 1: 1"
Actual HTML: "Value 1: "
49 | const first = spans.at(0);
50 | expect(first).toExist();
> 51 | expect(first).toHaveText(`Value 1: ${someValues.value1}`);
| ^
52 | });
53 | it('the second is someValues.value2', () => {
54 | const second = spans.at(1);
at Object.toHaveText (app/javascript/tests/temp/foo.test.jsx:51:19)
● Foo › the second is someValues.value2
Expected <span> components text to match (using ===), but it did not.
Expected HTML: "Value 2: 2"
Actual HTML: "Value 2: "
54 | const second = spans.at(1);
55 | expect(second).toExist();
> 56 | expect(second).toHaveText(`Value 2: ${someValues.value2}`);
| ^
57 | });
58 | });
59 |
Expected behavior
The two tests pass. It seems like the values set into the context in FooProvider don’t actually get passed to Foo
Your environment
node: 12.4.0
API
- shallow
- mount
- render
Version
library | version |
---|---|
enzyme | 3.10.0 |
react | 16.8.6 |
react-dom | 16.8.6 |
react-test-renderer | 16.8.6 |
adapter (below) | 1.14.0 |
Adapter
- enzyme-adapter-react-16
- enzyme-adapter-react-16.3
- enzyme-adapter-react-16.2
- enzyme-adapter-react-16.1
- enzyme-adapter-react-15
- enzyme-adapter-react-15.4
- enzyme-adapter-react-14
- enzyme-adapter-react-13
- enzyme-adapter-react-helper
- others ( )
About this issue
- Original URL
- State: open
- Created 5 years ago
- Reactions: 1
- Comments: 19 (6 by maintainers)
Commits related to this issue
- Apply patch from https://github.com/enzymejs/enzyme/issues/2189#issuecomment-796416083: support .contextType on components — committed to unverbraucht/react-shallow-renderer by unverbraucht 3 years ago
- Add support for passing context to React class based components that request context via setting .contextType, according to patches posted in https://github.com/enzymejs/enzyme/issues/2189#issuecommen... — committed to unverbraucht/enzyme by unverbraucht 3 years ago
- Add support for passing context to React class based components that request context via setting .contextType, according to patches posted in https://github.com/enzymejs/enzyme/issues/2189#issuecommen... — committed to pablopalacios/enzyme by unverbraucht 3 years ago
- Apply patch from https://github.com/enzymejs/enzyme/issues/2189#issuecomment-796416083: support .contextType on components — committed to pablopalacios/react-shallow-renderer by unverbraucht 3 years ago
- Apply patch from https://github.com/enzymejs/enzyme/issues/2189#issuecomment-796416083: support .contextType on components — committed to unverbraucht/react-shallow-renderer by unverbraucht 3 years ago
- [enzyme-adapter-react-16] [new] add `contextType` support Add support for passing context to React class based components that request context via setting .contextType, according to patches posted in... — committed to pablopalacios/enzyme by unverbraucht 3 years ago
- [enzyme-adapter-react-16] [new] add `contextType` support Add support for passing context to React class based components that request context via setting .contextType, according to patches posted in... — committed to pablopalacios/enzyme by unverbraucht 3 years ago
Is there an ETA on that?
Hi all, I added the patch posted by @forivall (thanks!) and a simple test case in #2507, please have a look. @ljharb I have no clue on how to patch react-test-renderer, I manually patched the locally installed shallow-renderer as mentioned by @forivall, can you assist here?
I created module for workaround https://www.npmjs.com/package/shallow-with-context. The module works well in our projects.
awesome. i’ll submit a PR when i have a few more extra cycles in the next few days (hopefully i remember).
More than happy to help with the final parts of the fix once the tests are good (and failing)
That should be
value
, no?My workaround is to add the provider in the test:
and changing it to a
render
fromshallow
, which introduces some other fun to work through