Angular组件单元测试：构造函数多依赖参数的简化处理方法

嗨Frank，我完全懂你这种手动new一堆嵌套依赖的痛苦——尤其是当每个依赖自己还需要传入参数的时候，简直是配置噩梦！别担心，Angular的测试工具早就为我们想到了更优雅的解决方案，用TestBed来管理依赖注入就轻松多了，下面给你一步步拆解：

• 用TestBed.configureTestingModule统一配置依赖
  你不需要手动实例化所有依赖类，Angular的TestBed会帮你处理依赖注入的逻辑。你只需要在测试前配置好测试模块，声明你的组件，并提供它需要的依赖（可以是真实实例，也可以是模拟对象）。

• 优先用模拟对象替代真实依赖
  对于那些自身依赖复杂的类，测试时我们其实不需要它的真实功能，只需要模拟出组件调用的方法即可。用Jasmine的jasmine.createSpyObj就能快速创建模拟对象，避免嵌套实例化的麻烦。

• 示例代码演示
  假设你的组件是这样的：

  import { Component } from '@angular/core';
  import { AClass } from './a.class';
  import { BClass } from './b.class';
  import { CClass } from './c.class';
  import { DClass } from './d.class';
  
  @Component({
    selector: 'app-my-component',
    template: ''
  })
  export class MyComponent {
    constructor(
      private a: AClass,
      private b: BClass,
      private c: CClass,
      private d: DClass
    ) {}
  
    // 组件的业务方法，比如调用a.doSomething()
    doWork() {
      return this.a.doSomething();
    }
  }
  

  对应的测试代码可以这么写：

  import { ComponentFixture, TestBed } from '@angular/core/testing';
  import { MyComponent } from './my.component';
  import { AClass } from './a.class';
  import { BClass } from './b.class';
  import { CClass } from './c.class';
  import { DClass } from './d.class';
  
  describe('MyComponent', () => {
    let component: MyComponent;
    let fixture: ComponentFixture<MyComponent>;
    // 声明模拟对象
    let mockA: jasmine.SpyObj<AClass>;
    let mockB: jasmine.SpyObj<BClass>;
    let mockC: jasmine.SpyObj<CClass>;
    let mockD: jasmine.SpyObj<DClass>;
  
    beforeEach(async () => {
      // 创建模拟对象，指定需要模拟的方法
      mockA = jasmine.createSpyObj('AClass', ['doSomething']);
      mockB = jasmine.createSpyObj('BClass', ['someMethod']);
      mockC = jasmine.createSpyObj('CClass', ['anotherMethod']);
      mockD = jasmine.createSpyObj('DClass', ['lastMethod']);
  
      await TestBed.configureTestingModule({
        declarations: [MyComponent],
        providers: [
          // 提供模拟对象作为依赖
          { provide: AClass, useValue: mockA },
          { provide: BClass, useValue: mockB },
          { provide: CClass, useValue: mockC },
          { provide: DClass, useValue: mockD }
        ]
      }).compileComponents();
    });
  
    beforeEach(() => {
      fixture = TestBed.createComponent(MyComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should create', () => {
      expect(component).toBeTruthy();
    });
  
    it('should call a.doSomething when doWork is called', () => {
      // 模拟方法返回值
      mockA.doSomething.and.returnValue('test result');
      
      const result = component.doWork();
      
      expect(mockA.doSomething).toHaveBeenCalled();
      expect(result).toBe('test result');
    });
  });
  

• 复用测试配置的小技巧
  如果多个测试用例都需要相同的依赖配置，可以把TestBed的配置放在beforeEach(async () => {})里，这样每个测试用例都会自动继承这个配置，避免重复代码。

这样一来，你再也不用手动嵌套实例化那些复杂的依赖类了，测试代码也会更清晰、更易于维护！

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