Angular:使用路由对延迟加载的模块进行单元测试 [英] Angular: Unit testing lazy-loaded modules with routing

问题描述

我在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:使用路由对延迟加载的模块进行单元测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！