如何使用Jest在测试中模拟模块Import？

嘿，针对你测试fetchData时需要模拟browser模块返回值的需求，我给你整理了几种实用的方案，直接就能套用到你的代码里：

方案一：完全模拟整个browser模块 #

这种方法会直接替换掉整个browser模块的导出内容，适合你只关心getBrowser函数返回值的场景：

// 你的测试文件
import { fetchData } from './../fetch-data.js';

// 调用jest.mock，替换browser模块的导出
jest.mock('./../components/browser', () => ({
  // 定义模拟的getBrowser函数，返回你想要的测试数据
  getBrowser: jest.fn(() => ({ id: 'chrome' }))
}));

test('fetchData应该返回合并后的正确对象', () => {
  const result = fetchData();
  // 验证结果是否符合预期
  expect(result).toEqual({ dontcare: 1, id: 'chrome' });
});

说明：jest.mock会自动提升到文件顶部执行，确保在导入fetchData之前就完成模块模拟，避免原模块被加载。

方案二：仅模拟getBrowser函数（保留模块其他导出） #

如果你不想完全替换整个browser模块，只是想临时修改getBrowser的行为，可以用jest.spyOn来实现，同时保证测试的隔离性：

// 你的测试文件
import { fetchData } from './../fetch-data.js';
import * as browserModule from './../components/browser';

test('fetchData应该返回合并后的正确对象', () => {
  // 监听browser模块中的getBrowser方法，替换它的实现
  const mockGetBrowser = jest.spyOn(browserModule, 'getBrowser')
    .mockImplementation(() => ({ id: 'firefox' }));

  const result = fetchData();
  expect(result).toEqual({ dontcare: 1, id: 'firefox' });

  // 测试结束后恢复原函数，避免影响其他测试用例
  mockGetBrowser.mockRestore();
});

这种方法的好处是不会影响browser模块的其他导出内容，适合模块有多个导出且你只需要修改其中一个的场景。

方案三：直接修改导出的browser对象（适合简单场景） #

因为你在browser.js中直接导出了browser对象（引用类型），也可以直接修改它的属性来达到测试目的：

// 你的测试文件
import { fetchData } from './../fetch-data.js';
import { browser } from './../components/browser';

test('fetchData应该返回合并后的正确对象', () => {
  // 直接修改browser对象的id属性
  browser.id = 'safari';
  const result = fetchData();
  expect(result).toEqual({ dontcare: 1, id: 'safari' });

  // 测试完成后重置属性，避免污染其他测试用例
  browser.id = undefined;
});

注意：这种方法只适合直接导出的对象，因为对象是引用类型，修改后会影响其他测试，所以一定要记得在测试结束后重置属性。

内容的提问来源于stack exchange，提问作者Tzook Bar Noy