使用 React 测试库进行测试下拉答案

【问题标题】：Test Drop Down With React Testing Library使用 React 测试库进行测试下拉
【发布时间】：2019-12-31 18:08:15
【问题描述】：

我在测试包含来自 React 测试库中 API 调用的数据的下拉列表时遇到问题。下面是一个显示问题的 CodeSandbox

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

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

谢谢

【问题讨论】：

标签： reactjs react-testing-library

【解决方案1】：

当您的数据来自异步 fetch 调用时，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 上通过。

【讨论】：

我已经尝试更新测试以使用wait，但我仍然遇到同样的测试失败

【解决方案2】：

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

【讨论】：

在我的真实测试代码中我使用jest.mock，但我似乎无法在codestandbox中做到这一点，所以我只是在TestService中使用了手动Promise.resolve。如果我使用jest.mock，它的行为方式相同。
好的，但是在您的测试中，您没有使用任何异步方法来等待承诺完成
我已将async 添加到测试中。