0

我最近开始使用 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 中，尽管在其他情况下我正在测试表中的几行，因此只有第一个断言会被包装在 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')

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

4

2 回答 2

1

这是一个迟到的答案，但我相信这是编写断言的完美方式。

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

他是 React Testing Library 的作者，他说这样做很好。请记住，您应该每个只有一个断言waitFor

于 2021-12-10T02:45:42.407 回答
0

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

自然的步骤是：

1 - 渲染你的组件（它在某处执行getTableRowAndCell，当组件安装时？）

render(<TableComponent />);

2 - 等待数据出现在文档中：

expect(await screen.findByText('VALUE')).toBeInTheDocument();
于 2021-02-27T08:17:52.320 回答