開玩笑：警告：測試中對 MyComponent 的更新沒有包含在 act(...) 中，但我沒有更新它？

Question

我有一個超級簡單的測試：

  it('renders', () => {
    const { toJSON } = render(
      <MockedProvider>
        <MyComponent />
      </MockedProvider>
    )

    expect(toJSON()).toMatchSnapshot()
  })

就是這樣。 我在這里有一些reactiveVar邏輯，它做了一些事情，但玩笑拋出了很多最值得注意的錯誤：

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

我知道如果您在更新內容時更新內容，這是一個簡單的解決方法，但是為什么我在渲染快照時會看到此錯誤？ 測試通過了，但我想刪除它噴出的所有這些東西

Answer 1

任何可能需要時間的事情——渲染、用戶事件、數據獲取——必須在任何測試斷言之前完成（在你調用expect()之前）

可能<MyComponent />在斷言之前仍在解析一些異步代碼（可能useEffect(fn) ？）。

您需要使用waitFor()來解決此問題：

-  it('renders', () => {
+  it('renders', async () => {
    const { toJSON } = render(
      <MockedProvider>
        <MyComponent />
      </MockedProvider>
    )

-    expect(toJSON()).toMatchSnapshot()
+    await waitFor(() => {
+      expect(toJSON()).toMatchSnapshot()
+    })
  })