单元测试 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.

谁能告诉我怎么了?

推荐答案

查看 react-bootstrap 团队如何为此编写测试.modal 被渲染到不同的子树中，这就是它如何渲染到文档正文而不是直接作为其父级的子级.换句话说，您的 srcying 失败，因为该组件不在该组件树中.

Check out how the react-bootstrap team writes 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.

您可以在 modal 上使用 refs 或直接在文档中查找 DOM 节点.

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

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