Karma+Jasmine单元测试中jasmine全局变量未定义如何解决

问题场景 #

• 目标：Mock Angular Router，在测试代码中使用Jasmine Spy能力
• 环境版本：Karma v6.3.20、Jasmine 3.8
• 异常表现：
  • 直接调用jasmine.createSpy(...)、jasmine.createSpyObj(...)时，提示jasmine未定义
  • 手动执行npm install --save-dev jasmine后，通过import jasmine from 'jasmine'方式引入，报错：Module jasmine can only be default-imported using the ‘allowSyntheticDefaultImports’ flag
• 目标实现代码：

const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
const heroServiceSpy = jasmine.createSpyObj('HeroService', ['getHeroes']);

TestBed
    .configureTestingModule({
      providers: [
        {provide: HeroService, useValue: heroServiceSpy}, 
        {provide: Router, useValue: routerSpy}
      ]
    })

修复步骤 #

1. 补全测试环境TS类型配置 #

Angular 默认集成的Karma+Jasmine测试套件已经内置了jasmine依赖，不需要单独安装，TS层面的未定义报错是因为测试环境的TS配置没有引入jasmine类型声明：

• 打开项目根目录下的tsconfig.spec.json（测试场景专属TS配置文件）
• 在compilerOptions.types数组中添加jasmine条目，参考配置：

{
  "compilerOptions": {
    "types": [
      "jasmine",
      "node"
    ]
  }
}

禁止在测试代码中手动import jasmine模块。Karma启动测试时会自动将jasmine挂载到全局作用域，手动导入会和全局注入的实例冲突，触发模块导入类报错。

2. 检查Karma框架加载配置 #

打开项目根目录的karma.conf.js，确认frameworks配置中jasmine为首个加载项：

module.exports = function (config) {
  config.set({
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    // 其余配置保持默认即可
  })
}

如果框架顺序错误，Karma启动时不会提前将jasmine全局对象注入测试运行环境，会触发运行时的未定义错误。

3. 缓存清理（配置后仍报错时执行） #

删除依赖缓存和锁文件后重新安装依赖即可：

rm -rf node_modules package-lock.json
npm install

配置完成后，即可直接在测试代码中全局调用jasmine相关API，无需额外导入，和标准测试示例写法完全一致。

内容的提问来源于stack exchange，提问作者Robert Green MBA