React 测试库不会导致 onClick 被调用答案

【问题标题】：React Testing Library Doesn't Cause onClick To Be CalledReact 测试库不会导致 onClick 被调用
【发布时间】：2021-09-23 13:11:36
【问题描述】：

我正在尝试使用 react-testing-library 运行一个非常简单的测试，其中一个按钮被赋予了一个模拟函数，该按钮被单击，并且测试检查该函数是否被调用。但是，测试当前失败，因为没有调用该函数。代码如下：

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

describe('Button', () => {
  test('eventHandler called on click', () => {
    const handleClick = jest.fn();
    render(
      <button onClick={handleClick} type="button">
        Click Me
      </button>
    );

    userEvent.click(screen.getByRole('button'));

    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

没有抛出错误，成功找到按钮，但由于某种原因，该函数没有注册它已被调用。

任何帮助将不胜感激！

【问题讨论】：

标签： reactjs jestjs react-testing-library

【解决方案1】：

对我来说工作得很好确保你安装了这个包@testing-library/user-event @testing-library/dom

步骤：

npx create-react-app rtl-typescript --template typescript
npx install --save-dev @testing-library/user-event @testing-library/dom

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

describe('Button', () => {
  test('eventHandler called on click', () => {
    const handleClick = jest.fn();
    render(
      <button onClick={handleClick} type="button">
        Click Me
      </button>
    );

    userEvent.click(screen.getByRole('button'));

    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

如果需要，我的 package.json 文件依赖项

【讨论】：

这是一个更好的答案，比其他的更详细。

【解决方案2】：

为您的按钮添加role 标签

<button 
  onClick={handleClick} 
  role="button" 
  type="button"
>
  Click Me
</button>

或使用screen.getByText('Click Me')

【讨论】：

似乎没有这样做。测试能够成功找到按钮，但由于某种原因，userEvent.click 没有触发 onClick 道具
你安装了 userEvent 吗？
是的，并且运行其他 userEvent 测试通过（如文档中的测试 - testing-library.com/docs/…）

【解决方案3】：

这行得通

describe('Button', () => {
  test.only('eventHandler called on click', () => {
    const handleClick = jest.fn();
    render(
      <button onClick={handleClick} type="button">
        Click Me
      </button>
    );

    userEvent.click(screen.getByText(/Click me/i));

    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

【讨论】：