如何为调用React.useEffect的函数编写单元测试（附代码示例）

现有代码问题 #

• 直接调用函数组件而非通过React渲染流程执行，useEffect钩子不会被触发，无法验证滚动逻辑
• 断言没有填写预期值，不符合测试语法要求
• 没有对window.scrollTo做mock，既无法验证调用情况，也可能产生副作用

前置准备 #

确保安装@testing-library/react、jest相关依赖，这是React组件单元测试的通用工具栈。

完整测试代码 #

import React from "react";
import { render, screen } from "@testing-library/react";
import { ScrollToTop } from "./Scroll";

// 提前mock全局scrollTo方法，避免真实调用产生副作用
beforeAll(() => {
  window.scrollTo = jest.fn();
});

// 每次测试后重置mock调用记录，避免用例互相干扰
afterEach(() => {
  jest.clearAllMocks();
});

describe("ScrollToTop", () => {
  it("初始渲染时会滚动到页面顶部", () => {
    render(
      <ScrollToTop location={{ pathname: "/test" }}>
        <div>测试子内容</div>
      </ScrollToTop>
    );
    // 验证子元素正常渲染
    expect(screen.getByText("测试子内容")).toBeInTheDocument();
    // 验证scrollTo被正确调用
    expect(window.scrollTo).toHaveBeenCalledTimes(1);
    expect(window.scrollTo).toHaveBeenCalledWith(0, 0);
  });

  it("location.pathname变更时会重新触发滚动到顶部", () => {
    const { rerender } = render(
      <ScrollToTop location={{ pathname: "/path1" }}>
        <div>测试子内容</div>
      </ScrollToTop>
    );
    expect(window.scrollTo).toHaveBeenCalledTimes(1);
    
    // 传入新pathname重新渲染组件
    rerender(
      <ScrollToTop location={{ pathname: "/path2" }}>
        <div>测试子内容</div>
      </ScrollToTop>
    );
    // 验证依赖变化后scrollTo被再次调用
    expect(window.scrollTo).toHaveBeenCalledTimes(2);
    expect(window.scrollTo).toHaveBeenLastCalledWith(0, 0);
  });
});

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