angular - 测试 Angular 2 应用程序时如何正确使用 SharedModules 和 Router？

Question

我正在尝试使用 routerLink 和 routerLinkActive 对 (angular 2) 组件进行单元测试，但所有测试用例都失败并显示以下错误消息。 (注意: 我已经标记了路由器和其他相关依赖项。这是我用于相同目的的 reference。)。

Cannot read property 'subscribe' of undefined

我还注意到，当从我的模板中删除 routerLink 和 routerLinkActive 时，所有测试用例都将正常运行。

我认为错误是由 RouterTestingModule 或 SharedModule(包含用于显示和验证密码输入字段的组件) 引起的。所以我尝试删除或添加它们以查找实际导致问题的原因。这是我观察到的。

• 如果 RouterTestingModule 或 SharedModule 存在。
• 仅当我同时删除 RouterTestingModule 和 SharedModules 时，我才不会收到任何链接到路由器的错误，但是 SharedModules 中的元素不会得到加载到组件中，一些测试用例仍然因此失败。

测试台配置:

TestBed.configureTestingModule({

            imports: [CoreModule,SharedModule,RouterTestingModule],
            declarations: [ MyComponent,RouterLinkStubDirective,RouterOutletStubComponent ],
            providers: [
                FormBuilder,
                { provide: Router, useClass: RouterStub },
                { provide: ActivatedRoute, userClass: ActivatedRouteStub}
            ],
            schemas: [NO_ERRORS_SCHEMA]
        })
            .overrideComponent(MyComponent, {
                set: {
                    providers: [
                        {provide: AuthModel, useClass: MockAuthModel}    
                    ],
                }
            })
            .compileComponents();
    }));

ActivatedRouterStub:

@Injectable()
export class ActivatedRouteStub {

    // ActivatedRoute.params is Observable
    private subject = new BehaviorSubject(this.testParams);
    params = this.subject.asObservable();

    // Test parameters
    private _testParams: {};
    get testParams() { return this._testParams; }
    set testParams(params: {}) {
        this._testParams = params;
        this.subject.next(params);
    }

    // ActivatedRoute.snapshot.params
    get snapshot() {
        return { params: this.testParams };
    }
}

我应该做哪些改变来解决这个问题？

Answer 1

我已经设法解决了这个问题。我将列出我为解决问题所做的更改。

1. 正如我在评论中提到的，routerLink 仅适用于真正的路由器。所以我们需要包含 RouterTestingModule (include .withRoutes([{path: 'some/path',component: someComponent}]) 如果你打算点击它在测试时)。

2. 如果我们已经添加了 RouterTestingModule，我们不需要单独提供 Router 依赖项。所以我删除了我提供的 Router 和 ActivatedRoute 依赖项。现在，错误从 Cannot read property 'subscribe' of undefined 更改为 Cannot read property 'outlets' of null。

3. 我 found当 routerLink 指向一个 null 变量时，会发生此错误。在我的例子中，由于隔离的测试环境，我分配给 routerLink 的名为 favoriteUrl 的属性为 null。所以我手动为 beforeEach 函数中的属性分配了一个值，这至少对我来说解决了问题。

感谢所有试图提供帮助的人! :-)

引用资料:

https://stackoverflow.com/a/45916133/8558515

https://stackoverflow.com/a/42039920/8558515