angular testing with lazy loading modules routes

Question

I am using RouterTestingModule and my test is

it('should navigate to foo child path', fakeAsync(() => {
  let router = TestBed.get(Router);
  let location = TestBed.get(Location);
  let fixture = TestBed.createComponent(AppComponent);
  router.initialNavigation();
  router.navigateByUrl('/foo/child');
  tick();
  fixture.detectChanges();
  expect(location.path()).toBe('/foo/child');
}));

When trying to test a route with lazy loaded children, e.g.

{ path: 'foo', loadChildren: 'app/foo/foo.module#FooModule'}

an error "Cannot find module..." is thrown.

Error: Uncaught (in promise): Error: Cannot find module app/foo/foo.module#FooModule
    Error: Cannot find module app/foo/foo.module#FooModule
        at SpyNgModuleFactoryLoader.Array.concat.SpyNgModuleFactoryLoader.load (webpack:///~/@angular/router/@angular/router/testing.es5.js:78:0 <- src/test.ts:92347:35) [ProxyZone]
        at RouterConfigLoader.Array.concat.RouterConfigLoader.loadModuleFactory (webpack:///~/@angular/router/@angular/router.es5.js:3417:0 <- src/test.ts:24005:129) [ProxyZone]
        at RouterConfigLoader.Array.concat.RouterConfigLoader.load (webpack:///~/@angular/router/@angular/router.es5.js:3401:25 <- src/test.ts:23989:52) [ProxyZone]
        at MergeMapSubscriber.project (webpack:///~/@angular/router/@angular/router.es5.js:1569:0 <- src/test.ts:22157:108) [ProxyZone]
        at MergeMapSubscriber.Array.concat.MergeMapSubscriber._tryNext (webpack:///~/rxjs/operator/mergeMap.js:120:0 <- src/test.ts:57460:27) [ProxyZone]
        at MergeMapSubscriber.Array.concat.MergeMapSubscriber._next (webpack:///~/rxjs/operator/mergeMap.js:110:0 <- src/test.ts:57450:18) [ProxyZone]
        at MergeMapSubscriber.Array.concat.Subscriber.next (webpack:///~/rxjs/Subscriber.js:89:0 <- src/test.ts:19369:18) [ProxyZone]
        at ScalarObservable.Array.concat.ScalarObservable._subscribe (webpack:///~/rxjs/observable/ScalarObservable.js:49:0 <- src/test.ts:56878:24) [ProxyZone]
        at ScalarObservable.Array.concat.Observable._trySubscribe (webpack:///~/rxjs/Observable.js:57:0 <- src/test.ts:232:25) [ProxyZone]
        at ScalarObservable.Array.concat.Observable.subscribe (webpack:///~/rxjs/Observable.js:45:0 <- src/test.ts:220:27) [ProxyZone]
        at MergeMapOperator.Array.concat.MergeMapOperator.call (webpack:///~/rxjs/operator/mergeMap.js:85:0 <- src/test.ts:57425:23) [ProxyZone]
        at Observable.Array.concat.Observable.subscribe (webpack:///~/rxjs/Observable.js:42:0 <- src/test.ts:217:22) [ProxyZone]
        at MergeMapOperator.Array.concat.MergeMapOperator.call (webpack:///~/rxjs/operator/mergeMap.js:85:0 <- src/test.ts:57425:23) [ProxyZone]
        at Observable.Array.concat.Observable.subscribe (webpack:///~/rxjs/Observable.js:42:0 <- src/test.ts:217:22) [ProxyZone]
        at resolvePromise (webpack:///~/zone.js/dist/zone.js:683:0 <- src/polyfills.ts:3331:17) [ProxyZone]
        at webpack:///~/zone.js/dist/zone.js:760:0 <- src/polyfills.ts:3408:17 [ProxyZone]
        at ProxyZoneSpec.Array.concat.ProxyZoneSpec.onInvokeTask (webpack:///~/zone.js/dist/proxy.js:103:0 <- src/test.ts:90529:39) [ProxyZone]
        at FakeAsyncTestZoneSpec.Array.concat.FakeAsyncTestZoneSpec.flushMicrotasks (webpack:///~/zone.js/dist/fake-async-test.js:204:0 <- src/test.ts:90058:17) [ProxyZone]
        at FakeAsyncTestZoneSpec.Array.concat.FakeAsyncTestZoneSpec.tick (webpack:///~/zone.js/dist/fake-async-test.js:187:0 <- src/test.ts:90041:18) [ProxyZone]
        at Object.tick (webpack:///~/@angular/core/@angular/core/testing.es5.js:389:0 <- src/test.ts:53426:29) [ProxyZone]
        at Object.advance (webpack:///src/app/test/test.module.ts:33:2 <- src/test.ts:85821:15) [ProxyZone]
        at Object.<anonymous> (webpack:///src/app/app.component.spec.ts:79:6 <- src/test.ts:85712:27) [ProxyZone]
        at Object.<anonymous> (webpack:///~/@angular/core/@angular/core/testing.es5.js:348:0 <- src/test.ts:53385:26) [ProxyZone]

How can we test such routes?

Pablo · Accepted Answer · 2017-07-28 14:51:38Z

30

Ok, I just found out. I should have paid more attention to the error log. I will answer myself just in case it helps someone.

It can be done setting up stubbed modules with SpyNgModuleFactoryLoader

This works:

it('should navigate to foo child path', fakeAsync(() => {
  let router = TestBed.get(Router);
  let location = TestBed.get(Location);
  let fixture = TestBed.createComponent(AppComponent);
  router.initialNavigation();

  const loader = TestBed.get(NgModuleFactoryLoader);
  loader.stubbedModules = {lazyModule: FooModule};

  router.resetConfig([
    {path: 'foo', loadChildren: 'lazyModule'},
  ]);

  router.navigateByUrl('/foo/child');

  tick();
  fixture.detectChanges();

  expect(location.path()).toBe('/foo/child');
}));

answered Jul 28, 2017 at 14:51

Pablo

1,6921 gold badge16 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

c69 Over a year ago

where do you import TestBed and NgModuleFactoryLoader from ?

Pablo Over a year ago

@c69: import { async, TestBed } from '@angular/core/testing'; import { NgModuleFactoryLoader } from '@angular/core';

jeremy-denis Over a year ago

NgModuleFactoryLoader is deprecated see SpyNgModuleFactoryLoader to have an alternative import { SpyNgModuleFactoryLoader } from '@angular/router/testing'; angular.io/api/router/testing/SpyNgModuleFactoryLoader

Collectives™ on Stack Overflow

angular testing with lazy loading modules routes

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related