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. `

• javascript
• reactjs
• enzyme
• jestjs
• higher-order-ponents

1 Answer 1

Usually 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