Reactive Test Component WillReceiveProps Using Enzyme

Question

I am going to test life cycle functions, including componentWillReceiveProps, using an enzyme.

First of all, my component should be wrapped with materialUi styles and be associated with redux. Otherwise, there will be errors in the rendering function, because I use material-ui components, including FlatButton.

const wrapper = mount( <MuiThemeProvider muiTheme={muiTheme}> <Provider store={store}> <MemoryRouter> <MyComponent /> </MemoryRouter> </Provider> </MuiThemeProvider>) // absolutely fail wrapper.find(MyComponent).setProps({ something }) expect(MyComponent.prototype.componentWillReceiveProps.calledOnce).toBe(true) 

So the problem is that I cannot use setProps () for MyComponent, because the enzyme does not allow the component to be used without root. I cannot test componentWillReceiveProps components or other necessary parts by changing the details.

How to configure / change MyComponent details so that I can test componentWillReceiveProps?

Answer 1

It is better to test the component separately. The problem is that material-ui skips its details using the React context . You can specify the context of your component in this way:

 import React from 'react'; import { mount } from 'enzyme'; import getMuiTheme from 'material-ui/styles/getMuiTheme'; const wrapper = mount( <MyComponent />, { context: { muiTheme: getMuiTheme(), }, childContextTypes: { muiTheme: React.PropTypes.object.isRequired, } } ); 

Another thing you need to isolate is remove the <Provider> . Instead of testing the connected component, try testing the component itself as described in the Redux docs: Testing the connected components

Soon - export the component and component, and then test the component by passing the details. An example of a component with export:

 import { connect } from 'react-redux' // Use named export for unconnected component (for tests) export class MyComponent extends Component { /* ... */ } // Use default export for the connected component (for app) export default connect(mapStateToProps)(MyComponent) 

Now you can import the undeclared component into the test file as follows:

 import { MyComponent } from './MyComponent'; 

And the last test might look like this:

 import React from 'react'; import { mount } from 'enzyme'; import getMuiTheme from 'material-ui/styles/getMuiTheme'; import { MyComponent } from './MyComponent'; test('test component', () => { const wrapper = mount( <MyComponent />, { context: { muiTheme: getMuiTheme(), }, childContextTypes: { muiTheme: React.PropTypes.object.isRequired, } } ); // Test something const p = wrapper.find(...); expect(...).toEqual(...); // Change props wrapper.setProps({foo: 1}); // test again expect(...).toEqual(...); }); 

Answer 2

If you want to test MyComponent, you must

 const wrapper = mount(MyComponent); 

Other things, such as Provider, are not part of MyComponent, so you should not include unit test in it.