1

使用我测试异步反应挂钩时，@testing-library/react-hooks我看到一条错误消息。错误消息提到包装代码，act(...)但我不确定我应该在哪里执行此操作。

我试图将部分代码包装进去，act(...)但每次尝试都会导致测试失败。

// day.js 
import { useState, useEffect } from 'react';
import { getDay } from '../api/day';

export function useDay() {
  const [state, set] = useState({ loading: false });

  useEffect(() => {
    let canSet = true;

    set({ loading: true });
    const setDay = async () => {
      const day = await getDay();
      if (canSet) {
        set(day);
      }
    };

    setDay();

    return () => (canSet = false);
  }, []);

  return state;
}

// day.test.js
import { renderHook, act } from "@testing-library/react-hooks";
import { useDay } from "./day";

jest.mock("../api/day", () => ({
  getDay: jest.fn().mockReturnValue({ some: "value" })
}));

describe.only("model/day", () => {
  it("returns data", async () => {
    const { result, waitForNextUpdate } = renderHook(() => useDay());
    await waitForNextUpdate();
    expect(result.current).toEqual({ some: "value" });
  });
});

// test output
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:102
      Warning: An update to TestHook inside a test was not wrapped in act(...).

      When testing, code that causes React state updates should be wrapped into act(...):

      act(() => {
        /* fire events that update state */
      });
      /* assert on the output */
4

1 回答 1

3

这是一个已知问题： https ://github.com/testing-library/react-testing-library/issues/281

之前16.9.0-alpha.0React 本身并没有很好地处理异步的东西，所以这与测试库无关，真的。如果您对此感兴趣，请阅读该问题的评论。

你现在有两个选择：

  1. 将你的 React (& react-dom) 更新为16.9.0-alpha.0
  2. console.log添加一个片段（例如在您的测试设置文件中）以在尝试打印时抑制该警告：
// FIXME Remove when we upgrade to React >= 16.9
const originalConsoleError = console.error;
console.error = (...args) => {
  if (/Warning.*not wrapped in act/.test(args[0])) {
    return;
  }
  originalConsoleError(...args);
};
于 2019-07-21T11:30:40.007 回答