使用 React 测试库测试下拉列表

Question

我在测试下拉菜单时遇到问题，该下拉菜单填充了来自 React 测试库中的 API 调用的数据。下面是一个显示问题的 CodeSandbox

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

如果我将 App 更改为使用硬编码数组填充下拉列表（在 App 组件中注释掉），则测试通过。

谢谢

Answer 1

您需要模拟获取事件。我写了一篇关于如何做到这一点的文章。你可以找到它 here.

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。

使用 React 测试库测试下拉列表

Test Drop Down With React Testing Library

reactjs

react-testing-library