如何使用Jest mock导出为对象的config.js？尝试后未生效

我需要mock导出为默认对象的config.js文件，而非常规mock函数。原文件代码如下：

// config.js
export default { foo: 'bar' }

我尝试了以下两种方式，均未成功mock，仍获取原配置文件内容：

方式一：

import config from './config';
jest.mock('./config');
config.mockReturnValue({ foo: 'zed' })

方式二：

import config from './config';
jest.mock('./config');
config.mockImplentation(() => ({ foo: 'zed' }));

请问我哪里操作错误？

问题分析与解决方案 #

嘿，我来帮你捋清楚问题出在哪～

你踩的坑其实很典型：jest.mock('./config') 默认会把ES模块的导出替换成一个mock结构，但你的原文件导出的是一个普通对象，不是函数，而mockReturnValue、mockImplementation这些方法是专门给mock函数用的，你拿到的config是个mock对象（不是函数），自然调用这些方法无效，mock也就没生效。

下面给你两种靠谱的解决办法，按需选用：

方法一：直接在jest.mock中指定mock的默认对象

这是最直接的方式，适合不需要动态修改mock值的场景：

import config from './config';

// 直接mock ES模块的默认导出
jest.mock('./config', () => ({
  __esModule: true, // 必须添加！告诉Jest这是ES模块的导出结构
  default: { foo: 'zed' }
}));

test('验证config被成功mock', () => {
  expect(config).toEqual({ foo: 'zed' });
});

这里的__esModule: true是关键标记，Jest靠它来识别ES模块的导出规则，不加的话可能会拿到undefined或者不符合预期的结果。

方法二：动态修改mock值（适合多测试用例不同配置）

如果需要在不同测试用例里切换config的内容，可以把默认导出mock成一个函数，再通过mock函数的方法动态修改返回值：

// 先把config模块的默认导出mock成一个jest函数
jest.mock('./config', () => ({
  __esModule: true,
  default: jest.fn()
}));

import config from './config';
// 用jest.mocked把config类型转为mock函数，方便调用mock方法
const mockConfig = jest.mocked(config);

test('测试用例1：使用zed配置', () => {
  mockConfig.mockReturnValue({ foo: 'zed' });
  expect(config()).toEqual({ foo: 'zed' });
});

test('测试用例2：使用baz配置', () => {
  mockConfig.mockReturnValue({ foo: 'baz' });
  expect(config()).toEqual({ foo: 'baz' });
});

这种方式需要注意，调用config时要加()，因为我们把它mock成了函数。如果想完全保留原对象的调用方式（不用加()），也可以通过jest.spyOn结合Object.defineProperty来修改，但步骤会繁琐一些，一般第一种方法就够用了。

你之前操作的错误点总结 #

1. 误解了jest.mock的行为：它不会把导出的普通对象自动转为mock函数，只是替换模块导出的结构
2. 错误地在普通对象上调用了mock函数专属的mockReturnValue/mockImplementation方法，这些方法只对jest mock函数生效

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