小编典典

单元测试React Bootstrap模态对话框

reactjs

我正在尝试使用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作为第一个参数传递。

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


阅读 334

收藏
2020-07-22

共1个答案

小编典典

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

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

2020-07-22