Question

尝试使用React的Test-Utils（https://facebook.github.io/react/docs/test-utils.html）来测试我的组件。

我们有所有者和Ownee。

所有者呈现：

<Ownee>
    <div class="inner"> 
        <div class="moreInner" />
    </div>
</Ownee>

我的测试是这样的：

var comp = TestUtils.renderIntoDocument(<Owner />);
var innerClass = TestUtils.findRenderedDOMComponentWithClass(comp, "inner");
expect(innterClass).to.not.be.null;

理想情况下，这应该可以正常工作。但实际上，它输出：＆＃34;没有找到一个匹配（找到：0）＆＃34;。

因此，如果我删除上面的<Ownee></Ownee>，那就像：

    <div class="inner"> 
        <div class="moreInner" />
    </div>

它按预期工作，但我不能使用它（必须渲染Ownee元素）。

Ownee呈现如下内容：

<div class="inner"> 
    {this.props.children}
</div>

有关如何使用TestUtils获得所需结果的任何建议（这是测试工作并按类查找div）？

谢谢！

Answer 1

所以问题不是所有者/欠者。结果是我正在使用React-Bootstrap的模态对话框（作为Ownee）。所以发生的事情是测试会渲染组件，但它会放在不同的组件树上。

为了解决这个问题，我提出了一个先前提出的问题： Testing a React Modal component

具体来说，是用户177885的答案。

var stubModal = () => {
    var createElement = React.createElement;
    modalStub = sinon.stub(React, 'createElement', function (elem: any) {
        return elem === ModalDialog ?
            React.DOM.div.apply(this, [].slice.call(arguments, 1)) :
            createElement.apply(this, arguments);
    });
    return modalStub;
};
var stubModalRestore = () => {
    if (modalStub) {
        modalStub.restore();
        modalStub = undefined;
    } else {
        console.error('Cannot restore nonexistent modalStub');
    }
};

before(() => { stubModal(); });
after(() => { stubModalRestore(); });

其他链接： Unit testing React Bootstrap modal dialog

React - 所有者Ownee单元测试

1 个答案: