I am kinda new to jest and unit testing in general. I created a component that has a click handler. I would like to check that when I clicked it whether the state updated. However it always tells me “TypeError: Cannot read property ‘equal’ of undefined”. if I try to log the fidn result it doesn’t do anything. but i know there is a node inside of it because if i change the name it gives the error: “expect node to be 1 but found 0” Would anyone be kindly enough to give any pointers? cheers!
The component
import React from "react"; import PropTypes from "prop-types"; import { getFlag } from "../helpers/helperFucntions"; import CountrySportDetails from "./CountrySportDetails"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCaretDown, faCaretUp, faMedal } from "@fortawesome/free-solid-svg-icons"; class CountryListComponent extends React.Component { state = { detailsOpenStatus: false }; toggleDetailsOpenStatus = () => { this.setState({ detailsOpenStatus: !this.state.detailsOpenStatus }); }; render() { const { countryDetails, sportslist } = this.props; const flag = getFlag(countryDetails.c_Name); let goldMedalCount = 0; let silverMedalCount = 0; let bronzeMedalCount = 0; sportslist.map(sport => { goldMedalCount += sport.GoldMedalList.length; silverMedalCount += sport.SilverMedalList.length; bronzeMedalCount += sport.BronzeMedalList.length; }); const medals = ( <div className="country-listitem__medal-container"> <div> <FontAwesomeIcon icon={faMedal} className="gold" /> {goldMedalCount} </div> <div> <FontAwesomeIcon icon={faMedal} className="silver" />{" "} {silverMedalCount} </div> <div> <FontAwesomeIcon icon={faMedal} className="bronze" />{" "} {bronzeMedalCount} </div> </div> ); console.log("medals", goldMedalCount, silverMedalCount, bronzeMedalCount); const caret = this.state.detailsOpenStatus === false ? ( <FontAwesomeIcon icon={faCaretDown} /> ) : ( <FontAwesomeIcon icon={faCaretUp} /> ); return ( <div className="country-listitem__countainer" onClick={this.toggleDetailsOpenStatus} > <div className="country-listitem__flag-container">{flag}</div> <div className="country-listitem__country-name"> {countryDetails.c_Name} {medals} </div> <div className="country-listitem__caret">{caret}</div> <CountrySportDetails sportslist={sportslist} openDetailsStatus={this.state.detailsOpenStatus} /> </div> ); } } CountryListComponent.propTypes = { countryDetails: PropTypes.object.isRequired, sportslist: PropTypes.array.isRequired }; export default CountryListComponent;
The test
import React from "react"; import ReactDOM from "react-dom"; import CountryListComponent from "./CountryListComponent"; import { configure, shallow, mount } from "enzyme"; import Adapter from "enzyme-adapter-react-16"; import { isExpressionWrapper } from "@babel/types"; configure({ adapter: new Adapter() }); test("renders without crashing", () => { shallow(<CountryListComponent countryDetails={{}} sportslist={[]} />); }); test("test the click handler", () => { const container = mount( <CountryListComponent countryDetails={{}} sportslist={[]} /> ); container.find(".country-listitem__countainer").simulate("click"); container.update(); expect(container.state("detailsOpenStatus")).to.equal(true); });
