如何使用 React 測試庫測試 RTK Query？

Question

我正在嘗試使用 RTK 查詢，但找不到一個很好的示例來說明如何使用反應測試庫為使用 RTK 查詢請求的組件編寫單元測試。 例如，我們有一個從服務器獲取列表的組件。 如何為請求模擬數據？ 我找到了一個解決方案，使用 mswjs for mocking API 進行測試。 但即便如此，我還是有問題——我需要添加 await new Promise((r) => setTimeout(r, 1000)); 在我檢查集合中的內容是否存在之前。 也許有人知道如何使用 RTK 查詢來測試組件？

Answer 1

你可以看看RTK Query 本身的測試。

一些事情：

• 使用msw模擬一個 api
• 使用您的 api 將您的組件包裝在一個真正的 Redux 存儲中（示例中為storeRef.wrapper ）
• 使用某些東西來等待 UI 更改，例如

      await waitFor(() =>
        expect(screen.getByTestId('isFetching').textContent).toBe('false')
      )

Answer 2

我發現的另一種方法是模擬 rtk 查詢掛鈎本身。 然后你可以為數據對象設置任何你想要的東西。

 jest.mock('pathToHook', () => ({ __esModule: true, default: () => () => { data: 'whatever you want' }, }))

Answer 3

任何人從未來看到這一點，我發現了RTK 查詢本身的測試

您還可以查看我關於如何使用反應測試庫測試 RTK 查詢的文章？