javascriptreactjsreduxenzyme

React Enzyme Props Not Set on Mount


I am writing unit tests for a HOC that renders a chart and performs some operations on it. The chart is generated using data acquired from the database and stored in the redux-store. For the purposes of testing I have created a fake data store, however loading data for the chart occurs at componentDidMount and is performed by checking the value of a prop. So my code is as follows:

...
ComponentDidMount()
{
    console.log(this.props.getData);

    if (this.props.getData === "YES")
        this.props.loadData();
}
...

And the code in my unit test is as follows:

...
const mockStore = configureStore([thunk]);
let fakeStore = mockStore({...});

it("loads data"), function() {
    let store = fakeStore;
    const options = {
        context: {store},
        childContextTypes: {store: PropTypes.object.isRequired},
    };
    const mounted = mount(<Component getData="YES"/>, options);
    console.log(mounted.props());
    mounted.instance().componentDidMount();
}
...

The problem is using console.log I can see the props are not set when the component is first mounted and componentDidMount runs automatically, despite me specifying some values, but the props are immediately after, and when I attempt to call the function, it does not run, yet no messages are displayed explaining why exactly it didn't.

Could someone please advise?


Solution

  • You may mock the external interaction using the Sinon library. Then check whether mock interaction is invoked when the component is rendered. What you are writing is a unit test not an end to end test. So it should be like this:

    import React from 'react'
    import YourComponent from 'components/YourComponent'
    import { shallow } from 'enzyme'
    describe('(Component) YourComponent', () => {
      let _props, _spies, _wrapper
    
      beforeEach(() => {
        _spies = {}
        _props = {
          prop1: 'value1',
          prop2: 'value2',
          ...
          getData : (_spies.getData = sinon.spy()),
        }
        _wrapper = shallow(<YourComponent {..._props} />)
      })
    
    
      it('Should trigger the `getData` callback when mounted', () => {
        _spies.getData.should.have.been.called
      })
    
    })