Jest enzyme shallow test is not rendering all elements of the React component

user_157704 0
Viewed 9001

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.

enzyme jestjs reactjs unit-testing
3 Answers

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 }
user_4585480
Related