是否可以在等待中使用 expectFor 作为我在 Act-Arrange-Assert 中的"Assert"？

Question

我最近开始使用React/DOM测试库来测试我所有的前端React代码。我遇到的第一个问题是，我们的应用程序的布局方式，我没有办法告诉什么时候加载数据(从Mock Service Worker在我的情况下)是完成的，因为一切都是通过Redux/Redux Saga处理的，我们的加载旋转器组件存在于我们正在测试的组件之外。

因此，为了等待数据被加载，我们实际上必须将原始数据本身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中，但在其他情况下，我要测试表中的几行，因此只有第一个断言将被包装在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

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

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

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

只能有一个断言

Answer 2

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

自然步骤是:

1 -渲染你的组件(执行某处getTableRowAndCell，当组件挂载?)

render(<TableComponent />);

2 -等待数据在文档中:

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