如何测试useEffect内调用的函数？代码覆盖率未达标求助

问题分析 #

你的测试代码存在时序问题：在渲染组件之前就触发了resize事件，此时组件的useEffect还未执行，updateMedia函数的监听还没绑定到window上，自然不会被调用，也就无法覆盖到这个函数。同时组件挂载时没有初始执行updateMedia，导致初始状态isDesktop一直是false，即使视口宽度符合条件，也不会渲染对应内容。

解决方案 #

方案1：调整测试时序，先渲染组件再触发事件 #

先渲染组件，确保useEffect完成监听绑定后，再修改视口宽度并触发resize事件：

import IndividualContact from "./IndividualContact";
import { render, screen, waitFor } from "@testing-library/react";

describe("Given a IndividualContact component", () => {
  describe("When it is instantiated with a contact and in a viewport bigger than 800px", () => {
    const contact = {
      name: "Dan",
      surname: "Abramov",
      email: "dan@test.com",
      phoneNumber: "888555222",
      owner: "owner",
    };

    test("Then it should render the 'email' and the 'phoneNumber' of the contact", async () => {
      // 先渲染组件，确保监听已绑定
      render(<IndividualContact contact={contact} />);
      
      // 修改视口宽度并触发resize事件
      global.innerWidth = 1000;
      global.dispatchEvent(new Event("resize"));

      await waitFor(() => {
        expect(screen.getByText("dan@test.com")).toBeInTheDocument();
        expect(screen.getByText("888555222")).toBeInTheDocument();
      });
    });
  });
});

方案2：组件挂载时初始执行updateMedia #

在useEffect中添加初始调用，让组件挂载时就根据当前视口宽度设置isDesktop，既符合实际使用场景，也能让测试更自然：

// 组件内的useEffect修改如下
useEffect(() => {
  // 初始执行一次，设置正确的初始状态
  updateMedia();
  window.addEventListener("resize", updateMedia);
  return () => window.removeEventListener("resize", updateMedia);
}, []); // 添加空依赖数组，避免重复绑定监听

此时测试可以简化，无需手动触发resize事件：

test("Then it should render the 'email' and the 'phoneNumber' of the contact", async () => {
  global.innerWidth = 1000;
  render(<IndividualContact contact={contact} />);
  
  await waitFor(() => {
    expect(screen.getByText("dan@test.com")).toBeInTheDocument();
  });
});

方案3：用jest监听updateMedia函数（验证覆盖） #

如果需要明确验证updateMedia被调用，可以用jest.spyOn监听监听事件的绑定，间接验证函数被关联：

test("Then updateMedia should be triggered on resize", async () => {
  const addEventListenerSpy = jest.spyOn(window, 'addEventListener');
  render(<IndividualContact contact={contact} />);
  
  // 验证resize监听已绑定到updateMedia
  expect(addEventListenerSpy).toHaveBeenCalledWith('resize', expect.any(Function));
  
  // 修改视口并触发事件
  global.innerWidth = 1000;
  global.dispatchEvent(new Event("resize"));
  
  // 验证函数逻辑生效
  await waitFor(() => {
    expect(screen.getByText("dan@test.com")).toBeInTheDocument();
  });
  
  // 清理模拟
  addEventListenerSpy.mockRestore();
});

额外注意事项 #

• 原组件的useEffect没有依赖数组，会导致每次组件渲染都重复绑定/解绑监听，建议添加空依赖数组[]，确保只在挂载/卸载时执行一次。
• 测试后记得用jest.restoreAllMocks()清理模拟，避免影响其他测试用例。

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