如何测试一个 React 组件是否包含另一个带有玩笑的组件？答案

【问题标题】：How to test whether a React Component contains another component with jest?如何测试一个 React 组件是否包含另一个带有玩笑的组件？
【发布时间】：2014-12-06 00:34:24
【问题描述】：

我正在尝试使用 jest-cli 来测试一个反应组件是否在其输出中包含另一个组件。我无法弄清楚如何执行此操作。

这是我的组件：

设计器页面组件

[...]
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 组件

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

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

module.exports = TopBar;

现在，我想测试 DesignerPage 组件是否包含 TopBar 组件。这是我认为应该起作用的：

/** @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);
  });
});

但它没有通过...... :(

$ ./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

【问题讨论】：

我没有使用过 JEST，但在这里我没有看到任何明显的问题。通过阅读文档，看起来你做的事情是正确的。只是想我会提到这一点，因为您在这里没有太多流量。

标签： unit-testing tdd reactjs jestjs

【解决方案1】：

我没有运行有问题的代码，但行：

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

在我看来很可疑。 docs 似乎建议您应该传递 componentClass 而不是字符串。

我看不出它怎么可能使用字符串来识别组件类型。它可能会使用displayName 通过字符串来识别它，但我怀疑它会这样做。

我想你可能想要这个：

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

【讨论】：

【解决方案2】：

我遇到过类似的情况，我需要检查子组件是否正在渲染。据我了解，jest 会模拟所有必需的模块，但您指定不这样做的模块除外。因此，在您的情况下，子组件 Topbar 将被模拟，这让我猜测渲染的 DOM 不会像预期的那样。

至于检查子组件是否被渲染我会做

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

它主要检查被模拟的子组件是否被调用。

如果你真的想在这个级别测试 TopBar 组件的输出，你可能需要设置

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

同时告诉 jest 不要模拟 TopBar 组件，以便渲染的 DOM 也包含 TopBar 组件的输出。

我根据您在Github 的示例创建了一个存储库，用于测试子组件。有两个测试文件，一个测试被模拟的子组件，另一个不模拟子组件。

【讨论】：