TypeScript中Jest运行正常但IDE提示showAlert赋值错误

你遇到的这个问题很典型——ES模块的导出是只读绑定，所以直接给导入的showAlert赋值jest.fn()会被TypeScript和IDE（VSCode/WebStorm）判定为非法操作，尽管Jest在运行时能通过模块劫持让测试正常跑，但静态检查这关过不了。下面给你两种靠谱的解决办法：

方法1：用jest.mock整体Mock模块 #

这种方式适合需要替换模块中特定导出的场景，同时可以保留其他导出的原始实现：

import { showAlert } from './utils';
import { checkEmail } from './your-checkEmail-file';

// Mock整个utils模块，只替换showAlert为mock函数
jest.mock('./utils', () => ({
  // 保留其他导出的原始功能，避免影响其他测试
  ...jest.requireActual('./utils'),
  showAlert: jest.fn(),
}));

test('当邮箱格式无效时，checkEmail会调用showAlert', () => {
  // 执行测试逻辑
  checkEmail('invalid-email');
  
  // 验证mock函数被正确调用
  expect(showAlert).toHaveBeenCalledWith('Invalid email format');
});

方法2：用jest.spyOn临时替换函数实现 #

如果你只需要在单个测试用例中mockshowAlert，测试结束后还要恢复原始实现，jest.spyOn会更灵活：

import * as utils from './utils';
import { checkEmail } from './your-checkEmail-file';

test('当邮箱格式无效时，checkEmail会调用showAlert', () => {
  // 创建spy并替换showAlert的实现
  const showAlertSpy = jest.spyOn(utils, 'showAlert').mockImplementation(() => {});
  
  // 执行测试逻辑
  checkEmail('invalid-email');
  
  // 验证spy被正确调用
  expect(showAlertSpy).toHaveBeenCalledWith('Invalid email format');
  
  // 测试结束后恢复原始函数，避免影响其他测试
  showAlertSpy.mockRestore();
});

为什么直接赋值不行？ #

ES模块规范里，从模块导入的变量是只读引用，TypeScript和IDE会严格遵循这个规范进行静态检查。Jest运行时能绕过这个限制是因为它用了模块劫持，但静态分析工具不买账，所以会抛出Cannot assign to 'showAlert' because it is not a variable的错误。

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