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.

我错过了什么?

我使用的是 karma 1.7.1、Angular 6、jasmine 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.

模块的路径是:

{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');
      }));

我什么时候删除:

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

将抛出异常:预期 '' 为 '/student'.

我还附上了 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屋！