单元测试React Bootstrap模态对话框

Question

我正在尝试使用Jasmine进行单元测试React Bootstrap模式对话框。但是它没有按预期工作。

这是使用最新版本的React，React
Bootstrap，Jasmine的jsfiddle链接：http :
//jsfiddle.net/30qmcLyf/3/

测试失败：

第27-28行

// This test fails. Find DOM Node.
var instanceDomNode = ReactDOM.findDOMNode(instance);
expect(instanceDomNode).not.toBe(null);

39-40行

//This test fails. Find modal header.
var headerComponents = TestUtils.scryRenderedComponentsWithType(component, ReactBootstrap.Modal.Header);
expect(headerComponents.length).not.toBe(0);

同样，第35-36行出了什么问题。如果我取消注释行，则会在注释中显示错误。

// Error: Did not find exactly one match for componentType:function ModalHeader()...
//var headerComponent = TestUtils.findRenderedComponentWithType(component, ReactBootstrap.Modal.Header);
//expect(headerComponent).not.toBe(null);

根据测试实用程序（link）的最新官方文档，应该将ReactComponent作为第一个参数传递。

有人可以告诉我怎么了吗？

Answer 1

检查一下react-
bootstrap本身如何对此进行权限测试。模态将呈现到不同的子树中，这就是它如何呈现到文档主体而不是直接作为其父代的子代。换句话说，您的编码失败，因为该组件不在该组件树中。

您可以在模式上使用ref或直接在文档中查找DOM节点。