单元测试延迟加载模块路由答案

【问题标题】：Unit testing lazy loaded modules routing单元测试延迟加载模块路由
【发布时间】：2020-06-01 09:23:18
【问题描述】：

我在路由单元测试方面遇到了一些问题。我试过this 解决方案，但是这个延迟加载符号现在是deprecated，所以我的测试由于某种原因失败了。有人可以给我建议我的代码可能有什么问题吗？

app-routing.module.ts：

export const routes: Routes = [
{path: 'about', component: AboutComponent},
{path: 'files', loadChildren: () => import('./files/files.module').then(m => m.FilesModule)}, 
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

app-routing.module.spec.ts：

describe('AppRoutingModule', () => {
   let location: Location;
   let router: Router;
   let fixture;

   beforeEach(() => {
   TestBed.configureTestingModule({
       imports:[
           RouterTestingModule.withRoutes(routes),
           HttpClientModule,
           AboutComponent,
       ],
       declarations: [
           AppComponent,
           FilesComponent,
       ],
       providers: [{provide: APP_BASE_HREF, useValue: '/'}]
   })

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

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

   it('should navigate to files', fakeAsync(() => {
       const loader = TestBed.get(NgModuleFactoryLoader);
       loader.stubbedModules = {lazyModule : FilesModule }

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

       router.navigate(['files']);
       tick(50);
       fixture.detectChanges();

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

谢谢！

【问题讨论】：

标签： angular typescript unit-testing jasmine lazy-loading

【解决方案1】：

你试过了吗：

router.resetConfig([
  { path: 'files', loadChildren: () => Promise.resolve(FilesModule) },
 ]);

或者在这一点上它可能只是一个间谍

const spy = jasmine.createSpy('loadChildren');
...
router.resetConfig([
  { path: 'files', loadChildren: spy  },
 ]);
...
expect(spy).toHaveBeenCalled();

没有测试，所以不知道它是否会工作。

【讨论】：

很遗憾，这不起作用。更准确地说，测试似乎通过了，但在覆盖范围内不可见
这取决于您希望在报道中看到什么。这仅描述如何模拟单元测试的路由。如果您想要集成测试，最好在 e2e 级别进行覆盖。
只是业力代码覆盖率抱怨测试未涵盖导入。因此，我的声纳报告中也显示了相同的内容。
您是否尝试从单元测试中过滤路由文件？就像在这里添加一些过滤：``` context.keys().forEach(require.context('../', true, /^\.[\/\](app|somsubapp).*\.spec\. ts$/));```
但是我的 Auth Guards 也会被过滤，对吧？

【解决方案2】：

您可以使用SpyNgModuleFactoryLoader 代替NgModuleFactoryLoader。

const loader = TestBed.get(SpyNgModuleFactoryLoader);
   loader.stubbedModules = {lazyModule : FilesModule }

【讨论】：