测试包含useEffect的函数组件时如何避免多余重渲染

错误原因排查 #

你当前的useEffect mock方案失效主要有两个原因：

• mockImplementationOnce仅对第一次useEffect调用生效，如果组件内存在多个useEffect、或者组件触发多次渲染，后续的useEffect会走原生逻辑无法控制
• 直接强制执行useEffect回调跳过了依赖项对比逻辑，原本仅在依赖变化时才执行的逻辑会在每次渲染时都触发，反而更容易触发状态更新导致无限重渲染

具体修复方案 #

1. 优先排查组件本身的业务逻辑 #

先确认组件本身不存在线上可复现的无限重渲染问题，常见问题场景：useEffect回调中直接修改了自身的依赖项，示例如下：

// 错误示例：依赖包含count，回调每次执行都会修改count，触发无限循环
useEffect(() => {
  setCount(count + 1)
}, [count])

如果是业务逻辑问题，优先修复组件代码即可解决测试报错。

2. 正确模拟useEffect的原生行为 #

替换mockImplementationOnce为全局mockImplementation，模拟原生useEffect的依赖项判断逻辑，测试结束后恢复原生实现避免影响其他用例：

describe("<Component />", () => {
  let useEffectSpy
  beforeEach(() => {
    jest.clearAllMocks();
    useEffectSpy = jest.spyOn(React, "useEffect").mockImplementation((fn, deps) => {
      // 可根据测试需求自定义触发逻辑，以下为模拟空依赖仅执行一次的行为
      if (!deps || deps.length === 0) {
        fn()
      }
    });
  });

  afterEach(() => {
    useEffectSpy.mockRestore()
  })

  // 你的测试用例
  test("组件正常渲染无报错", () => {
    renderWithReactIntl(<Component {...mockData} />);
    // 断言逻辑
  })
});

3. 固定mockData的引用避免依赖项反复变化 #

绝大多数测试场景下的无限重渲染是因为传入的mockData每次渲染都是新的引用（比如对象、数组字面量每次声明都会生成新引用），导致useEffect的依赖项每次都判定为变化，反复执行回调触发状态更新。
可以把mockData提到测试块外层，或者冻结对象固定引用：

// 声明在describe外层，全程使用同一个引用
const mockData = Object.freeze({
  list: Object.freeze([]),
  config: Object.freeze({ type: "test" })
})

4. Mock异步逻辑避免多次状态更新 #

如果useEffect中包含异步请求、定时器等逻辑，直接mock对应的异步方法，避免回调触发多次状态更新：

import * as api from "@/api"
jest.spyOn(api, "fetchList").mockResolvedValue({ data: [] })

test("异步逻辑执行正常", async () => {
  renderWithReactIntl(<Component {...mockData} />);
  await waitFor(() => expect(api.fetchList).toHaveBeenCalled())
})

内容的提问来源于stack exchange，提问作者springathing