开发者问题收集

测试异步 useEffect

2019-07-12
24266
javascript reactjs jestjs enzyme

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

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

实时代码： 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(...) 中。

我猜这是相关？如何修复此问题？

3个回答

好的，我想我已经弄清楚了。我现在正在使用最新的依赖项（enzyme 3.10.0、enzyme-adapter-react-16 1.15.1），并且我发现了一些令人惊奇的东西。Enzyme 的 mount() 函数似乎返回了一个承诺。我在文档中没有看到任何关于它的内容，但等待该承诺解决似乎可以解决这个问题。使用 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());
});
craigmiller160
2019-11-02

我遇到了这个问题，然后偶然发现了这个帖子。我正在对一个钩子进行单元测试，但如果您的异步 useEffect 代码位于组件中，则原理应该相同。因为我正在测试一个钩子，所以我从 react hooks 测试库 调用 renderHook 。如果您正在测试常规组件，则可以从 react-dom 调用 render ，如 文档 所述。

问题

假设您有一个在挂载时执行一些异步工作的 React 钩子或组件，并且您想要对其进行测试。它可能看起来有点像这样： 

const useMyExampleHook = id => {
    const [someState, setSomeState] = useState({});
    useEffect(() => {
        const asyncOperation = async () => {
            const result = await axios({
                url: `https://myapi.com/${id}`,
                method: "GET"
            });
            setSomeState(() => result.data);
        }

        asyncOperation();

    }, [id])
    return { someState }
}

到目前为止，我一直在对这些钩子进行单元测试，如下所示： 

it("should call an api", async () => {
        const data = {wibble: "wobble"};
        axios.mockImplementationOnce(() => Promise.resolve({ data}));

        const { result } = renderHook(() => useMyExampleHook());
        await new Promise(setImmediate);

        expect(result.current.someState).toMatchObject(data);
});

并使用 await new Promise(setImmediate); 来“刷新”承诺。这对于像我上面的简单测试来说没问题，但当我们开始在一个测试中对钩子/组件进行多次更新时，似乎会在测试渲染器中引起某种竞争条件。

答案

答案是正确使用 act() 。 文档 中写道

When writing [unit tests]... react-dom/test-utils provides a helper called act() that makes sure all updates related to these “units” have been processed and applied to the DOM before you make any assertions.

因此，我们的简单测试代码实际上应该是这样的： 


    it("should call an api on render and store the result", async () => {
        const data = { wibble: "wobble" };
        axios.mockImplementationOnce(() => Promise.resolve({ data }));

        let renderResult = {};
        await act(async () => {
            renderResult = renderHook(() => useMyExampleHook());
        })

        expect(renderResult.result.current.someState).toMatchObject(data);
    });

关键的区别在于，异步操作围绕着钩子的初始渲染。这确保了 useEffect 钩子在我们开始尝试检查状态之前已经完成了它的工作。如果我们需要更新钩子，那么该操作也会被包装在其自己的 act 块中。

更复杂的测试用例可能看起来像这样： 


    it('should do a new call when id changes', async () => {
        const data1 = { wibble: "wobble" };
        const data2 = { wibble: "warble" };

        axios.mockImplementationOnce(() => Promise.resolve({ data: data1 }))
        .mockImplementationOnce(() => Promise.resolve({ data: data2 }));


        let renderResult = {};
        await act(async () => {
            renderResult = renderHook((id) => useMyExampleHook(id), {
                initialProps: { id: "id1" }
            });
        })

        expect(renderResult.result.current.someState).toMatchObject(data1);

        await act(async () => {
            renderResult.rerender({ id: "id2" })
        })

        expect(renderResult.result.current.someState).toMatchObject(data2);
    })
Tom Clelford
2021-03-15

根据@user2223059的回答，您还可以执行以下操作： 

// eslint-disable-next-line require-await     
component = await mount(<MyComponent />);
component.update();

不幸的是，您需要 eslint-disable-next-line，否则它会警告不必要的等待……而删除等待会导致不正确的行为。

Wolfshead
2019-11-28