score:8

I've not run the code in question but the line:

var topbar = TestUtils.scryRenderedComponentsWithType(page, 'TopBar');

looks suspect to me. The docs seem to suggest that you should pass a componentClass rather than a string.

I don't see how it could possibly use the string to identify the component type. It could potentially use the displayName to identify it by string, but I doubt it would do that.

I reckon you probably want this:

var TopBar = require('../../src/js/pages/DesignerPage');
var topbar = TestUtils.scryRenderedComponentsWithType(page, TopBar);

score:8

I have come across a similar situation where I needed to check if the child component was being rendered or not. As far as I understand jest mocks all required modules except for the one's where you specify not to. So in your case the child component Topbar will be mocked which leads me to guess that the rendered DOM won't be as expected.

As for checking if the child component was rendered I would do

expect(require('../../src/js/component/layout/TopBar.js').mock.calls.length).toBe(1)

which basically checks if the mocked child component was invoked or not.

If you really want to test TopBar component's output at this level you probably would want to set

jest.dontMock('../../src/js/component/layout/TopBar.js') 

as well to tell jest to not mock the TopBar component, so that the rendered DOM includes the output from TopBar component as well.

I have created a repo based on your example at Github that test for child components. There are two test files one tests for child components that are mocked and the other one doesn't mock the child component.


Related Query

More Query from same tag