组件级别的 Angular 模拟服务

Question

我必须模拟在组件级别而不是在模块级别注入的服务方法。 这是我的组件的样子：

@Component({
    selector: 'app-mycomponent',
    template: '<some html content>',
    ...
    providers: [MyService],
})
export class MyComponent implements OnInit {
    constructor(private myService: MyService) {}

    ngOnInit(): void {
        this.myService.myMethod();
    }
}

还有我的规范文件：

define('MyComponent', () => {
    let component: MyComponent;
    let fixture: ComponentFixture<MyComponent>;
    let service: MyService;
    
    beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
            imports: [..some modules..],
            providers: [
                { provide: MyService, useClass: MyServiceStub }
            ],
        }).compileComponents();
    }));

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

    it ('should call service method', () => {
        spyOn(service, 'myMethod');

        component.ngOnInit();

        expect(service.myMethod).toHaveBeenCalled();
    });
});

class MyServiceStub {
    myMethod(): void {}
}

当我运行npm test 时，TC 失败，抱怨没有调用预期的服务方法。如果我在模块级别提供服务，它会通过，但我需要它在组件级别，知道如何正确配置规范以使用组件级别提供的服务吗？

Answer 1

您可以为此使用TestBed.overrideComponent。

// Override component's own provider
TestBed.overrideComponent(
   MyComponent,
   {set: {providers: [{provide: MyService, useClass: MyServiceStub}]}}
)
.compileComponents();

见Angular documentation