介绍 当我使用 React Hook Form 和 Chakra UI 创建必填输入表单时， 遇到了一个问题：错误信息在 UI 中显示正确，但在 Jest 测试中却显示错误。 在本文中，我将分享原因和解决方案。
问题 当使用 React Hook Form + Chakra UI 测试必填字段时， 错误消息在生产中正确显示，但 Jest 测试失败。
Unable to find an element with the text: ID is required 该元素在 UI 中显示正确，但在测试中却显示错误。 原因是 React Hook Form 的验证错误没有立即反映在 DOM 中。 因此，当我使用 getByText 搜索该元素时，它还没有出现在 DOM 中，导致测试失败。
解决方案 我使用测试库中的 findByText 来等待找到元素。
这失败了。
expect(screen.getByText("ID is required")).toBeInTheDocument(); 通过异步支持成功。
expect(await screen.findByText("ID is required")).toBeInTheDocument(); 这解决了测试失败但 UI 显示的差异。查看更多www.youjiutian.com
