如何使用两个 useEffect 语句测试钩子？

Question

我有以下钩子：

const useBar = () => {
  const [myFoo, setFoo] = useState(0);
  const [myBar, setBar] = useState(0);
  useEffect(() => {
    setFoo(myFoo + 1);
    console.log("setting foo (1)", myFoo, myBar);
  }, [setFoo, myFoo, myBar]);
  useEffect(() => {
    setBar(myBar + 1);
    console.log("setting bar (2)", myFoo, myBar);
  }, [setBar, myBar, myFoo]);
};

使用组件时，我有无限循环的预期行为：

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const Bar = () => {
  useBar();
  return <div>Bar</div>;
};

function App() {
  return (
    <Bar />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

从 console.log ：

setting foo (1) 1 1
setting bar (2) 1 1
setting foo (1) 2 2
setting bar (2) 2 2
setting foo (1) 3 3
setting bar (2) 3 3
...

但是测试这个@testing-library/react-hooks只给出第一个循环输出：

describe("Tests", () => {
  test("useBar", async () => {
    const { rerender } = renderHook(() => {
      return useBar();
    });

    // await waitForNextUpdate();
    // tried the above doesn't work

    // rerender(); 
    // with rerender it loops through the next "cycle"
  });

});

想知道如何正确测试钩子，而不调用rerender和模仿与 React 相同的行为 - 在状态更改时重新渲染组件。

Answer 1

我猜你想测试一个在无限循环发生时hook使用useEffect并报告错误的方法。但实际上我们无法测试无限循环，我们只能设置次数限制。当循环超过这个限制时，我们认为它会无限循环下去。至于是否真的是无限循环，就不好证明了。

但是，要测试 的重复并不容易useEffect。虽然使用waitForNextUpdate会得到超时错误，但是这个错误也可能是长时间的异步操作导致的，作为单元测试，你需要快速的反馈。你不能每次都等待超时。这是浪费时间。

感谢这个问题，我找到了方向。提供一种从测试中触发 useEffect 的方法

当我替换useEffect为 时useLayoutEffect，我可以Maximum update depth exceeded快速准确地得到错误。这仅需要更换useEffect同useLayoutEffect在所需的测试。当循环无限时，测试将失败。

import React from 'react'
import { renderHook } from '@testing-library/react-hooks'

import useBar from './useBar'

describe('Replace `useEffect` with `useLayoutEffect` to check for an infinite loop', () => {
  let useEffect = React.useEffect
  beforeAll(() => {
    React.useEffect = React.useLayoutEffect
  })
  afterAll(() => {
    React.useEffect = useEffect
  })
  it('useBar', async () => {
    const { result } = renderHook(() => useBar())
  })
})