Reactstrap Modal 的内容对 jest mount 不可见答案

【问题标题】：Content of Reactstrap Modal is not visible to jest mountReactstrap Modal 的内容对 jest mount 不可见
【发布时间】：2019-05-17 12:08:43
【问题描述】：

我已经基于 reactstrap 构建了一个组件，然后使用 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

对了，这个方法我已经试过了，但是没用：

Similar issue posted on stackoverflow

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

【问题讨论】：

标签： reactjs unit-testing jestjs enzyme reactstrap

【解决方案1】：

你的ModalExample 没有渲染它的children 属性，所以<p>Hello world</p> 基本上被忽略了。为什么要传进去？

【讨论】：

好的，让我删除那个
标签，但是我仍然无法在我的测试中渲染孩子？

【解决方案2】：

经过大量研究，我发现这实际上是reactstrap 库问题，因为我使用的是旧版本，即“reactstrap”：“5.0.0-beta”，所以我刚刚将reactstrap 库更新为它的最新版本：“reactstrap”：“^6.5.0”，它有效。

感谢@Herman 抽出宝贵时间。

【讨论】：

【解决方案3】：

如果您使用的是旧版本的 Enzyme/ReactStrap，您可以将容器元素传递到您希望渲染 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);
    });

});

【讨论】：