React’s new context api with enzyme

Question

I have been using enzyme and love it a lot. It works with react 16 until I wanted to test my new project that uses react’s new context api.

If I render only my basic component using shallow and console log the debug of the component I can see its content but when I use the new context api with provider and consumer, I get <undefined /> as a render out. Enzyme does not render the component but react does.

Can someone please provide some guidance.

Thank you.

Answer 1

Support for this and other React 16.3 features are going to be included in the next enzyme release which is going to happen in midst summer, this year (as said here).

For now, here's a workaround:

const outer = shallow(<SimpleComp />);
const Children = outer.props().children({ /* context */ });
const wrapper = shallow(Children);

To use mount() with new Context API use this enzyme patch.