react-testing-library为何不等待react-hook-form提交后的状态切换？

核心问题分析 #

react-hook-form的表单提交往往涉及异步逻辑（比如校验、模拟接口请求），React Testing Library（RTL）不会自动等待所有异步操作完成。即便使用了await userEvent.click()，若提交逻辑里有延迟或异步步骤，仍需更明确的等待策略才能捕获到状态切换后的元素。

可行解决方案 #

1. 结合waitFor与异步查询断言 #

不要仅等待元素移除，要同时断言目标元素出现，确保状态完全切换完成：

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

test('提交表单后显示感谢提示', async () => {
  render(<YourFormComponent />);
  const user = userEvent.setup();

  // 填入表单内容
  await user.type(screen.getByLabelText('输入框'), '测试文本');
  
  // 点击提交按钮
  const submitBtn = screen.getByRole('button', { name: /提交/i });
  await user.click(submitBtn);

  // 等待提交按钮消失，同时断言感谢信息出现
  await waitFor(async () => {
    expect(submitBtn).not.toBeInTheDocument();
    expect(await screen.findByText('Thank you!')).toBeInTheDocument();
  });
});

这里用findByText（本身是异步查询方法，自带等待逻辑）配合waitFor，确保等到元素渲染完成后再断言，而非用会立即报错的同步查询getByText。

2. 处理表单内的异步提交逻辑 #

如果你的表单handleSubmit里包含异步操作（比如模拟接口请求），要确保测试时这些异步逻辑被正确等待：

// 表单组件内的提交逻辑示例
const onSubmit = async (data) => {
  // 模拟接口请求延迟
  await new Promise(resolve => setTimeout(resolve, 100));
  setSubmitted(true);
};

测试时await user.click(submitBtn)会等待onSubmit的异步操作完成，但如果是第三方库的异步逻辑，建议用waitFor包裹断言，给足状态更新的时间。

3. 移除手动act调用 #

RTL的render、userEvent方法已经自动包裹了act，手动添加act反而可能导致逻辑混乱，直接移除即可。

4. 调整查询方式 #

对于动态出现的元素，优先用findBy*系列异步查询方法，它默认会等待1000ms直到元素出现；若需更长等待时间，可在waitFor里设置超时：

await waitFor(() => {
  expect(screen.queryByText('Thank you!')).toBeInTheDocument();
}, { timeout: 2000 });

关键注意事项 #

• 所有userEvent的交互方法（type、click等）都要用await包裹，确保交互完成后再执行断言。
• 不要用同步查询方法（getBy*）捕获动态渲染的元素，避免因状态未更新导致断言失败。

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