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

I've not used JEST but I'm not seeing any obvious issues here. From reading the docs, it looks like you're doing things correctly. Just thought I'd mention that since you're not getting much traffic here. — Mike Driver
– Mike Driver, Commented Oct 12, 2014 at 18:15

Tom · Accepted Answer · 2014-10-20 20:57:47Z

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

answered Oct 20, 2014 at 20:57

Tom

1,0598 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nimgrg · Accepted Answer · 2014-10-22 07:33:34Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related