測試失敗是因為在React Testing Library中沒有在findBy之前放置waitFor語句

Question

render(view)
let timerCellsList;
await waitFor(() => {
  lockCellsList = screen.getAllByTestId('TimerCell');
  expect(lockCellsList).toHaveLength(2);
});

const startTimerButton = within(timerCellsList[1]).getByRole('button');
userEvent.click(startTimerButton);
await waitFor(() => {}, {timeout: 0}); // 测试通过了，没有这行就失败了。
                                       // 我可以设置超时时间为任意数字，包括0。
const activeTimer = await screen.findByRole('cell', {name: /00:00/i});
expect(activeTimer).toBeInTheDocument();

我寫了一個測試，用戶點擊一個按鈕。按鈕發送網路請求，如果返回200，則顯示計時器，開始以秒為單位計數。我使用MSW返回模擬響應。由於網路請求明顯是異步的，我透過等待呼叫screen.findByRole來搜尋這個計時器。我遇到的問題是，只有在呼叫userEvent.click(startTimerButton)和呼叫await screen.findByRole('cell', {name: /00:00/i})之間呼叫await waitFor(() => {})時，測試才能通過。似乎只有在搜尋計時器之前讓它休眠一段時間，這個測試才能通過。我不明白為什麼我不能立即開始搜尋計時器。

沒有waitFor語句，我得到的錯誤訊息是：

錯誤：拋出：「測試逾時超過 5000 毫秒。 如果這是一個長時間運行的測試，請使用 jest.setTimeout(newTimeout) 來增加逾時值。 」 var evt = document.createEvent('事件'); 類型錯誤：無法讀取 null 的屬性「createEvent」

有人知道是什麼原因嗎？我希望不必像現在這樣繞過它。

我還嘗試將我的await findBy更改為在waitFor語句內部包裝的getBy，但也沒有起作用。似乎我只需要讓它休眠一段時間，然後開始搜尋。

Answer 1

你在這一行缺少await：

userEvent.click(startTimerButton);

所以試試看：

await userEvent.click(startTimerButton);

自版本14起，userEvent API是異步的。