SPFx Web部件Jest单元测试遇Cannot find module异常求助

方法1：配置Jest模块映射 #

在项目根目录创建或修改jest.config.js，添加模块映射规则，让Jest能正确解析SPFx核心库的路径：

module.exports = {
  // 保留原有配置，新增以下内容
  moduleNameMapper: {
    '@microsoft/sp-http': '<rootDir>/node_modules/@microsoft/sp-http/lib-commonjs/',
    '@microsoft/sp-core-library': '<rootDir>/node_modules/@microsoft/sp-core-library/lib-commonjs/'
    // 若用到其他SPFx模块，如@microsoft/sp-client-base，可按同样格式添加
  },
  testMatch: [
    '<rootDir>/src/**/*.test.tsx',
    '<rootDir>/src/**/*.test.ts'
  ]
};

方法2：Mock SPFx核心服务 #

如果测试不需要真实调用SPFx的HTTP客户端，直接mock整个@microsoft/sp-http模块，绕开路径解析问题：
在测试文件顶部添加：

jest.mock('@microsoft/sp-http', () => ({
  HttpClient: {
    configurations: { v1: {} },
    get: jest.fn().mockResolvedValue({ json: jest.fn().mockResolvedValue({}) })
  }
  // 按需mock你用到的其他类或方法
}));

也可以在项目根目录创建__mocks__/@microsoft/sp-http.ts文件，写入上述mock代码，Jest会自动加载这个mock。

方法3：调整TS-Jest路径配置 #

确保ts-jest能识别SPFx模块路径，在jest.config.js中补充：

module.exports = {
  preset: 'ts-jest',
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest'
  },
  modulePaths: [
    '<rootDir>/node_modules/@microsoft/'
  ]
  // 其他已有配置
};

方法4：统一SPFx依赖版本 #

你的@microsoft/sp-build-web等核心依赖是1.12.1版本，检查所有@microsoft/sp-*系列依赖的版本是否一致，版本不兼容也可能导致路径解析错误。

额外排查动作 #

• 删除node_modules和package-lock.json，执行npm install重新安装依赖，清理缓存。
• 确认sp-services.ts中导入@microsoft/sp-http的方式正确，应该是import { HttpClient } from '@microsoft/sp-http';，不要用相对路径引用内部文件。

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