React testing-library - 测试在第一个 useEffect 挂钩中设置状态的承诺

Question

我有一个 useEffect 钩子，它在安装组件时加载，如下所示：

useEffect(() => {
   listFiles().then(keys => {
      setKeys(keys)
      console.log(keys)
   }).catch(err => {
        showFail(err.message)
   })
}, [])

我正在尝试使用反应测试库来测试该函数，只需使用渲染函数：

beforeEach(() => {
  render(<Dashboard />)
})

但是，当我运行任何解决承诺并设置状态的测试时：

jest.mock('../utils/storage', () => ({
    listFiles: jest.fn(() => Promise.resolve([])),
}))

我最终收到一条关于使用actto 包装事件的奇怪警告消息：

  Warning: An update to Dashboard inside a test was not wrapped in act(...).

    When testing, code that causes React state updates should be wrapped into act(...):

    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */

    This ensures that you're testing the behavior the user would see in the browser. Learn more at .. 
        in Dashboard

      18 |     useEffect(() => {
      19 |         listFiles().then(keys => {
    > 20 |             setKeys(keys)
         |             ^
      21 |             console.log(keys)
      22 |         }).catch(err => {
      23 |             showFail(err.message)

我尝试将渲染包装在 中act，但它似乎没有改变任何东西。

关于我在这里做错了什么有什么建议吗？我应该以其他方式渲染吗？

提前致谢！

Answer 1

当您尝试在组件完成更新所有状态之前断言时，通常会发生此错误。

\n

请注意，listFiles您在内部调用setKeys(keys)调用并更新状态。

\n

你应该await让新密钥（或文件）显示在文档中：

\n

expect(await findByText(\'some file name or key\')).toBeInTheDocument();\n// more asserts here\n

\n

或者，您可以等待模拟被调用（尽管我认为上面的选项更好）。

\n

await waitFor(() => expect(listFilesMock).toHaveBeenCalled());\n// more asserts here\n

\n

上面的方法应该已经act由 React 测试库为您包装好了，所以您不需要这样做

\n\n

act()React文档内容如下：

\n

\n

在编写 UI 测试时，渲染、用户事件或数据获取等任务可以被视为与用户界面交互的 \xe2\x80\x9cunits\xe2\x80\x9d 。React 提供了一个名为 act() 的帮助器，它确保在做出任何断言之前与这些 \xe2\x80\x9cunits\xe2\x80\x9d 相关的所有更新都已被处理并应用到 DOM。

\n

act 名称来自 Arrange-Act-Assert 模式。

\n

\n\n

有用的链接：

\n

\n
• 修复 React 测试库作者的行为警告
\n
• React 法案文档
\n

\n