How to test whether a React Component contains another component with jest?

Question

I'm trying to use jest-cli to test whether one react component contains another component in it's output. I'm having trouble figuring out how to do this.

Here are my components:

DesignerPage Component

[...]
var TopBar = require('../components/layout/TopBar.js');

var DesignerPage = React.createClass({
  getInitialState: function() {
    var state = {
    };
    return state;
  },
  render: function() {
    return (
      <div> 
        <TopBar />
      </div>
    )
  }
});

module.exports = DesignerPage;

TopBar Component

/** @jsx React.DOM */
var React = require("react");

var TopBar = React.createClass({
    render: function() {
        return (
            <nav className="top-bar">
            </nav>
        );
    }
});

module.exports = TopBar;

Now, I want to test whether the DesignerPage component contains the TopBar component. Here is what I think should work:

/** @jsx React.DOM */
jest.dontMock('../../src/js/pages/DesignerPage.js');
describe('DesignerPage', function() {
  it('should contain a TopBar', function() {
    var React = require('react/addons');
    var DesignerPage = require('../../src/js/pages/DesignerPage.js');
    var TestUtils = React.addons.TestUtils;

    // Render a DesignerPage into the document
    var page = TestUtils.renderIntoDocument(
      <DesignerPage />
    );

    // Verify that a TopBar is included
    var topbar = TestUtils.scryRenderedComponentsWithType(page, 'TopBar');
    expect(topbar.length).toBe(1);
  });
});

But it doesn't pass... :(

$ ./node_modules/jest-cli/bin/jest.js DesignerPage
Found 1 matching test...
 FAIL  __tests__/pages/DesignerPage-test.js (4.175s)
● DesignerPage › it should contain a TopBar
  - Expected: 0 toBe: 1
        at Spec.<anonymous> (__tests__/pages/DesignerPage-test.js:16:27)
        at Timer.listOnTimeout [as ontimeout] (timers.js:112:15)
1 test failed, 0 test passed (1 total)
Run time: 6.462s

Answer 1

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);

Answer 2

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.