Content of Reactstrap Modal is not visible to jest mount - reactjs

Question

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?

Answer 1

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.

Answer 2

Your ModalExample does not render it's children prop, so <p>Hello world</p> is essentially ignored. Why are you passing it in?

Answer 3

In case you are using an older version of Enzyme/ReactStrap, you can pass the container element to mount where you want your Modal to be rendered, like this:
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);
});
});