Jest Unit testing onClick event

Question

I have a Component and want to unit test it with react jest... I want to test onClick event.. I've tried many cases but they don't cover onClick statement

This my Component

export default class HeaderCreate extends Component {

  render() {
    const { name, description, closeRightSection } = this.props;
    return (
      <div className="header">
        <h1 className="header-text" title={name} data-testid="header">{name}</h1>
        <p data-testid= "description-para">{description}</p>

        <Tooltip title="Close Section">
          <div className="icon-close">
            <i className="material-icons" onClick={() => closeRightSection()} data-testid="id">close</i>
          </div>
        </Tooltip>
      </div>
    )
  }
}; 

This is my test.js

import React from 'react'
import { render } from "@testing-library/react";

import HeaderCreate from '../components/createHeader';

test("render header correctly", () => {
    const { getByTestId } = render(<HeaderCreate name="My Name is Test"></HeaderCreate>);
    expect(getByTestId('header').textContent).toBe('My Name is Test')
});

test("render Description Paragraph correctly", () => {
    const { getByTestId } = render(<HeaderCreate description="Hi I am Description box"></HeaderCreate>);
    expect(getByTestId('description-para').textContent).toBe('Hi I am Description box')
});

test("render close tooltip correctly", () => {
    const { getByTestId } = render(<HeaderCreate closeRightSection=""></HeaderCreate>);
    expect(getByTestId('id')).toBeTruthy();
}); 

In Coverage it is show all onClick event as statement not covered.. and statement coverage is 66.67%. How can I make it 100%..? I am new to Reactjs. So I am Confused what to do now.. I have search on various place but didn't got any solution. Please suggest me where I am wrong

Thanks in advance

Answer 1

It looks like you need to write a test to simulate clicking on the i element. You can accomplish this with the fireEvent helper from RTL. Create a mock callback to pass in props, target the id test id and simulate a click and assert the callback was called.

import { render, fireEvent } from '@testing-library/react';

...

test("should call closeRightSection callback", () => {
  const closeRightSectionSpy = jest.fn();

  const { getByTestId } = render(
    <HeaderCreate closeRightSection={closeRightSectionSpy} />
  );

  fireEvent.click(getByTestId('id'));

  expect(closeRightSectionSpy).toHaveBeenCalled();
});