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

问题描述：

我在Angular中测试延迟加载的模块时遇到一些问题.这是我的.spec文件:

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.

我想念什么?

我正在使用业力1.7.1，Angular 6，茉莉2.99.1

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

谢谢.

答

也许有点过时了，但这是我的延迟加载模块测试的代码.

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

该模块的路径为:

{路径:"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');
      }));

我何时删除:

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

将引发异常:预计"为"/学生".

我还附加了TestBed配置:

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();
        });

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

相关推荐