React/Enzyme: Mocking/stubbing nested components

Question

I'm using mocha/chai/enzyme/sinon to test my React components. Suppose I am looking to test the following component, and that I need to mount it in order to test lifecycle methods.

<Container>
  <div />
  <NestedContainer />
  <div />
</Container>

Suppose further that I do not want to in any case mount the component NestedContainer. Instead what I would like to do, is mock/stub out NestedContainer with a plain old div before mounting Container.

I've looked for solutions online to do this, and the only relevant resource I've found is this: https://medium.com/@AndreCalvo/react-component-testing-mocking-method-calls-components-and-time-d780d45e4cd5. It seems kind of heavy to bring in a large library to mock these components.

Does anyone know of any other way to do this? Thanks.

patrick patrick · Accepted Answer · 2017-10-25T23:32:39

You don't need to mount in order to test lifecycle methods.

You can use instance().

const wrapper = shallow(<MyComponent {...props} />);

wrapper.instance().componentDidMount();

This will trigger the lifecycle method specified.

This is great for testing that redux actions (which can be mocked) are called etc.

React/Enzyme: Mocking/stubbing nested components

1 Answers