React+Enzyme+Redux Error: Method “simulate” is meant to be run on 1 node. 0 found instead

Viewed 171

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.

1 Answers

You forgot your css selectors :)

const button = wrapper.find('#companyAdd');
Related