测试嵌套的 React 组件答案

【问题标题】：Testing nested React components测试嵌套的 React 组件
【发布时间】：2015-07-19 08:46:29
【问题描述】：

我正在为我的 react 应用程序编写测试。但是当我尝试渲染一个嵌套组件时，我得到了错误TitleBar is not defined 并且测试失败了。

jest.dontMock('FUW.js');
jest.dontMock('TitleBar.js');

var React = require('react/addons');
var TitleBar = require('../js/components/TitleBar.js');
var FirstUseWindow = require('../js/components/windows/FirstUseWindow.js');
var TestUtils = React.addons.TestUtils;


describe('First use wizard', function(){
    afterEach(function(done){//cleanup the DOM
        React.unmountComponentAtNode(document.body);
        setTimeout(done);
    });

    var FirstUseWindowElement = TestUtils.renderIntoDocument(
        <div>
        <FirstUseWindow />
        </div>
    );
});

FirstUseWindow 包含导致错误的 TitleBar 元素。

FUW.js

if (React === undefined) {
    var React = require('react/addons');
}

var FirstUseWindow = React.createClass({
    firstUseComplete:function(){
    },    
    render:function(){
        return(
            <div>
                <TitleBar text="tested" />

            </div>
        );
    }
});

if (module !== undefined) {
    module.exports = FirstUseWindow;
}

TitleBar.js

if (React === undefined) {
    var React = require('react/addons');
}

var TitleBar = React.createClass({
    render:function(){
        return(
            <header className="bar bar-nav">
                <h1 className="title">{this.props.text}</h1>
            </header>
        );
    }
});

if (module != undefined) {
    module.exports = TitleBar;
}

【问题讨论】：

标签： javascript jasmine reactjs jestjs

【解决方案1】：

标题栏未定义，因为 fuw.js 中不需要它

【讨论】：