React Hook Form + Chakra UI中"无法找到包含文本的元素"错误的原因和解决方案

引言

当我在使用React Hook Form和Chakra UI创建必填输入表单时，遇到了一个问题：错误消息在UI中正确显示，但在Jest测试中却无法通过。

问题

在使用React Hook Form + Chakra UI测试必填字段时，错误消息在生产环境中正确显示，但Jest测试却失败了。

1

Unable to find an element with the text: ID is required

元素在UI中正确显示，但在测试中却找不到。原因是React Hook Form的验证错误没有立即反映在DOM中。因此，当我使用getByText搜索元素时，它还没有出现在DOM中，导致测试失败。

解决方案

我使用了Testing Library中的findByText来等待元素被找到。

这会失败：

1

expect(screen.getByText("ID is required")).toBeInTheDocument();

使用异步支持后成功：

1

expect(await screen.findByText("ID is required")).toBeInTheDocument();

这解决了测试失败但UI显示正确的不一致问题。

总结

当UI和Jest行为不一致时，怀疑是异步行为导致的。