如何在Jest与Enzyme单元测试中触发React的useEffect钩子

核心说明 #

@testing-library/react 的 render 方法会完整执行组件的挂载生命周期，你代码里空依赖数组的useEffect会在组件渲染后自动触发，不需要额外手动调用。测试失败绝大多数是因为没有正确Mock Redux相关依赖，导致执行逻辑中断。

前置准备 #

你需要提前安装以下测试库：

• @testing-library/react
• jest
• react-test-renderer（按需）

完整测试实现步骤 #

1. Mock依赖项 #

首先需要Mock三个核心依赖：react-redux的useDispatch、useSelector，以及你用到的fetchAccount action：

import { render, screen } from '@testing-library/react';
import StackList from './StackList';
import { useDispatch, useSelector } from 'react-redux';
import { fetchAccount } from './store/actions/accountProp';

// Mock redux钩子
jest.mock('react-redux', () => ({
  useDispatch: jest.fn(),
  useSelector: jest.fn()
}));
// Mock 异步action
jest.mock('./store/actions/accountProp', () => ({
  fetchAccount: jest.fn()
}));

2. 编写测试用例 #

用例1：验证useEffect触发后正确调用dispatch

test('组件挂载时触发useEffect，dispatch获取账户信息的action', () => {
  // 构造mock的dispatch函数
  const mockDispatch = jest.fn();
  useDispatch.mockReturnValue(mockDispatch);
  // 给useSelector设置默认返回值，避免渲染报错
  useSelector.mockReturnValue({
    account: '',
    accountDetails: ''
  });

  // 渲染组件，此时会自动触发空依赖的useEffect
  render(<StackList />);

  // 断言：dispatch被调用，且参数正确
  expect(mockDispatch).toHaveBeenCalledTimes(1);
  expect(fetchAccount).toHaveBeenCalledWith(123);
});

用例2：验证Redux返回数据后组件渲染逻辑正确

test('Redux返回账户数据后，组件正确渲染内容', () => {
  const mockDispatch = jest.fn();
  useDispatch.mockReturnValue(mockDispatch);
  // 模拟useSelector返回测试数据
  const testAccount = '测试账户';
  const testDetails = '测试详情';
  useSelector.mockReturnValue({
    account: testAccount,
    accountDetails: testDetails
  });

  render(<StackList />);

  // 断言渲染内容符合预期
  expect(screen.getByText(`${testAccount}-${testDetails}`)).toBeInTheDocument();
});

常见问题说明 #

• 如果你使用Enzyme进行测试，不要使用shallow浅渲染，浅渲染不会触发useEffect，需要改用mount全量渲染
• 如果你的useEffect存在依赖项，需要修改依赖值时，可以用render返回的rerender方法传入新props，或者在组件内模拟state更新，useEffect会自动根据依赖变化触发

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