单元测试 React Bootstrap 模态对话框

IT技术 unit-testing reactjs jasmine react-bootstrap
2021-04-19 21:11:55

我正在尝试使用 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);

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

有人能告诉我出了什么问题吗？

3个回答

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

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

我没有检查出这一点：github.com/react-bootstrap/react-bootstrap/blob/master/test/...。它在内部如何工作的任何地方都有记录吗？目前，我正在直接测试 DOM 节点。
2021-05-25 21:11:55
请参阅stackoverflow.com/questions/45644244/...了解另一种方法，基于在文档中查找 DOM 节点。
2021-05-31 21:11:55

React-Bootstrap模态可以是使用单元测试mount的enzyme

it(componentToTest.title + 'renders Modal component', () => {  
  expect(wrapper.find(UVModal).length).toEqual(1);  
 });
  
 it(componentToTest.title + 'renders major html elements', () => {  
  // Test whether modal-content element has 3 html children elements.  
  expect(wrapper.find('.modal-content').length).toEqual(1);  
  expect(wrapper.find('.modal-content').children()).toHaveLength(3);  

  // Test whether modal-header element has 2 html children elements.  
  expect(wrapper.find('.modal-header').length).toEqual(1);  
  expect(wrapper.find('.modal-header').children()).toHaveLength(2);  

  // Test whether modal-body element has 1 html child element.  
  expect(wrapper.find('.modal-body').length).toEqual(1);  
  expect(wrapper.find('.modal-body').children()).toHaveLength(1);  

  // Test whether modal-footer element has 1 html child element.  
  expect(wrapper.find('.modal-footer').length).toEqual(1);  
  expect(wrapper.find('.modal-footer').children()).toHaveLength(1);  

  elementToSearch = <p>Lannisters always pay their debt</p>;  
  expect(wrapper.contains(elementToSearch)).toEqual(false);  
 });

详情请查看以下博客：

https://medium.com/@yuvi1422/unit-test-react-bootstrap-modal-a37bf59732ab

如果您使用的是旧版本的 Enzyme，您可以将容器元素传递到您希望渲染 Modal 的位置，如下所示：

Actual Code:
------------
import React from 'react'
import { Modal } from 'reactstrap'

export default MyModal = () => {
    return (
        <Modal isOpen={props.isOpen}>
            <ModalHeader>Header</ModalHeader>
            <ModalBody>Body</ModalBody>
        </Modal>
     );
} 

Unit Test:
----------
import React from 'react'
import MyModal  from './MyModal'
import { mount } from 'enzyme'

describe(() => {
    let wrapper;
    beforeEach(() => {
        const container = document.createElement("div");
        document.body.appendChild(container);
        wrapper = mount( <MyModal isOpen={true}/> , {attachTo: container});
    });

    it('renders correctly', () => {
        expect(wrapper).toMatchSnapshot();

        expect(wrapper.find('ModalHeader')).toHaveLength(1);

        expect(wrapper.find('ModalBody')).toHaveLength(1);
    });

})
其它你可能感兴趣的问题
上一篇如何在react和电子之间进行通信 下一篇如何使用 map() 方法从数组渲染图像？