React Hooks：如何用Enzyme/Jest测试函数组件中componentDidMount时机的函数调用

问题背景 #

原本使用类组件时，可通过以下代码测试componentDidMount中调用自定义函数的逻辑：

it('componentDidMount() calls myCustomFunction()', () => {
  const instance = shallow(<MyComponent />).instance();
  instance.scoobyDoobyFunction = jest.fn();
  instance.componentDidMount();
  expect(instance.scoobyDoobyFunction).toHaveBeenCalled();
});

转为函数组件后，尝试以下测试代码无效：

const instance = mount(<MyComponent />);
await runAllPromises();
await instance.update();
expect(instance.scoobyDoobyFunction).toHaveBeenCalled();

解决方案 #

函数组件没有类组件那样的实例对象，不能直接通过instance()获取并修改内部方法，需要根据函数的定义方式调整测试逻辑：

情况1：scoobyDoobyFunction是外部导入的工具函数 #

如果函数是从外部模块导入的，直接用Jest mock该模块即可：

1. 在测试文件中mock目标模块：

import { scoobyDoobyFunction } from './path-to-your-utils';

// 用jest.mock替换原函数为mock函数
jest.mock('./path-to-your-utils', () => ({
  scoobyDoobyFunction: jest.fn()
}));

2. 编写测试用例：

it('calls scoobyDoobyFunction on component mount', async () => {
  mount(<MyComponent />);
  // 等待useEffect中的异步逻辑执行（如果有的话）
  await Promise.resolve();
  // 更新组件确保状态同步
  instance.update();
  expect(scoobyDoobyFunction).toHaveBeenCalled();
});

情况2：scoobyDoobyFunction是组件内部定义的函数 #

如果函数是组件内部私有函数，需要先重构代码让函数可测试，比如将其导出为模块内部函数：

1. 修改函数组件代码：

import { useEffect } from 'react';

// 导出内部函数供测试使用
export function scoobyDoobyFunction() {
  // ...原逻辑
}

export default function MyComponent() {
  useEffect(() => {
    scoobyDoobyFunction();
  }, []);

  return <div>组件内容</div>;
}

2. 编写测试用例：

import MyComponent, { scoobyDoobyFunction } from './MyComponent';

// spyOn目标函数并替换为mock
const mockFn = jest.spyOn(require('./MyComponent'), 'scoobyDoobyFunction').mockImplementation(jest.fn());

it('calls scoobyDoobyFunction on mount', async () => {
  mount(<MyComponent />);
  await Promise.resolve();
  expect(mockFn).toHaveBeenCalled();
  // 测试后恢复原函数
  mockFn.mockRestore();
});

核心注意点 #

• 函数组件的componentDidMount等价逻辑通常用useEffect(() => {}, [])实现，测试时需确保该钩子执行完毕。
• 函数组件没有可访问的实例，不能直接修改或调用内部方法，必须通过mock导入函数、重构暴露函数的方式实现测试。

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