wrappedComponent doesn't actually pass context values down in tests
- Dominant language
- JavaScript
- Stars
- 19.8k
- Forks
- 2k
- PR merge metrics
- No merged PRs in 30d
Description
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 (
Value 1: {value1}
Value 2: {value2}
}
}
const someValues = { value1: '1', value2: '2' };
function FooProvider({ children }) {
return (
{children}
);
}
FooProvider.propTypes = {
children: PropTypes.node
};
describe('Foo', () => {
let spans;
beforeAll(() => {
const wrapper = shallow(, { 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 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 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
- [x] 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
- [x] 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 ( )
Contributor guide
Research direction
Start with the shallow API's wrappingComponent behavior and the reproducer shown in app/javascript/tests/temp/foo.test.jsx. Run the supplied assertions under the listed React and adapter versions; done means both span text expectations pass while the context values reach Foo.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend, testing
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100