javascript - 测试异步使用效果(Testing asynchronous useEffect)

Question

My functional component uses the useEffect hook to fetch data from an API on mount.(我的功能组件使用useEffect挂钩从挂载的API中获取数据。)

I want to be able to test that the fetched data is displayed correctly.(我希望能够测试提取的数据是否正确显示。)

While this works fine in the browser, the tests are failing because the hook is asynchronous the component doesn't update in time.(尽管这在浏览器中可以正常工作，但由于挂钩是异步的，因此组件无法及时更新，因此测试失败。)

Live code: https://codesandbox.io/s/peaceful-knuth-q24ih?fontsize=14(实时代码： https : //codesandbox.io/s/peaceful-knuth-q24ih?fontsize=14)

App.js(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(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());
  });
});

Besides that, Jest throws a warning saying: Warning: An update to App inside a test was not wrapped in act(...).(除此之外，Jest发出警告说： Warning: An update to App inside a test was not wrapped in act(...).)

I guess this is related?(我想这是相关的吗？)

How could this be fixed?(如何解决？)   ask by Andreas Remdt translate from so

Answer 1

Ok, so I think I've figured something out.(好的，所以我想我已经解决了。)

I'm using the latest dependencies right now (enzyme 3.10.0, enzyme-adapter-react-16 1.15.1), and I've found something kind of amazing.(我现在正在使用最新的依赖项（酶3.10.0，酶-适配器-反应16 1.15.1），并且发现了一些令人惊奇的东西。) Enzyme's mount() function appears to return a promise.(酶的mount（）函数似乎返回了诺言。) I haven't seen anything about it in the documentation, but waiting for that promise to resolve appears to solve this problem.(我在文档中没有看到任何有关它的信息，但是等待该承诺解决似乎可以解决此问题。) Using act from react-dom/test-utils is also essential, as it has all the new React magic to make the behavior work.(使用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());
});