How to use SharedModules with a router when testing an angular 2 application?

Question

I am trying to execute unit test a (angular 2) with routerLink and routerLinkActive , but all test cases fail with a subsequent error message. ( Note: I pinned the router and other related dependencies. Here is the link I used for this.).

Unable to read subscribe property undefined

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

I think that the error is caused by either RouterTestingModule or SharedModule (contains a component for displaying and checking the password input field). So I tried deleting or adding them to find what was actually causing the problem. Here is what I observed.

• I get a ' Cannot read property 'subscribe' of undefined' if RouterTestingModule or SharedModule .
• I do not get any router related error only if I delete both the RouterTestingModule and the SharedModules , but the elements from the SharedModules will not be loaded into the component and some of them will fail due to this.

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 problem?

Answer 1

I managed to solve this problem. I will tell you what changes I made to the problem.

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

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

• I found this error occurs when routerLink points to a null variable . In my case, the favoriteUrl property that I assigned routerLink was null due to the sandbox sandbox. So I manually assigned a value to the property in the beforeEach function and solved the problem, at least for me.

Thanks to everyone who tried to help !:-)

Literature:

fooobar.com/questions/1271969 / ...

fooobar.com/questions/1271971 / ...

Answer 2

Angular does not know that you want it to use the activRoute variable that you created yourself (as per the comment), so that it creates a default value and uses this in the DI. Instead of the current setting for ActivatedRoute dependencies, use { provide: ActivatedRoute, useValue: mockInstance} , where mockInstance is the ActivatedRoute layout, you can create this using jasmine.createSpyObj