React 测试库中的 userEvent 不会导致 onClick 被调用

Question

我正在尝试使用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);
  });
});

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

任何帮助，将不胜感激！

Answer 1

我遇到了同样的问题，fireEvent 可以工作，但推荐的 userEvent 不会触发点击处理程序。结果发现 userEvent 是异步的。下面是我的工作测试用例。

test('Error message should show when all fields are blank', async () => {
  const user = userEvent.setup()
  render(<Signup />)
  
  await user.click(screen.getByRole('button'))

  expect(screen.getByTestId('errors'))
    .toHaveTextContent(dict.fields_must_not_be_empty)
})

Answer 2

role为您的按钮添加标签

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

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