Angular testbed 测试路由找不到模块

Question

我正在尝试使用 TestBed 测试一个简单的重定向，但一直看到以下错误：

Error: Uncaught (in promise): Error: Cannot find module ./pages/login/login.module#LoginPageModule

我的测试如下：

describe('AppComponent', () => {

  let statusBarSpy, splashScreenSpy, platformReadySpy, platformSpy, platformIsSpy, storageSpy;
  let router: Router;
  let location: Location;
  let fixture, loginFixture;
  let comp: AppComponent;

  beforeEach(async(() => {
    statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']);
    splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']);
    platformReadySpy = Promise.resolve();
    platformIsSpy = Promise.resolve('ipad');
    platformSpy = jasmine.createSpyObj('Platform', { ready: platformReadySpy, is: platformIsSpy })
    storageSpy = jasmine.createSpyObj('Storage', ['get', 'set', 'clear', 'remove', 'ready']);

    TestBed.configureTestingModule({
      declarations: [AppComponent],
      imports: [

        IonicStorageModule.forRoot(),
        HttpClientTestingModule,
        LoginPageModule,
        RouterTestingModule.withRoutes(routes),

      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      providers: [
        { provide: Storage, useClass: StorageMock },
        { provide: StatusBar, useValue: statusBarSpy },
        { provide: SplashScreen, useValue: splashScreenSpy },
        { provide: Platform, useValue: platformSpy },
      ],
    }).compileComponents();

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

  it('navigates to "" redirects you to /login', fakeAsync(() => {
    router.navigate(['/login']);
    tick();
    expect(location.path()).toBe('/login')
  }));
});

而我在 app-routing.module.ts 中的路线是：

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'login', 
    loadChildren: './pages/login/login.module#LoginPageModule'
    // component: LoginPage
  },
  {
    path: 'manager-dashboard',
    canActivate: [AuthGuard],
    loadChildren: './pages/manager-dashboard/manager-dashboard.module#ManagerDashboardPageModule'
  },
];

而我的LoginPageModule是：

const routes: Routes = [
  {
    path: '',
    component: LoginPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [LoginPage]
})
export class LoginPageModule {}

我需要做些什么才能完成这项工作吗？

Answer 1

您需要在测试时清除延迟加载的模块。在 beforeEach 函数中添加以下行：-

const loader = TestBed.get(NgModuleFactoryLoader);

然后在您的测试用例中，在导航代码之前添加：-

loader.stubbedModules = {lazyModule: LoginPageModule};

例如：

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

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

it('navigates to "" redirects you to /login', fakeAsync(() => {
    const loader = TestBed.get(NgModuleFactoryLoader);

    loader.stubbedModules = {
       './pages/login/login.module#LoginPageModule': LazyModule,
    };

    router.navigate(['/login']);
    tick();
    expect(location.path()).toBe('/login')
}));

有关更多详细信息，您可以在此处阅读有关测试延迟加载模块的信息：- https://angular.io/api/router/testing/SpyNgModuleFactoryLoader https://github.com/angular/angular/issues/17902

希望对您有所帮助。

Angular testbed 测试路由找不到模块

Angular testbed testing route cannot find module

testbed

angular