Question

我在测试使用React Testing库中来自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 Testing库文档：https://testing-library.com/docs/dom-testing-library/api-async

编辑：看来您可能已经更改了CodeSandbox代码。现在您需要等待进行异步调用，然后再触发事件，因为您要在装载时获取数据。我已经更新了答案，并确保测试能够通过您当前的CodeSandbox。

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

2 个答案: