单元测试React Bootstrap模态对话框 [英] Unit testing React Bootstrap modal dialog

问题描述

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

I'm trying to unit test React Bootstrap modal dialog using Jasmine. But it is not working as expected.

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

Here is jsfiddle link using latest versions of React, React Bootstrap, Jasmine.: 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行还有什么问题。如果我取消注释行，则会在注释中显示错误。

Also what is wrong with line#35-36. If I uncomment lines I get error shown in comments.

// 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作为第一个参数传递。

As per latest official documentation for test utilities (link), you are supposed to pass ReactComponent as first argument.

有人可以告诉我有什么问题吗？

Can somebody tell me what is wrong?

推荐答案

结帐react-bootstrap本身权限如何测试。模态被渲染成一个不同的子树，它是如何呈现给文档主体而不是直接作为其父项的子项。换句话说，您的srcying失败，因为该组件不在该Component树中。

checkout how react-bootstrap itself rights tests for this. the modal is rendered into a different subtree which is how it gets rendered to the document body and not directly as a child of its parent. in other words your srcying fails because the component is not in that Component tree.

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

you can use refs on the modal or look for the DOM nodes directly in the document.

这篇关于单元测试React Bootstrap模态对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！