Search code examples
reactjsunit-testingjestjsenzymereactstrap

Content of Reactstrap Modal is not visible to jest mount


I have build a component in react based on reactstrap then using jest and Enzyme I am unable to test the content of modal. Let's see what I have tried so far:

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;

And I have its unit tests as follow:

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

By the way, I have already tried this method, but it didn't worked:

Similar issue posted on stackoverflow

But I don't know what am I doing wrong, could anyone spot any error or correct me if something not at proper way?


Solution

  • After a lot of research, I found that this was actually reactstrap library issue as I was using an old version i.e. "reactstrap": "5.0.0-beta", so I just updated reactstrap library to its latest version: "reactstrap": "^6.5.0" and it worked.

    Thank you @Herman for you time.