Reactstrap Modal 的内容对 jest mount 不可见

Question

我已经基于 reactstrap 在 react 中构建了一个组件，然后使用 jest 和 Enzyme 我无法测试模态的内容。让我们看看到目前为止我尝试了什么：

import React from 'react';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

    class ModalExample extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          modal: false
        };

        this.toggle = this.toggle.bind(this);
      }

      toggle() {
        this.setState({
          modal: !this.state.modal
        });
      }

      render() {
        return (
          <div className="modal-testing">
            <Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button>
            <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
              <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
              <ModalBody className="inside">
                I just want this to show up in unit test
                Name: <input type="text" />
              </ModalBody>
              <ModalFooter>
                <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
                <Button color="secondary" onClick={this.toggle}>Cancel</Button>
              </ModalFooter>
            </Modal>
          </div>
        );
      }
    }

    export default ModalExample;

我的单元测试如下：

import React from 'react';
import {mount, ReactWrapper} from "enzyme";
import ModalExample from "./ModalExample";

const wrapper = mount(
    <ModalExample isOpen={isOpen} toggle={toggle} />
);
const button = wrapper.find('Button').at(0);
button.simulate('click');
// What I have tried
expect(wrapper.text()).toBe('I just want this to show up in unit test');
expect(wrapper.find('input')).toHaveLength(1); // it gets failed

顺便说一句，我已经尝试过这个方法，但是没有用：

但是我不知道我做错了什么，如果有什么不对的地方，有人能发现任何错误或纠正我吗？

Answer 1

您的 ModalExample 不会渲染它的 children 道具，因此 <p>Hello world</p> 基本上被忽略了。你为什么要传递它？

Answer 2

经过大量研究，我发现这实际上是 reactstrap library issue as I was using an old version i.e. "reactstrap": "5.0.0-beta", so I just updated reactstrap 最新版本的库："reactstrap": "^6.5.0" 并且有效。

谢谢@Herman 抽出时间。

Answer 3

如果您使用的是旧版本 Enzyme/ReactStrap，您可以将容器元素传递到您希望呈现模态框的位置，如下所示：

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);
    });

});

Reactstrap Modal 的内容对 jest mount 不可见

Content of Reactstrap Modal is not visible to jest mount

unit-testing

reactjs

jestjs

enzyme

reactstrap