Jest testing of hook onClick calls - reactjs

Question

This error appears when running this onClick call test with Jest, does anyone know why?
I'm developing an app with React, and I'm new to its testing framework. I'm trying to develop a testing method to check if an onClick button is clicked. I've read that I need a "spy" function to get the information about whether or not it's been called.
The preference is to keep an enzyme and jest test stack.
expect(received).toBe(expected) // Object.is equality
Expected: 1
Received: 0
46 | test("onClick calls props.onClick", () => {
47 | nodes.simulate("click");
> 48 | expect(onClickMock.mock.calls.length).toBe(1);
Since I'm mocking onClick in a way that was to return the value 1
Test
import React from "react";
import Enzyme, { shallow } from "enzyme";
import Adapter from "#wojtekmaj/enzyme-adapter-react-17";
import { expect } from "#jest/globals";
import { findByTestId } from "../../utils/test";
import Accordion from "./accordion.jsx";
Enzyme.configure({ adapter: new Adapter() });
const defaultProps = {
opened: {},
Accordion: {},
};
const setup = (props = {}) =>
shallow(<Accordion {...props} {...defaultProps} />).dive();
describe("Function calls", () => {
let wrapper, nodes, props;
describe("Button", () => {
let onClickMock;
beforeEach(() => {
onClickMock = jest.fn();
props = {onClick: onClickMock};
wrapper = setup(props);
nodes = findByTestId(wrapper, "arrow");
});
test("onClick calls props.onClick", () => {
nodes.simulate("click");
expect(onClickMock.mock.calls.length).toBe(1);
});
});
});
Component
import { useState } from 'react';
import styled from 'styled-components';
import { IoIosArrowForward, IoIosArrowDown } from 'react-icons/io';
import styles from '../../variables';
const Accordion = (props) => {
const [opened, setOpened] = useState(false);
const renderArrow = () => {
if (!opened) return <IoIosArrowForward className="is-size-4" color={styles.primaryBlue} />
return <IoIosArrowDown className="is-size-4" color={styles.primaryBlue} />
}
const renderPanel = () => {
if (opened) return <Panel>{props.children}</Panel>
}
const togglePanel = () => {
setOpened(!opened)
}
return (
<AccordionTile data-testid="accordionTile" className={props.className + " px-6 py-5 is-clickable"}>
<p data-testid="arrow" onClick={togglePanel} className="is-flex is-flex-direction-row is-align-items-flex-start is-justify-content-flex-start is-size-5">
{renderArrow()} {props.title}
</p>
{renderPanel()}
</AccordionTile>
);
}
export default Accordion
Could someone guide me to finish testing this onClick

Answer 1

So you click and check that content appears:
wrapper = setup({
children: <span id="test" />
});
// accordion is collapsed yet
expect(wrapper.find('span#test')).toHaveLength(0);
nodes.simulate('click');
// accordion is expanded; children nodes are rendered
expect(wrapper.find('span#test')).toHaveLength(1);
Also you better switch from shallow() to mount() before you run into issues with useEffect is not called. You will still be able to avoid rendering some nested components by explicitly mocking them:
jest.mock('react-icons/io', () => ({
IoIosArrowForward: (props) => <span {...props} />,
IoIosArrowDown: props => <span {...props} />
}));
And also in way you do it now:
<Accordion {...props} {...defaultProps} />
your defaultProps overwrite props with the same name. To have it working in reasonable way(when defaultProps can be overwritten by props if you want to) it should go in reverse order:
<Accordion {...defaultProps} {...props} />