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?
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.