React Testing Library中userEvent点击未触发onClick回调问题求助

问题根因 #

• 你使用的是@testing-library/user-event v14及以上版本，该版本所有交互API均为异步方法，你当前以同步方式调用userEvent.click时，断言执行早于点击事件触发完成，因此获取不到函数调用记录。
• 新版本不再推荐直接调用userEvent的静态方法，需要先调用userEvent.setup()初始化交互实例后再使用相关API。

修复后的代码 #

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

describe('Button', () => {
  // 测试函数标记为async
  test('eventHandler called on click', async () => {
    const handleClick = jest.fn();
    render(
      <button onClick={handleClick} type="button">
        Click Me
      </button>
    );
    // 初始化userEvent实例
    const user = userEvent.setup();
    // 等待点击操作执行完成
    await user.click(screen.getByRole('button'));

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

额外排查项 #

如果修改后仍然失败，可以逐一检查以下内容：

• 确认依赖版本兼容：@testing-library/react需为v13及以上版本，和@testing-library/user-event v14及以上版本匹配，避免版本不兼容导致的交互异常。
• 确认按钮未被设置disabled属性、也没有透明覆盖层遮挡元素，不过你已经可以正常定位到按钮，这类问题出现概率极低。

内容的提问来源于stack exchange，提问作者Matt Stobbs