Angular9+Jest测试window._satellite.track方法的方案咨询

没问题，我来帮你搞定Angular9+Jest环境下这个第三方window对象的测试和覆盖率问题，这里有几个实用的方案：

这是最直接的快速解决方案，不需要修改现有业务代码，只需要在测试文件里提前模拟全局对象即可。

在你的测试文件（比如tagging.service.spec.ts或者组件的.spec.ts文件）中，添加测试前后的钩子：

// 在测试套件开始前模拟全局对象
beforeEach(() => {
  // 给window对象挂载_satellite，并用Jest mock函数替代track方法
  window._satellite = {
    track: jest.fn()
  } as any;
});

// 测试完成后清理，避免影响其他测试用例
afterEach(() => {
  delete window._satellite;
});

接下来就可以正常测试你的TaggingService或者组件了，还能验证track方法是否被正确调用：

it('should trigger satellite track event when createtag is called', () => {
  const taggingService = TestBed.inject(TaggingService);
  taggingService.createtag('test-string-1', 'test-string-2');
  
  // 验证track方法是否传入了正确的事件名
  expect(window._satellite.track).toHaveBeenCalledWith('exampleevent');
});

这样既解决了satellite未定义的报错，又能让代码覆盖率工具认为这段逻辑被测试覆盖了。

如果想让代码更符合Angular的最佳实践，解耦第三方依赖，后续维护更方便，可以用抽象服务的方式重构：

1. 先定义一个抽象类，规范第三方服务的接口：

// satellite.abstract.ts
export abstract class SatelliteAbstract {
  abstract track(eventName: string): void;
}

2. 实现一个基于window._satellite的具体服务：

// browser-satellite.service.ts
import { Injectable } from '@angular/core';
import { SatelliteAbstract } from './satellite.abstract';

@Injectable()
export class BrowserSatelliteService implements SatelliteAbstract {
  track(eventName: string): void {
    // 用可选链避免脚本未加载时的报错
    window._satellite?.track(eventName);
  }
}

3. 修改你的TaggingService，注入抽象服务而非直接调用window：

// tagging.service.ts
import { Injectable } from '@angular/core';
import { SatelliteAbstract } from './satellite.abstract';

@Injectable()
export class TaggingService {
  constructor(private satelliteService: SatelliteAbstract) {}

  createtag(string1: string, string2: string) {
    this.satelliteService.track('exampleevent');
  }
}

4. 在你的模块中提供具体的实现：

// app.module.ts
import { NgModule } from '@angular/core';
import { SatelliteAbstract } from './satellite.abstract';
import { BrowserSatelliteService } from './browser-satellite.service';
import { TaggingService } from './tagging.service';

@NgModule({
  providers: [
    TaggingService,
    { provide: SatelliteAbstract, useClass: BrowserSatelliteService }
  ]
})
export class AppModule {}

5. 测试时直接mock抽象服务即可：

// tagging.service.spec.ts
import { TestBed } from '@angular/core/testing';
import { TaggingService } from './tagging.service';
import { SatelliteAbstract } from './satellite.abstract';

describe('TaggingService', () => {
  let taggingService: TaggingService;
  let mockSatelliteService: jest.Mocked<SatelliteAbstract>;

  beforeEach(() => {
    // 创建mock服务
    mockSatelliteService = {
      track: jest.fn()
    };

    TestBed.configureTestingModule({
      providers: [
        TaggingService,
        { provide: SatelliteAbstract, useValue: mockSatelliteService }
      ]
    });

    taggingService = TestBed.inject(TaggingService);
  });

  it('should call satellite track with correct event name', () => {
    taggingService.createtag('foo', 'bar');
    expect(mockSatelliteService.track).toHaveBeenCalledWith('exampleevent');
  });
});

这种方式的好处是彻底解耦了第三方依赖，后续如果第三方脚本有变更，只需要修改BrowserSatelliteService的实现即可，测试用例完全不需要改动。

如果临时不想测试这段逻辑但要维持覆盖率指标，可以用Jest的覆盖率忽略注释：

// tagging.service.ts
createtag(string1: string, string2: string) {
  /* istanbul ignore next */
  window._satellite.track('exampleevent');
}

添加/* istanbul ignore next */注释后，覆盖率工具会跳过这行代码的统计。不过这种方式只是权宜之计，还是推荐前面两种方案来保证代码的可测试性。

内容的提问来源于stack exchange，提问作者Hassan Harajly