Angular 5单元测试：如何为单个测试重写Provider及多次Mock服务？

我之前也踩过这个坑！Angular的overrideProvider看起来简单，但在单个it块里动态替换Mock对象的时候确实容易出问题——因为TestBed的配置默认是缓存的，直接调用不会自动更新已注入的实例。我来给你讲清楚正确用法和更灵活的替代方案：

要让overrideProvider在it块里生效，你需要完成两步：

1. 调用TestBed.overrideProvider()修改服务的配置
2. 重新获取服务实例或者重新创建组件（因为之前的组件/服务实例是基于旧配置生成的，不会自动更新）

给你看个完整的代码示例：

// 假设我们测试的组件是MyComponent，依赖的服务是DataService
describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;
  let dataService: DataService;

  // 初始化基础测试配置
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [MyComponent],
      providers: [
        // 配置默认的Mock服务
        { provide: DataService, useClass: MockDataServiceDefault }
      ]
    }).compileComponents();
  });

  // 每次测试前创建组件实例
  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    dataService = TestBed.inject(DataService);
    fixture.detectChanges();
  });

  it('should use the default mock service', () => {
    expect(dataService.getData()).toBe('default mock content');
    expect(component.showData).toBe('default mock content');
  });

  it('should use the overridden mock service in this test', () => {
    // 第一步：Override Provider配置
    TestBed.overrideProvider(DataService, { useClass: MockDataServiceOverride });
    
    // 第二步：重新获取服务+重建组件，让新配置生效
    dataService = TestBed.inject(DataService);
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();

    expect(dataService.getData()).toBe('overridden mock content');
    expect(component.showData).toBe('overridden mock content');
  });
});

// 定义两个不同的Mock服务类
class MockDataServiceDefault {
  getData() { return 'default mock content'; }
}

class MockDataServiceOverride {
  getData() { return 'overridden mock content'; }
}

关键注意点 #

• 不要在beforeEach之后直接修改Provider就用旧的组件实例，组件已经注入了旧的服务实例，必须重新创建才能使用新配置。
• 如果只是测试服务本身（不需要组件），只需要重新调用TestBed.inject()就能拿到新的服务实例。

如果每个it块都写overrideProvider+重建组件有点繁琐，你可以试试这两种更高效的方法：

2.1 使用useFactory动态切换Mock实例 #

在configureTestingModule里用工厂函数返回Mock实例，然后在测试中直接替换这个实例即可：

describe('MyComponent', () => {
  let currentMockService: DataService;
  let fixture: ComponentFixture<MyComponent>;
  let component: MyComponent;

  beforeEach(async () => {
    // 默认使用第一个Mock
    currentMockService = new MockDataServiceDefault();
    
    await TestBed.configureTestingModule({
      declarations: [MyComponent],
      providers: [
        { provide: DataService, useFactory: () => currentMockService }
      ]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should use default mock', () => {
    expect(component.showData).toBe('default mock content');
  });

  it('should use custom mock', () => {
    // 直接替换工厂返回的实例
    currentMockService = new MockDataServiceOverride();
    // 重建组件让它注入新实例
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();

    expect(component.showData).toBe('overridden mock content');
  });
});

2.2 使用spyOn修改Mock方法的行为 #

如果你的Mock类结构一致，只是返回值不同，直接用spyOn修改方法行为比替换整个Mock类更简便：

describe('MyComponent', () => {
  let fixture: ComponentFixture<MyComponent>;
  let component: MyComponent;
  let dataService: MockDataServiceDefault;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [MyComponent],
      providers: [
        { provide: DataService, useClass: MockDataServiceDefault }
      ]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    // 类型断言为Mock类，方便调用方法
    dataService = TestBed.inject(DataService) as MockDataServiceDefault;
    fixture.detectChanges();
  });

  it('should use default mock data', () => {
    expect(component.showData).toBe('default mock content');
  });

  it('should use custom mocked value', () => {
    // 直接spyOn修改方法的返回值
    spyOn(dataService, 'getData').and.returnValue('custom test content');
    fixture.detectChanges();

    expect(component.showData).toBe('custom test content');
  });
});

• overrideProvider适合需要完全替换Provider配置的场景（比如从useClass改成useValue或者useFactory）；
• useFactory适合需要频繁切换不同Mock类的情况；
• spyOn则是修改单个Mock方法行为的最优解，代码最简洁。

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