单元测试 – 如何测试一个React组件是否包含另一个组件与jest?

我试图使用jest-cli测试一个反应组件是否包含其输出中的另一个组件.我无法想出如何做到这一点.

这是我的组件:

DesignerPage组件

[...]
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);
  });
});

但它不通过…

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...