enzymejs / enzymejs/enzyme

wrappedComponent doesn't actually pass context values down in tests

Open
#2,189 19 comments 1 reaction 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.