可以在 Act-Arrange-Assert 中使用 waitFor 中的 expect 作为我的 "Assert" 吗？

Question

我最近开始使用 React / DOM 测试库来测试我所有的前端 React 代码。我遇到的第一个问题是我们的应用程序的布局方式，我无法判断数据加载（在我的例子中来自 Mock Service Worker）何时完成，因为一切都是通过 Redux/Redux Saga，我们的 Loading spinner 组件位于我们正在测试的组件之外。

因此，为了等待数据加载，我们实际上必须 waitFor 原始数据本身（因为我们不能简单地等待加载微调器或文本消失，因为它位于组件之外):

// Expect our first row's Name column to match our filter by text
await waitFor(() => expect(getTableRowAndCell(table, 1, 1).textContent).toBe('OUTSTANDING')

在这种情况下，我们的 Act-Arrange-Assert 模式中的断言位于 waitFor 内，尽管在其他情况下我正在测试 table 中的多行，因此只有第一个断言是包装在 waitFor 中，而其他的可以直接断言，如下所示：

// Expect our first row's Value column to match our filterByText
await waitFor(() => expect(getTableRowAndCell(table, 1, 3).textContent).toBe('VALUE')
// Expect our second row's Value column to match our filterByText
expect(getTableRowAndCell(table, 2, 3).textContent).toBe('VALUE')

这引出了问题的主题：这是在我的测试中布置断言的有效方式吗？

Answer 1

您是否正在尝试执行纯函数 (getTableRowAndCell) 来检查结果是否在 DOM 中？

自然步骤是：

1 - 渲染您的组件（组件挂载时在某处执行 getTableRowAndCell？）

render(<TableComponent />);

2 - 等待数据进入文档：

expect(await screen.findByText('VALUE')).toBeInTheDocument();

Answer 2

回答有点晚，但我相信这是编写断言的完美方式。

我和我工作场所的其他开发人员一直在关注这个博客：https://kentcdodds.com/blog/common-mistakes-with-react-testing-library

他是 React Testing Library 的作者，他说这样做很好。请记住，每个 waitFor

应该只有一个断言

可以在 Act-Arrange-Assert 中使用 waitFor 中的 expect 作为我的 "Assert" 吗？

Is it okay to use the expect inside of a waitFor as my "Assert" in Act-Arrange-Assert?

reactjs

react-testing-library

testing-library