How to correctly use SharedModules with Router while testing angular 2 application?

Question

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.).

Cannot read property 'subscribe' of undefined

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

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.

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

Can you share the ActivatedRouteStub, sounds like you're not returning an Observable from your stub setups. Also what are your test fixtures? Do you get the error before even the tests are run? — KlsLondon
– KlsLondon, Commented Sep 20, 2017 at 11:57
@KlsLondon Actually my test case fails with following error: Failed: Error in ./myComponent class myComponent - inline template:80:21 caused by: Cannot read property 'subscribe' of undefined. Also I have updated the question with ActivatedRouterStub — Sanju
– Sanju, Commented Sep 20, 2017 at 12:15
@KlsLondon Since the most simple test cases such as it('Should create component',() => { expect(component).toBeDefined(); }); is failing, I think the errors appear before test cases are run. — Sanju
– Sanju, Commented Sep 20, 2017 at 12:24
this.testParams would be undefined unless you call the setter of that property somewhere before your test runs? — KlsLondon
– KlsLondon, Commented Sep 20, 2017 at 13:26
@KlsLondon Yes. I've called setter in beforeEach() let activatedRoute = new ActivatedRouteStub(); activatedRoute.testParams = { url: this.requestURL }; — Sanju
– Sanju, Commented Sep 20, 2017 at 13:44

Community · Accepted Answer · 2020-06-20 09:12:55Z

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

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).
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.
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! :-)

References:

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

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

KlsLondon · Accepted Answer · 2017-09-20 14:02:58Z

0

Angular has no way of knowing that you want it to use the activatedRoute variable that you created yourself(as per comment) so it will create default one and use that in DI. Instead of the current setup for the ActivatedRoute dependency use { provide: ActivatedRoute, useValue: mockInstance} where mockInstance is a mock of ActivatedRoute, you can create that with jasmine.createSpyObj

answered Sep 20, 2017 at 14:02

KlsLondon

1,2801 gold badge10 silver badges18 bronze badges

3 Comments

Sanju Over a year ago

Did not work. Unfortunately same error. I created a class

class MockActivatedRoute {     params = {         subscribe: jasmine.createSpy('subscribe')             .and             .returnValue(Observable.of(<Params>{url: this.requestUrl}))     } }

and provided the class in ActivatedRoute provider.

KlsLondon Over a year ago

Hard to help you when don't have all the code, maybe reproduce the error in jsFiddle project?

Sanju Over a year ago

Thank for the help! I got the solution. :-)

Collectives™ on Stack Overflow

How to correctly use SharedModules with Router while testing angular 2 application?

2 Answers 2

References:

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

References:

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related