测试嵌套的React组件

Question

我正在为我的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;
}

Answer 1

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