I am new to Jest and Enzyme and I am trying to figure out how to solve this Error. I have tried all the possible solutions(also the ones that are on stackoverflow).
If this isn't the correct approach, I would appreciate being told what is.
What I Want to Test?
A Component(named Company), which has a button 'Add' and on its click a modal(controlled by state) is opened. So, I want to test whether on the button click, state used to control the visibility of the modal changes from 'false' to 'true'.
My Approach So Far:
Going through the docs and a lot of answers on stackoverflow I have modified my code according to what worked for me
Company.js
import React from 'react';
import { Modal Col, Label, Row, Card, CardBody, CardColumns, CardHeader } from 'reactstrap';
import { connect } from 'react-redux';
import MUIDataTable from "mui-datatables";
const columns = [/*table data headers */ ]
export class Company extends React.Component {
state = {
show: false,
}
}
handleShow = () => {...}
componentDidMount() {
this.fetchCompanies();
}
fetchCompanies = () => { /*API calls */ }
render() {
const options = {
filterType: 'checkbox',
selectableRows:false,
customToolbar:() => {
return <Button className="btn btn-primary" id="companyAdd" onClick={this.handleShow}>Add</Button>
}
}
return (
<div>
<Col xs="12" lg="12">
<MUIDataTable
columns={columns}
options={options}
/>
</Col>
<Col xs="12" lg="12">
<Modal isOpen={this.state.showChangePwd}></Modal>
</div>
);
}
}
const mapDispatchToProps = dispatch => ({..});
function mapStateToProps(state) {..}
export default connect(mapStateToProps,mapDispatchToProps)(Company);
I am trying to find the button in option object(inside render)
Company.test.js
import ReactDOM from "react-dom";
import {Company} from "../Company";
import { cleanup} from "@testing-library/react";
import "@testing-library/jest-dom";
import { configure, mount, shallow , render} from "enzyme";
afterEach(cleanup)
it("renders without crashing", () => {
expect(render(<Example/>))
})
it("renders button correctly", () => {
const onButtonClickMock = jest.fn();
const wrapper = shallow(<Example updateSelectedDashboard={onButtonClickMock}/>)
expect(wrapper.state('show')).toEqual(false);
const button = wrapper.find('companyAdd');
button.simulate('click')
expect(wrapper.state('show')).toEqual(true);
})
I have also tried .dive() even that didn't work.