Angular：使用路由对延迟加载的模块进行单元测试

Question

I'm facing some issues testing lazy-loaded modules in Angular. This is my .spec file:

  import { Location } from '@angular/common';
    import { TestBed, ComponentFixture } from '@angular/core/testing';
    import { RouterTestingModule } from '@angular/router/testing';
    import { Router } from '@angular/router';
    import { routes } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { AppConfigService } from './services/appConfig.service';
    import { TranslateModule } from '@ngx-translate/core';
    import { NgModuleFactoryLoader } from '@angular/core';
    import { VehicleModule} from './views/vehicle/vehicle.module';
    import { DriverModule} from './views/driver/driver.module';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

    describe('Router: App', () => {

      let location: Location;
      let router: Router;
      let fixture: ComponentFixture<AppComponent>;
      let loader: any;

      beforeEach(() => {
        TestBed.configureTestingModule({
          imports: [
            BrowserAnimationsModule,
            TranslateModule.forRoot(),
            RouterTestingModule.withRoutes(routes),
          ],
          declarations: [AppComponent],
          providers: [AppConfigService]
        });

        router = TestBed.get(Router);
        location = TestBed.get(Location);

        loader = TestBed.get(NgModuleFactoryLoader);
        loader.stubbedModules = {
          'VehicleModule': VehicleModule,
          'DriverModule': DriverModule
        };

        fixture = TestBed.createComponent(AppComponent);

        router.resetConfig([
          {
            path: 'vehicle',
            loadChildren: 'VehicleModule'
          },
          {
            path: 'driver',
            loadChildren: 'DriverModule'
          },
          {
            path: '',
            loadChildren: 'VehicleModule'
          }
        ]);

        fixture = TestBed.createComponent(AppComponent);
        router.initialNavigation();
      });

      it('should create APP', () => {
        expect(fixture.componentInstance).toBeDefined();
      });

      it('lazily navigates to "/driver"',(() => {
        router.navigate(['/driver']);
        expect(location.path()).toBe('/driver');
      }));
    });

This is what i got from running the test:

 Expected '' to be '/driver'.

The routes work fine on the app, the problem is showing up only during the unit testing session.

What am i missing?

I'm using karma 1.7.1, Angular 6, jasmine 2.99.1

Thanks.

Answer 1

Maybe it is a bit outdated, but here is the code of my lazy loaded module test.

The path to the module is:

{path: 'student', loadChildren: './student/student.module#StudentModule', canLoad: [AuthGuard]}

it('should navigate to /student lazy loaded ,pdule', fakeAsync(() => {

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

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

        router.navigate(['student'])

        tick();

        expect(location.path()).toBe('/student');
      }));

When I will remove:

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

an exception will be thrown: Expected '' to be '/student'.

I am also attaching TestBed configuration:

    let location: Location;
        let router: Router;
        let fixture;
          beforeEach(()=> {
            TestBed.configureTestingModule({
                imports: [
                    BrowserAnimationsModule,
                    RouterTestingModule.withRoutes(routes),
                    SharedModule,
                    AuthModule,
                    MaterialModule,
                    StoreModule.forRoot(reducers),
                    EffectsModule.forRoot([AuthEffects, UserEffects])
                ],
                declarations: [
                    AppComponent,
                    WelcomeComponent,
                    NavbarComponent,
                    ProjectInfoComponent
                ],
                providers: [
                    Location
                ]
            }).compileComponents();

            router = TestBed.get(Router);
            location = TestBed.get(Location);
            fixture = TestBed.createComponent(AppComponent);
            router.initialNavigation();
        });