Jest酶浅测试不会渲染React组件的所有元素

Question

I am writing a jest enzyme test as below:

import React from 'react';
import ManageDrugTermPage from '../js/manageDrugTermPage.jsx';
import toJson from 'enzyme-to-json';
describe('manage drug term page test suite', () => {

 it('snapshot test', () => {
    const setRouteLeaveHook =jest.fn();
    let wrapper = shallow(
        <ManageDrugTermPage params={{id : 25, router: setRouteLeaveHook}}/>
    );
    expect(toJson(wrapper)).toMatchSnapshot();
})
})

I want to see the details of ManageDrugTermPage in the snapshot, but snapshot is only displaying:

 exports[`manage drug term page test suites snapshot test 1`] = `
    <ManageDrugTermPage
      params={
        Object {
          "id": 25,
          "router": [Function],
        }
      }
    />
    `;

How can I render the ManageDrugTermPage in the snapshot? I dont want to use renderer.create but want to do it through enzyme.

Answer 1

The problem is that shallow only renders one level deep, so every child component that is used in your component will be rendered but not the child components of them. There are two ways to make enzyme render the content of the childs as well. First there is mount which will force all components to render its child until they reach a DOM element. The problem with this that it can lead to very large and hard to read snapshots.

The other solution would be to use dive to force on child component to render its content. This is especially useful if you work with higher order components like connect from redux. Cause in this case your rendered component would be just the wrapped one and shallow would not render the content that you would expect. With dive you can just force the wrapped component to render its child which is what you really want to see in the snapshot.

The only strange thing with your example is that even the first level childs are not rendered. So maybe you can post the component code as well.

Answer 2

In case if someone is still looking for the cause and fix.

This is not a fix for child components not rendering. For that issue, refer the answer already posted by @Andreas Köberle.

Disclaimer: Since the actual component code is not shared, I am not entirely certain if the cause of the issue is same as explained below.

I had similar issue of shallow not rendering Component Under Test and instead returning <MyComponent ... /> and it turned out the cause was injectSheet() decorator.

import injectSheet from 'react-jss'
...
class MyComponent extends Component {
   ...
}
export default injectSheet(combinedStyle)(MyComponent)

Perhaps, shallow doesn't call render on the styled component.

As a workaround I export unstyled version along with the default styled version

export default injectSheet(Styles)(MyComponent)
export { MyComponent as UnstyledMyComponent }

Answer 3

That's because you're using the Enzyme shallow render. You want to instead use Full DOM Rendering ( mount ).

https://github.com/airbnb/enzyme/blob/master/docs/api/mount.md

it('snapshot test', () => {
    const setRouteLeaveHook =jest.fn();
    let wrapper = mount(
        <ManageDrugTermPage params={{id : 25, router: setRouteLeaveHook}}/>
    );
    expect(toJson(wrapper)).toMatchSnapshot();
});