Angular 组件测试没有服务提供商

Question

我有组件、服务和模拟服务。我正在为组件编写一个简单的测试，但在测试时出现错误。我想使用通过 useClass 使用 MyMockService 而不是 MyService。

Angular版本：11.0.6 节点版本：14.15.4

组件：

export class MyComponent implements OnInit, OnDestroy {
    constructor(
      private sharedService: MySharedService,
      private myService: MyService) {}
    ...
}

spec.file:

import { CommonModule } from '@angular/common';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { MyService } from '../my.service';
import { MySharedService } from '../my-shared.service';
import { MyMockService } from '../my.service.mock';

import { CountriesComponent } from './countries.component';

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

  beforeEach(async () => {

    await TestBed.configureTestingModule({
      declarations: [MyComponent],
      imports: [
        CommonModule,
        ReactiveFormsModule,
      ],
      providers: [
        { provide: MyService, useClass: MyMockService }, // <--
        MySharedService,
      ],
    })
      .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent); // <-- ERROR !!!

    service = TestBed.inject(MyService);

    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

my.service:

@Injectable()
export class MyService extends MyBaseService {

  baseUrl = '/baseUrl/...';
  constructor(
    protected hc: HttpClient
  ) {
    super(hc);
  }

  get() {
    return this.hc.get<any[]>(`${this.baseUrl}`);
  }

}

my.service.mock:

@Injectable()
export class MyMockService {

    arr: any[] = [];

    constructor(
    ) { }

    get() {
        return of(JSON.parse(JSON.stringify(this.arr)));
    }
}

创建组件时出现错误：

NullInjectorError: R3InjectorError(DynamicTestModule)[MyService -> MyService]: 
  NullInjectorError: No provider for MyService !

我该如何解决这个问题？

Answer 1

问题出在文件路径上。我有另一个同名的服务。我改变了路径

import { MyService } from '../my.service';

至

import { MyService } from '../right path/my.service';

Angular 组件测试没有服务提供商

Angular component testing no provider for service

angular

angular-test