mardi 15 mai 2018

Spy on method called in componentDidMount

I recently wanted to test that some custom method gets called in the componentDidMount method of a React component.

componentDidMount() {
        this.props.actions.getDocuments();
    }

I'm using Jest as my testing framework, which includes jest.fn() for mocks/spies

    function setup(data) {
        const props = {
            session: {},
            actions: {
                getDocuments: jest.fn()
            }
        };
        const wrapper = mount(<ComponentList {...props} />,
            {
                context: { muiTheme: getMuiTheme() },
                childContextTypes: { muiTheme: React.PropTypes.object.isRequired }
            }
        );

        return {
            props,
            wrapper
        };
    }

describe('compenent:', () => {
    let component;
    describe('Given that the container is loaded', () => {
         beforeAll(() => {
             component = setup();
         });
        it('should call the getDocuments to get the data', () => {
            expect(component.props.actions.getDocuments).toHaveBeenCalled();
        });
    });
    });

This code fails and throws the following error:

TypeError: received.getMockName is not a function

      at Object.<anonymous> (src/containers/ComponentList/ComponentList.spec.js:61:158)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

If i use sinon instead of jest, i still get the error :

expect(jest.fn())[.not].toHaveBeenCalled()

    jest.fn() value must be a mock function or spy.
    Received:
      function: [Function proxy]

      at Object.<anonymous> (src/containers/ComponentList/ComponentList.spec.js:61:158)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

Is it possible to test this functionality with Jest or Sinon? And if so, how?

Here is my code implementation:

export class ComponentList extends React.Component {
    constructor(props) {
        super(props)
    }
    componentDidMount() {
        this.props.actions.getDocuments();
    }
    render() {
        return (
            <div className="allowScroll">
                ....
            </div>
        )
    }
}

ComponentList.propTypes = {
    document: PropTypes.object,
    actions: PropTypes.object.isRequired
};

const mapStateToProps = (state) => {
    return {
        document: state.document
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators(componentActions, dispatch)
    };
}
export default connect(mapStateToProps, mapDispatchToProps)(ComponentList)

Aucun commentaire:

Enregistrer un commentaire