使用 React 測試庫進行測試下拉

Question

我在測試包含來自 React 測試庫中 API 調用的數據的下拉列表時遇到問題。 下面是一個顯示問題的 CodeSandbox

https://codesandbox.io/s/mutable-sea-wtt9u

如果我將App更改為使用硬編碼數組來填充下拉列表（在App組件中注釋掉），則測試通過。

謝謝

Answer 1

您需要模擬您的 fetch 事件。 我寫了一篇關於如何做到這一點的文章。 你可以在 這里找到它。

Answer 2

當您的數據來自異步獲取調用時，DOM 不會同步更新，您必須使用異步實用程序之一來等待更新。 這適用於您的情況（在您的 Codesandbox 中測試）：

  // import `wait` directly from React Testing Library
  import { render, wait } from '@testing-library/react';

  ...

  await wait(() => {
    fireEvent.change(selectElement, { target: { value: "1" } });
    expect(selectElement.value).toBe("1");
  });

這是有關異步實用程序的 React 測試庫文檔： https : //testing-library.com/docs/dom-testing-library/api-async

編輯：看起來您可能已經更改了 CodeSandbox 代碼。 現在您需要等待異步調用在觸發事件之前進行，因為您正在獲取掛載數據。 我已經更新了我的答案並確保測試通過您當前的 CodeSandbox。