javascript - 测试异步useEffect

Question

我的功能组件使用 useEffect Hook 在挂载时从 API 获取数据。我希望能够测试获取的数据是否正确显示。

虽然这在浏览器中运行良好，但测试失败，因为 Hook 是异步的，组件未及时更新。

实时代码: https://codesandbox.io/s/peaceful-knuth-q24ih?fontsize=14

App.js

import React from "react";

function getData() {
  return new Promise(resolve => {
    setTimeout(() => resolve(4), 400);
  });
}

function App() {
  const [members, setMembers] = React.useState(0);

  React.useEffect(() => {
    async function fetch() {
      const response = await getData();

      setMembers(response);
    }

    fetch();
  }, []);

  return <div>{members} members</div>;
}

export default App;

App.test.js

import App from "./App";
import React from "react";
import { mount } from "enzyme";

describe("app", () => {
  it("should render", () => {
    const wrapper = mount(<App />);

    console.log(wrapper.debug());
  });
});

除此之外，Jest 会发出警告:警告:测试中对 App 的更新未包含在 act(...) 中。

我猜这是相关的？如何解决？

Answer 1

好的，所以我想我已经想通了。我现在正在使用最新的依赖项(enzyme 3.10.0、enzyme-adapter-react-16 1.15.1)，我发现了一些令人惊奇的东西。 Enzyme 的 mount() 函数似乎返回一个 promise 。我在文档中没有看到任何关于它的信息，但等待解决 promise 似乎可以解决这个问题。使用来自 react-dom/test-utils 的 act 也是必不可少的，因为它拥有所有新的 React 魔力来使行为起作用。

it('handles async useEffect', async () => {
    const component = mount(<MyComponent />);
    await act(async () => {
        await Promise.resolve(component);
        await new Promise(resolve => setImmediate(resolve));
        component.update();
    });
    console.log(component.debug());
});