TestBed TypeError：无法读取未定义的属性“导航”答案

【问题标题】：TestBed TypeError: Cannot read property 'navigate' of undefinedTestBed TypeError：无法读取未定义的属性“导航”
【发布时间】：2019-09-06 08:24:15
【问题描述】：

我正在尝试执行简单的路由单元测试，但是

TypeError: Cannot read property 'navigate' of undefined

被抛出。

我正在学习这样的教程

https://codecraft.tv/courses/angular/unit-testing/routing/

这是我的实现：

路线：

export const routes: Routes = [
  {path: '', pathMatch: 'full', redirectTo: 'welcome'},
  {path: 'welcome', component: WelcomeComponent},
  {path: 'offer', loadChildren: () => import('./customer-dashboard/customer-dashboard.module').then(mod => mod.CustomerDashboardModule)},
  {path: 'underConstruction', component: UnderDevelopmentComponent}
];

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

和单元测试：

fdescribe('AppRoutingModule', () => {

    let location: Location;
    let router: Router;
    let fixture;


    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [
                RouterTestingModule.withRoutes(routes),
                WelcomeModule
            ],
            declarations: [
                AppComponent,
            ],
            providers: [
                Location
            ]
        }).compileComponents()
            .then(() => {
                router = TestBed.get(Router);
                location = TestBed.get(Location);
                fixture = TestBed.createComponent(AppComponent);
                router.initialNavigation();
            })

    });

    it('should navigate from empty path to welcome', fakeAsync(() => {
        router.navigate(['']);
        tick();
        expect(location.path()).toBe('/welcome');
    }))

})

这里没什么特别的，这只是基本设置。看起来 TestBed 无法实现。有任何想法吗？老实说，我在另一个简单的项目中也有相同的实现，它在那里工作得很好，但在这里..

【问题讨论】：

标签： angular unit-testing jasmine karma-runner testbed

【解决方案1】：

鉴于compileComponents 是一个异步进程，then 部分中的所有内容都会在您的测试运行后运行。

尝试重构为：

fdescribe('AppRoutingModule', () => {

    let location: Location;
    let router: Router;
    let fixture;


    beforeEach(async () => {
        await TestBed.configureTestingModule({
            imports: [
                RouterTestingModule.withRoutes(routes),
                WelcomeModule
            ],
            declarations: [
                AppComponent,
            ],
            providers: [
                Location
            ]
        }).compileComponents();

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

    it('should navigate from empty path to welcome', fakeAsync(() => {
        router.navigate(['']);
        tick();
        expect(location.path()).toBe('/welcome');
    }));
})

【讨论】：