Integration route test of lazy-loaded module fails with error: Cannot find module

[tonysneed]

I'm submitting a ...

[ ] Regression (behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

router.navigateByUrl('/lazy') results in location.path() returning an empty string.

An error is reported in the stack trace: Cannot find module app/lazy-feature/lazy-feature.module#LazyFeatureModule

Expected behavior

router.navigateByUrl('/lazy') results in location.path() returning './lazy'

Minimal reproduction of the problem with instructions

Complete repro can be found here: https://github.com/tonysneed/angular-route-testing/blob/feature/test-lazy-routes/src/app/app-routing.module.spec.ts

1. Configure routing module with the following route:

{ path: 'lazy', loadChildren: 'app/lazy-feature/lazy-feature.module#LazyFeatureModule' }

2. Add a test for the route:

it('navigate to "lazy" redirects to /lazy', async(() => {
    const fixture = TestBed.createComponent(LazyFeatureComponent);
    router.navigateByUrl('/lazy'); // Error
    fixture.whenStable().then(() => {
        fixture.detectChanges();
        expect(location.path()).toBe('/lazy'); // path is ''
        const compiled = fixture.debugElement.nativeElement;
        expect(compiled.querySelector('p').textContent).toContain('lazy feature works!');
    });
}));

The following output is shown in the debug console:

FAILED Router: App navigate to "lazy" redirects to /lazy
Error: "Expected '' to be '/lazy'.
    at /Users/anthonysneed/Source/angular-route-testing/src/app/app-routing.module.spec.ts:74:37
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2800:26)
    at AsyncTestZoneSpec.webpackJsonp.../../../../zone.js/dist/async-test.js.AsyncTestZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/vendor.bundle.js:4656:39)
    at ProxyZoneSpec.webpackJsonp.../../../../zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/vendor.bundle.js:5419:39)"
    at webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2604:24)
    at ZoneTask.invoke (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2895:37)
    at timer (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:3949:28)
Error: "Error: Cannot find module app/lazy-feature/lazy-feature.module#LazyFeatureModule
    at SpyNgModuleFactoryLoader.webpackJsonp.../../../router/@angular/router/testing.es5.js.SpyNgModuleFactoryLoader.load (http://localhost:9876/_karma_webpack_/vendor.bundle.js:65436:35)
    at RouterConfigLoader.webpackJsonp.../../../router/@angular/router.es5.js.RouterConfigLoader.loadModuleFactory (http://localhost:9876/_karma_webpack_/vendor.bundle.js:62634:129)
    at RouterConfigLoader.webpackJsonp.../../../router/@angular/router.es5.js.RouterConfigLoader.load (http://localhost:9876/_karma_webpack_/vendor.bundle.js:62618:52)
    at MergeMapSubscriber.project (http://localhost:9876/_karma_webpack_/vendor.bundle.js:60786:108)
    at MergeMapSubscriber.webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber._tryNext (http://localhost:9876/_karma_webpack_/vendor.bundle.js:3546:27)
    at MergeMapSubscriber.webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber._next (http://localhost:9876/_karma_webpack_/vendor.bundle.js:3536:18)
    at MergeMapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (http://localhost:9876/_karma_webpack_/vendor.bundle.js:948:18)
    at ScalarObservable.webpackJsonp.../../../../rxjs/observable/ScalarObservable.js.ScalarObservable._subscribe (http://localhost:9876/_karma_webpack_/vendor.bundle.js:2276:24)
    at ScalarObservable.webpackJsonp.../../../../rxjs/Observable.js.Observable._trySubscribe (http://localhost:9876/_karma_webpack_/vendor.bundle.js:493:25)
    at ScalarObservable.webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe (http://localhost:9876/_karma_webpack_/vendor.bundle.js:481:65)
Error: Uncaught (in promise): Error: Cannot find module app/lazy-feature/lazy-feature.module#LazyFeatureModule
    at resolvePromise (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:3179:31)
    at resolvePromise (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:3150:17)
    at http://localhost:9876/_karma_webpack_/polyfills.bundle.js:3227:17
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2833:31)
    at ProxyZoneSpec.webpackJsonp.../../../../zone.js/dist/proxy.js.ProxyZoneSpec.onInvokeTask (http://localhost:9876/_karma_webpack_/vendor.bundle.js:5446:39)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2832:36)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2600:47)
    at drainMicroTaskQueue (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2993:35)
    at <anonymous>"
    at webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2604:24)
    at ZoneTask.invoke (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2895:37)
    at timer (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:3949:28)

What is the motivation / use case for changing the behavior?

Integrated route tests for eager-loaded modules succeed, but they break when the module is configured to be lazy-loaded.

Please tell us about your environment

Angular version: 4.2.4

Browser:
- [x] Chrome (desktop) version 59.0.3071.104
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 8.1.2
- Platform: Mac os darwin x64
Others:
Tests run with Angular CLI version 1.2.0

[brandonroberts]

You have to stub out lazy loading modules when testing. See https://angular.io/api/router/testing/SpyNgModuleFactoryLoader

[jasonaden]

Closing as the suggestion above should fix this problem.

[tonysneed]

@brandonroberts Thanks, it worked!

[burtonjc]

I know this is an old/closed issue, but it is the first issue I found around this when I was trying to figure it out, so maybe this will help someone else out.

The linked docs use router.resetConfig which blows away the actual routes you are trying to test. This means you could delete your routes in source code and the tests will still pass (not ideal). We were looking to test our actual lazy route while still stubbing the lazy loading of the module. In this case, we have a route at /project/create that lazily loads a module CreateProjectModule. This is what we came up with:

app-routing.module.ts

export const appRoutes: Routes = [
  {
    loadChildren: './create-project/create-project.module#CreateProjectModule',
    path: 'project/create',
  },
  { path: '**', component: OtherComponent },
];

app-routing.module.spec.ts

  @Component({ template: '' })
  class LazyLoadedComponent { }

  @NgModule({ declarations: [ LazyLoadedComponent ]})
  class LazyModule { }

  it('lazily navigates to "/project/create"', fakeAsync(() => {
    const loader = TestBed.get(NgModuleFactoryLoader);
    loader.stubbedModules = {
      './create-project/create-project.module#CreateProjectModule': LazyModule,
    };
    spy(loader, 'load');

    router.navigate(['project', 'create']);

    tick();
    expect(location.path()).to.equal('/project/create');
    expect(loader.load).to.have.been.calledOnce;
    expect(loader.load).to.have.been.calledWith('./create-project/create-project.module#CreateProjectModule');
  }));

That way, it is testing the actual route and also making sure the load happened and we didn't just fall into the wildcard route.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}