如何在 React 中创建安全调度 function

Question

我正在尝试解决 React 测试中的常见警告消息

console.error
      Warning: An update to EntryList 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 */

我创建了一个可以传递给反应调度程序的钩子 function

export const useSafeDispatches = (...dispatches) => {
    const mounted = useRef(false);
    useLayoutEffect(() => {
        mounted.current = true;
        return () => (mounted.current = false);
    }, []);

    const safeDispatch = useCallback(
        (dispatch) =>
            (...args) =>
                mounted.current ? dispatch(...args) : void 0,
        // eslint-disable-next-line
        [mounted.current]
    );

    return dispatches.map(safeDispatch);
};

而且，我正在这样使用它

function MyComponent() {
   const [counter, d]  = useState(0);
   const [setCounter] = useSafeDispatches(d);
   
   return <button onClick={() => setCounter(counter + 1)}>{counter}<button>

}

然而，我在测试中遇到了同样的错误（在卸载组件后我尝试调用 setState）

Answer 1

您收到此警告是因为在测试完成后对组件的 state 进行了更新。

搜索 state 的异步更新，然后在您的测试中包含针对它的断言。

这个警告是 React 告诉你测试完成后你的组件发生了一些事情的方式，你没有完全测试这个组件，你可能错过了测试。

Answer 2

如果您只需要正确完成它，我建议您使用具有适当功能的现有钩子库。 例如，该库完全符合您的要求

import { useSafeState } from '@react-hookz/web';

function MyComponent() {
   const [counter, setCounter]  = useSafeState(0);
   
   return <button onClick={() => setCounter((prev) => prev + 1)}>{counter}<button>

}

Answer 3

该警告不是由于未安装的组件引起的。 这是由于在上次 state 更新之前完成的测试。 因此，正如另一条评论所说，使用专为此而设计的act 。

使用测试库中的waitFor ，它在幕后使用 act：

// this test is using testing-library waitFor
test('does something', async() => {
  const { getByRole } = render(<MyCustomButton />);
  await waitFor(() => fireEvent.click(getByRole('button')));
  
  expect(someCallback).toBeCalled(); // or some value to be increased
});