如何对从服务订阅 EventEmitter 的 Angular 组件进行单元测试？答案

【问题标题】：How do I unit test an angular component that subscribes to an EventEmitter from a service?如何对从服务订阅 EventEmitter 的 Angular 组件进行单元测试？
【发布时间】：2021-02-14 21:27:54
【问题描述】：

我有一个如下所示的组件：

export class MyComponent {
    myattr: boolean = true;
    constructor(public myService: MyService) {
        this.myService.stateUpdate.subscribe((event: number) => {
            this.myattr = event == 10;
        });
    }

服务：

export class MyService {
    stateUpdate: EventEmitter<number> = new EventEmitter<number>();
    onSomeEvent(): void {
        this.stateUpdate.emit(130);
    }
}

我的单元测试尝试：

    beforeEach(() => {
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
        component.myService = new MyService();
    });
    it("emitting 130 should set myattr to false", async()=>{
        component.myService.stateUpdate.subscribe((event: number) => {
            expect(event).toEqual(130); // this is detected correctly
        })
        component.myService.onSomeEvent();
        fixture.whenStable();
        expect(component.myattr).toEqual(false); // this does not work
    });

基本上，我想测试当subscribe 中的任何代码执行完毕时会发生什么。我该怎么做？

谢谢

【问题讨论】：

标签： angular typescript jasmine karma-jasmine angular-event-emitter

【解决方案1】：

在您的示例中，您创建服务并在组件创建后将其分配给 myService 属性，因此构造函数中的订阅是在另一个服务实例上进行的。您可以在测试文件中创建服务实例或创建它的模拟，并在配置测试平台时通过 MyService 令牌提供它。因此，您以后可以访问该实例并在其上发出事件

【讨论】：

【解决方案2】：

你必须在fixture.whenStable().then()里面做你的断言

it("emitting 130 should set myattr to false", async(()=>{
    component.myService.onSomeEvent();
    fixture.whenStable().then(() => {
        expect(component.myattr).toEqual(false);
    });
});

请注意，Angular 的 async() 正在替换为 waitForAsync()

【讨论】：

【解决方案3】：

在 Angular 官方文档中，有一整节用于常见测试场景，可能会有所帮助：

https://angular.io/guide/testing-components-scenarios

在您的特定情况下，请查看这两个小节以获得完整的示例说明：

https://angular.io/guide/testing-components-scenarios#component-with-a-dependency

https://angular.io/guide/testing-components-scenarios#component-with-async-service

有不同的方法，但我通常做的是提供一个带有测试主题的服务存根来发出值，然后在测试用例中使用 async 关键字，这样我可以在发出时期待结果。

【讨论】：