如何使用React Testing Library和Jest测试必填输入字段？

核心问题排查与修正 #

你遇到的报错是多个错误叠加导致的，按以下步骤修改即可：

1. findBy* 方法必须加await：findByText是异步查询方法，返回的是Promise对象，你之前未加await直接断言，会导致Promise未完成就进入后续逻辑，触发act重叠、定时器相关报错。
2. 不需要手动包裹act()：React Testing Library 提供的fireEvent、waitFor、findBy*方法内部已经自动封装了act调用，手动额外包裹反而会导致act重叠的警告。
3. 优先使用模糊文本匹配：精确文本匹配很容易因为文本前后多余空格、大小写差异、文本被拆分成多个元素而匹配失败，改用正则匹配可以避免这类问题。
4. findBy*自带等待能力，不需要额外嵌套waitFor：findByText本身就是getByText+waitFor的组合，直接使用即可简化代码。

修正后的测试代码 #

const input = screen.getByRole('textbox', {name: /name \*/i})
expect(input).toBeInTheDocument();
// 触发点击、失焦逻辑
fireEvent.click(input);
fireEvent.blur(input);
await waitFor(() => expect(input).toHaveValue(config.EMPTY_STRING));

// 直接触发鼠标悬浮，无需手动包act
fireEvent.mouseOver(input);

// 异步查询必填提示，等待元素出现
const requiredTip = await screen.findByText(/name is required/i);
expect(requiredTip).toBeInTheDocument();

兜底排查方案 #

如果修改后仍未解决，可以按以下顺序排查：

• 触发悬浮后调用screen.debug()打印当前DOM结构，确认提示是否已渲染、文本内容是否和匹配规则一致
• 如果你使用的是组件库的内置表单校验提示，确认组件配置没有关闭提示展示、或者提示挂载节点没有被隐藏
• 如果是浏览器原生的required属性弹出的提示，该内容属于浏览器内置UI，不会出现在DOM树中，无法通过RTL的文本查询命中，此时建议改为测试表单校验逻辑的返回结果即可

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