测试angular 2应用程序时如何在Router上正确使用SharedModules? [英] How to correctly use SharedModules with Router while testing angular 2 application?

问题描述

我正在尝试使用routerLink和routerLinkActive对一个(角度2)组件进行单元测试，但是所有测试用例均失败，并显示以下错误消息. (注意:，我已经将路由器和其他相关依赖项存根了.这是

I'm trying to unit test a (angular 2) component with routerLink and routerLinkActive but all test cases fail with following error message. (Note: I have stubbed the router and other related dependencies. Here's the reference that I used for the same.).

无法读取未定义的属性"subscribe"

Cannot read property 'subscribe' of undefined

我还注意到，从模板中删除routerLink和routerLinkActive时，所有测试用例都将运行而不会出现任何错误.

I have also noticed that when routerLink and routerLinkActive are removed from my template, all test cases will run without any errors.

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

I think the error is caused by either RouterTestingModule or SharedModule(contains component for displaying and validating password input field). So I tried removing or adding them to find which is actually causing the problem. Here's what I observed.

• 我得到'Cannot read property 'subscribe' of undefined'如果 RouterTestingModule或SharedModule存在.
• 仅当我同时删除RouterTestingModule和SharedModules时，我不会收到与路由器链接的任何错误，但是SharedModules中的元素将不会加载到组件中，因此某些测试用例仍然会失败. /li>

• I get 'Cannot read property 'subscribe' of undefined' if RouterTestingModule or SharedModule is present.
• I do not get any error linked to router only if I remove both RouterTestingModule and SharedModules but the elements from the SharedModules would not get loaded in the component and some test cases still fail because of that.

TestBed配置:

TestBed configuration:

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 };
    }
}

我应该进行哪些更改以解决该问题?

What changes should I make to solve the issue?

推荐答案

我设法解决了这个问题.我将列出为解决该问题而进行的更改.

I have managed to solve this issue. I'll list what changes I made to solve the issue.

1. 正如我在评论中提到的，routerLink仅在真实路由器上有效.因此，我们需要包括 RouterTestingModule (如果您打算在测试时单击它，请包括.withRoutes([{path: 'some/path',component: someComponent}])).

1. As I mentioned in the comments, routerLink works only on real router. So we need to include RouterTestingModule (include .withRoutes([{path: 'some/path',component: someComponent}]) if you plan to click on it while testing).

如果已经添加RouterTestingModule，我们不需要单独提供路由器依赖项.因此，我删除了我提供的Router和ActivatedRoute依赖项.现在，错误从Cannot read property 'subscribe' of undefined变为Cannot read property 'outlets' of null.

We need not provide Router dependencies separately if we have added RouterTestingModule already. So I removed both Router and ActivatedRoute dependency that I provided. Now, the error changed from Cannot read property 'subscribe' of undefined to Cannot read property 'outlets' of null.

我找到，发现当routerLink 指向空变量.在我的情况下，由于隔离的测试环境，我分配给routerLink的名为favoriteUrl的属性为null.因此，我在beforeEach函数中为属性手动分配了一个值，并解决了这个问题，这对我来说是最少的.

I found out this error occurs when the routerLink is pointing to a null variable. In my case, the property called favoriteUrl that i assigned to routerLink was null because of the isolated testing environment. So I manually assigned a value to the property in beforeEach function and that solved the problem, atleast for me.

感谢所有尝试提供帮助的人！ :-)

Thanks to everyone who tried to help! :-)

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

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

这篇关于测试angular 2应用程序时如何在Router上正确使用SharedModules?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！