如何在React中使用jest.spyOn测试函数并模拟返回值

问题背景 #

我要给自定义函数getBreadcrumbs写测试用例，一开始想加mockData可选参数的方式太繁琐。目标是用Jest的spyOn来模拟函数依赖的两个API调用，已经写了初始测试但不知道具体怎么实现。

原函数代码：

export async function getBreadcrumbs(service, id) {
  const { folderId, label } = await getFileDetailsById(id);
  const { breadcrumbs } = await getFoldersService(service, folderId);
  return [...breadcrumbs, { label, id: '' }];
}

初始测试代码：

import * as crumbs from '.....data'

describe('getCrumbs', () => {
    it('should return breadcrumbs name and id', async () => {
      const data = jest.spyOn(crumbs, 'getBreadcrumbs')
    });
});

函数返回值示例：

[{ displayName: 'Hey', id: '' }]

其中getFileDetailsById和getFoldersService是外部API调用，需要模拟它们的返回值来测试getBreadcrumbs。

解决方案 #

核心思路是mock依赖的API函数，而不是getBreadcrumbs本身。具体步骤如下：

1. 导入包含getFileDetailsById和getFoldersService的模块（假设它们在../services/file-api路径下）
2. 用jest.spyOn分别给这两个API函数指定模拟的返回值
3. 调用getBreadcrumbs并断言返回结果是否符合预期

完整测试代码示例：

import { getBreadcrumbs } from '../path-to-your-function'; // 导入要测试的函数
import * as fileApi from '../services/file-api'; // 导入包含API调用的模块

describe('getBreadcrumbs', () => {
  // 测试后清除所有mock，避免影响其他用例
  afterEach(() => {
    jest.restoreAllMocks();
  });

  it('should return combined breadcrumbs including the file label', async () => {
    // 1. 模拟getFileDetailsById的异步返回值
    const mockFileInfo = { folderId: 'test-folder-id', label: 'Hey' };
    jest.spyOn(fileApi, 'getFileDetailsById').mockResolvedValue(mockFileInfo);

    // 2. 模拟getFoldersService的异步返回值
    const mockFolderCrumbs = [{ displayName: 'Root Folder', id: 'root-id' }];
    jest.spyOn(fileApi, 'getFoldersService').mockResolvedValue({ breadcrumbs: mockFolderCrumbs });

    // 3. 调用要测试的函数
    const result = await getBreadcrumbs('test-service', 'test-file-id');

    // 4. 断言返回结果是否符合预期
    expect(result).toEqual([
      { displayName: 'Root Folder', id: 'root-id' },
      { label: 'Hey', id: '' }
    ]);

    // 可选：验证API函数是否被正确调用
    expect(fileApi.getFileDetailsById).toHaveBeenCalledWith('test-file-id');
    expect(fileApi.getFoldersService).toHaveBeenCalledWith('test-service', 'test-folder-id');
  });
});

关键说明 #

• mockResolvedValue专门用于模拟异步函数的成功返回（因为两个API都是async函数）
• 不需要给getBreadcrumbs添加额外参数，直接mock它依赖的外部函数即可，保持原函数的简洁性
• afterEach里的jest.restoreAllMocks()会清除所有mock，恢复原函数的实现，避免不同测试用例之间的干扰

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