I’m trying to understand why my jest/enzyme tests are failing. I have a ponent that I use the pose
function from redux in, structured as following:
class MyComponent extends Component {
//code here
}
export default pose(
connect(mapStateToProps),
)(MyComponent)
In my jest test, I do this:
Import { MyComponent } from ‘app/MyComponent’;
describe(‘<MyComponent />’, () => {
let ponent;
beforeEach(() => {
props = {
id: ‘23423’
}
ponent = shallow(<MyComponent {…props} />);
}
it(‘Loads correctly’, () => {
expect(ponent.state(‘isLoading’)).toEqual(true);
expect(ponent.find(‘InnerComponent’).length).toBe(1);
}
However, I get errors like "Cannot read property 'state' of undefined". I understand that using shallow rendering doesn't give me the exact structure that I need, but I'm not sure what else to try to get the right structure. I tried shallow-rendering the wrapped ponent and then finding the unwrapped ponent within it, like so, ponent = shallow(<MyComponent {...props} />).find('MyComponent').shallow();
, with no luck. Any other suggestions would be appreciated.
`
I’m trying to understand why my jest/enzyme tests are failing. I have a ponent that I use the pose
function from redux in, structured as following:
class MyComponent extends Component {
//code here
}
export default pose(
connect(mapStateToProps),
)(MyComponent)
In my jest test, I do this:
Import { MyComponent } from ‘app/MyComponent’;
describe(‘<MyComponent />’, () => {
let ponent;
beforeEach(() => {
props = {
id: ‘23423’
}
ponent = shallow(<MyComponent {…props} />);
}
it(‘Loads correctly’, () => {
expect(ponent.state(‘isLoading’)).toEqual(true);
expect(ponent.find(‘InnerComponent’).length).toBe(1);
}
However, I get errors like "Cannot read property 'state' of undefined". I understand that using shallow rendering doesn't give me the exact structure that I need, but I'm not sure what else to try to get the right structure. I tried shallow-rendering the wrapped ponent and then finding the unwrapped ponent within it, like so, ponent = shallow(<MyComponent {...props} />).find('MyComponent').shallow();
, with no luck. Any other suggestions would be appreciated.
`
1 Answer
Reset to default 7Usually you want to test the ponent and not the integration of the ponent with redux:
class MyComponent extends Component {
//code here
}
export { MyComponent } // export the ponent
export default pose(
connect(mapStateToProps),
)(MyComponent)
Also on your test you would import the named export import { MyComponent } from '...'
instead of importing the default: import MyComponent from '..'
import { MyComponent } from ‘app/MyComponent’;
describe(‘<MyComponent />’, () => {
let ponent;
beforeEach(() => {
props = {
id: ‘23423’
}
ponent = shallow(<MyComponent {…props} />);
}
it(‘Loads correctly’, () => {
expect(ponent.state(‘isLoading’)).toEqual(true);
expect(ponent.find(‘InnerComponent’).length).toBe(1);
}
}
If you want to test ponent interactions with your redux store you need to wrap your ponent with a <Provider />
import { MyComponent } from ‘app/MyComponent’;
import { Provider } from 'react-redux'
describe(‘<MyComponent />’, () => {
let ponent;
beforeEach(() => {
props = {
id: ‘23423’
}
ponent = shallow(<Provider><MyComponent {…props} /></Provider>);
}
You should definitely read the testing section of the redux documentation