使用 TestBed 进行单元测试：ActivatedRoute 快照的“params”属性解释存在问题

Question

我目前正在 Cypress 中使用 TestBed 开发一个单元测试组件，该组件需要提供带有快照中参数的 ActivatedRoute。

我精确地说，组件使用此参数来确定组件的属性（有一行类似“this.componentParameter = this.activatedRoute.snapshot.params['myParameter']”），组件使用该参数来使加载时向 API 发出 get 请求。

在我提供ActivatedRoute的方式中，要么定义了组件参数，但Cypress不显示该组件，要么显示了组件，但未定义组件参数。

我尝试过这样的：

TestBed.configureTestingModule({
    imports: [ ...],
    declarations: [...],
    providers: [
        { provide: ActivatedRoute, useValue: {
            snapshot: {
                params: of({
                    myParameter: 1
                }),
                data: {
                    ...
                }
            }
            }
        }
}).compileComponents();

fixture = TestBed.createComponent(myComponent); 
component = fixture.componentInstance;
fixture.detectChanges();

在这种情况下，组件已显示，但组件属性未定义。

在另一种情况下，定义了组件属性但未显示组件：

TestBed.configureTestingModule({
    imports: [ ...],
    declarations: [...],
    providers: [
        { provide: ActivatedRoute, useValue: {
            snapshot: {
                params: {
                    myParameter: 1
                },
                data: {
                    ...
                }
            }
            }
        }
}).compileComponents();

fixture = TestBed.createComponent(myComponent); 
component = fixture.componentInstance;
fixture.detectChanges();

Answer 1

您可以尝试通过提供一个输入参数为

subscribe

的箭头函数并使用参数值执行回调来模拟

callback

事件吗！

我假设你使用的是一个简单的订阅，里面有一个回调，如果你的订阅方法很复杂，模拟对象需要相应调整！

TestBed.configureTestingModule({
    imports: [ ...],
    declarations: [...],
    providers: [
        { provide: ActivatedRoute, useValue: {
            snapshot: {
                params: {
                    subscribe: (callback) => {
                        callback({
                            myParameter: 1,
                        })
                    }),
                },
                data: {
                    ...
                }
            }
            }
        }
}).compileComponents();