求助：react-testing-library测试中react-hook-form的handleSubmit无法触发状态变更

云上老周

2026-8-14

问题分析与解决

问题根源

测试里用fireEvent.click触发提交按钮时，表单的**默认提交行为（页面刷新）**在测试环境中没有被正确阻止，导致组件直接被卸载，状态更新后的重新渲染流程被中断，所以console.info永远不会执行。而直接调用onSubmit的按钮不会触发表单默认提交逻辑，测试能正常走完状态更新流程。

解决方案

有两种简单的修复方式：

方式一：改用`userEvent`代替`fireEvent`

@testing-library/user-event模拟真实用户的交互逻辑，能自动配合react-hook-form的handleSubmit处理默认提交行为，不需要额外操作：

先确保安装依赖：

npm install @testing-library/user-event --save-dev

修改测试代码：

import userEvent from '@testing-library/user-event';

it('tests a button click', async () => {
  const user = userEvent.setup();
  render(<Test/>);

  await screen.findAllByRole('heading');
  const button = screen.getByRole('button');
  
  await user.click(button);
});

方式二：手动阻止默认行为

如果继续使用fireEvent，可以在点击时传入配置项阻止表单默认刷新，同时等待状态更新后的渲染：

import { waitFor } from '@testing-library/react';

it('tests a button click', async () => {
  render(<Test/>);

  await screen.findAllByRole('heading');
  const buttons = await screen.findAllByRole("button");
  
  fireEvent.click(buttons[0], { preventDefault: true });
  await waitFor(() => {
    expect(console.info).toHaveBeenCalled();
  });
});