Jest 单元测试 onClick 事件答案

【问题标题】：Jest Unit testing onClick eventJest 单元测试 onClick 事件
【发布时间】：2021-10-25 07:21:54
【问题描述】：

我有一个组件，想用 react jest 对其进行单元测试...我想测试 onClick 事件..我尝试了很多案例，但它们不包括 onClick 语句

这是我的组件

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>
    )
  }
};

这是我的 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();
});

在 Coverage 中，将所有 onClick 事件显示为未覆盖的语句.. 语句覆盖率为 66.67%。我怎样才能使它100％..？我是 Reactjs 的新手。所以我很困惑现在该怎么办..我在各个地方进行了搜索，但没有得到任何解决方案。请建议我哪里错了

提前致谢

【问题讨论】：

您是否尝试过定位i标签元素并在单元测试中点击它？

标签： javascript reactjs unit-testing onclicklistener react-testing-library

【解决方案1】：

您似乎需要编写一个测试来模拟点击i 元素。您可以使用来自 RTL 的 fireEvent 助手来完成此操作。创建一个模拟回调以传入 props，定位 id 测试 id 并模拟点击并断言回调已被调用。

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();
});

【讨论】：