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

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

Similar issue posted on stackoverflow

但是我不知道我在做什么错，如果有任何不正确的方法，谁能发现任何错误或纠正我？

Answer 1

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

Answer 2

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

感谢@Herman给您的时间。

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

});

开玩笑安装看不到Reactstrap Modal的内容

3 个答案: