Angular 2单元测试中如何导入或注入自定义AngularJS服务

嘿，我之前处理过AngularJS和Angular混合项目的测试问题，针对你遇到的「Angular2组件单元测试无法导入/注入AngularJS自定义服务」的问题，给你几个实用的解决方案：

方案1：用Upgrade模块在测试中初始化AngularJS环境 #

如果你的组件是直接通过Angular的Upgrade模块引入的AngularJS服务，那在单元测试里需要先配置并启动Upgrade模块，让测试环境能识别AngularJS服务：

• 首先导入Upgrade相关模块：

import { UpgradeModule } from '@angular/upgrade/static';

• 在TestBed配置中添加UpgradeModule，并在测试前初始化你的AngularJS模块：

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [UpgradeModule],
    declarations: [YourTargetComponent],
    // 这里可以添加组件依赖的其他Angular服务
  }).compileComponents();
}));

beforeEach(() => {
  // 获取Upgrade模块实例，启动AngularJS模块
  const upgrade = TestBed.inject(UpgradeModule);
  upgrade.bootstrap(document.body, ['yourAngularJSModuleName']);
});

这样配置后，测试环境就能正确解析组件中注入的AngularJS服务了。

方案2：为AngularJS服务创建Angular兼容的包装器 #

如果不想在测试里引入整个AngularJS环境，推荐给原AngularJS服务写一个Angular风格的包装层，测试时只需要mock这个包装器即可：

• 先创建一个Angular服务作为包装器，内部通过Upgrade模块获取原AngularJS服务：

import { Injectable } from '@angular/core';
import { Injector } from '@angular/upgrade/static';

@Injectable({ providedIn: 'root' })
export class NgJSServiceWrapper {
  private originalService: any;

  constructor(private injector: Injector) {
    // 替换成你的AngularJS服务名称
    this.originalService = injector.get('yourAngularJSServiceName');
  }

  // 包装原服务的方法，暴露给Angular组件调用
  executeOriginalMethod() {
    return this.originalService.executeOriginalMethod();
  }
}

• 在你的Angular2组件中注入这个NgJSServiceWrapper，替代直接注入AngularJS服务。
• 单元测试时，轻松mock这个包装器：

// 创建mock对象，模拟包装器的方法
const mockWrapper = jasmine.createSpyObj('NgJSServiceWrapper', ['executeOriginalMethod']);

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [YourTargetComponent],
    providers: [
      { provide: NgJSServiceWrapper, useValue: mockWrapper }
    ]
  }).compileComponents();
}));

这种方式能让测试完全隔离AngularJS环境，更简洁易维护。

方案3：直接模拟AngularJS服务的接口 #

如果你的组件只依赖AngularJS服务的少数方法，也可以直接在测试中提供一个模拟对象，匹配原服务的接口：

// 模拟原AngularJS服务的方法和返回值
const mockNgJSService = {
  executeOriginalMethod: jasmine.createSpy('executeOriginalMethod').and.returnValue('模拟结果')
};

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [YourTargetComponent],
    providers: [
      // 用模拟对象替代真实的AngularJS服务
      { provide: 'yourAngularJSServiceName', useValue: mockNgJSService }
    ]
  }).compileComponents();
}));

⚠️ 注意：这种方法需要确保模拟对象的接口和原AngularJS服务完全一致，否则组件调用时会出现未定义方法的错误。

内容的提问来源于stack exchange，提问作者Ankit Garg