角度4単位テスト - 未定義のプロパティ 'root'を読み取ることができません

Question

私のユニットテストに問題があります。このテストで何が問題なのか分かりません。私は魂を捜しましたが、何も私のために働きません。ルータを模擬したいときにエラーTypeError: Cannot read property 'root' of undefinedがあります。 アドバイスをいただきありがとうございます。

エラー：

TypeError: Cannot read property 'root' of undefined 
     at rootRoute (webpack:///~/@angular/router/@angular/router.es5.js:5880:0 <- src/test.ts:53760:30) 
     at DynamicTestModuleInjector.get (ng:///DynamicTestModule/module.ngfactory.js:401:75) 
     at DynamicTestModuleInjector.getInternal (ng:///DynamicTestModule/module.ngfactory.js:919:55) 
     at DynamicTestModuleInjector.NgModuleInjector.get (webpack:///~/@angular/core/@angular/core.es5.js:3556:25 <- src/test.ts:3909:44) 
     at resolveDep (webpack:///~/@angular/core/@angular/core.es5.js:11017:0 <- src/test.ts:11370:45) 
     at createClass (webpack:///~/@angular/core/@angular/core.es5.js:10881:0 <- src/test.ts:11234:32) 
     at createDirectiveInstance (webpack:///~/@angular/core/@angular/core.es5.js:10701:21 <- src/test.ts:11054:37) 
     at createViewNodes (webpack:///~/@angular/core/@angular/core.es5.js:12064:33 <- src/test.ts:12417:49) 
     at createRootView (webpack:///~/@angular/core/@angular/core.es5.js:11969:0 <- src/test.ts:12322:5) 
     at callWithDebugContext (webpack:///~/@angular/core/@angular/core.es5.js:13184:25 <- src/test.ts:13537:42) 
     at Object.debugCreateRootView [as createRootView] (webpack:///~/@angular/core/@angular/core.es5.js:12644:0 <- src/test.ts:12997:12) 
     at ComponentFactory_.create (webpack:///~/@angular/core/@angular/core.es5.js:9890:25 <- src/test.ts:10243:46) 
     at initComponent (webpack:///~/@angular/core/@angular/core/testing.es5.js:800:0 <- src/test.ts:55130:49) 
     at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:365:0 <- src/test.ts:151874:26) 
     at ProxyZoneSpec.onInvoke (webpack:///~/zone.js/dist/proxy.js:79:0 <- src/test.ts:118466:39) 
     at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:364:0 <- src/test.ts:151873:32) 
    TypeError: Cannot read property 'form' of undefined 
     at updateForm (webpack:///src/app/auth/login/login.component.spec.ts:62:14 <- src/test.ts:64296:18) 
     at Object.<anonymous> (webpack:///src/app/auth/login/login.component.spec.ts:88:4 <- src/test.ts:64316:9) 
     at Object.<anonymous> (webpack:///~/@angular/core/@angular/core/testing.es5.js:336:0 <- src/test.ts:54666:26) 
     at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:365:0 <- src/test.ts:151874:26) 
     at ProxyZoneSpec.onInvoke (webpack:///~/zone.js/dist/proxy.js:79:0 <- src/test.ts:118466:39) 
     at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:364:0 <- src/test.ts:151873:32) 
     at Zone.run (webpack:///~/zone.js/dist/zone.js:125:0 <- src/test.ts:151634:43) 
     at Object.<anonymous> (webpack:///~/zone.js/dist/jasmine-patch.js:104:0 <- src/test.ts:118180:34) 
     at webpack:///~/@angular/core/@angular/core/testing.es5.js:96:0 <- src/test.ts:54426:17 
     at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:365:0 <- src/test.ts:151874:26) 
     at AsyncTestZoneSpec.onInvoke (webpack:///~/zone.js/dist/async-test.js:49:0 <- src/test.ts:117775:39) 

テスト方法：

onSubmit(): void { 
const payload = this.form.value; 
this.form.reset(); 
this.form.disable(); 

this.authService.login(payload) 
    .finally(() => { 
    this.form.enable(); 
    }) 
    .subscribe(
    ({ res }) => { 
     if (typeof res.cmp === 'undefined' || typeof res.rel === 'undefined') { 
     this.router.navigate(['test']); 
     } else { 
     this.router.navigate([this.returnUrl]); 
     } 
    }, 
    ({ sts }) => { 
     this.dialogService.alert({ 
     title: 'Error', 
     message: `${backendMessage(sts, false)}` 
     }); 
    } 
); 

}

ユニットテスト：

const mockUser = { 
    email: 'test@test.test', 
    password: 'Test1235', 
    remember: true 
}; 

const mockInvalidUser = { 
    email: null, 
    password: null, 
    remember: true 
}; 

@Injectable() 
class AuthServiceMock { 

    login(payload: any): Observable<BackendResponse<Auth>> { 
    let sessionObj: BackendResponse<Auth> = { sts: null, res: { cmp: null, rel: null, prs: null } }; 
    return Observable.of(sessionObj); 
    } 
} 

const router = { 
    navigate: jasmine.createSpy('navigate') 
}; 

describe('LoginComponent',() => { 
    let component: LoginComponent; 
    let fixture: ComponentFixture<LoginComponent>; 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     imports: [AuthModule, AppModule], 
     providers: [ 
     ExtendedFormBuilder, 
     { provide: AuthService, useClass: AuthServiceMock }, 
     { provide: Router, useValue: router } 
     ], 
    }).compileComponents(); 
    })); 

    beforeEach(() => { 
    fixture = TestBed.createComponent(LoginComponent); 
    component = fixture.componentInstance; 
    fixture.detectChanges(); 
    }); 

    function updateForm(userEmail: string, userPassword: string): void { 
    component.form.controls['prs.email'].setValue(userEmail); 
    component.form.controls['prs.passwd'].setValue(userPassword); 
    } 

    it('should create',() => { 
    expect(component).toBeTruthy(); 
    }); 

    it('return url should have a default value',() => { 
    expect(component.returnUrl).toBeTruthy(); 
    }); 

    it('check form controls values after update', fakeAsync(() => { 
    updateForm(mockUser.email, mockUser.password); 
    expect(component.form.controls['prs.email'].value).toEqual(mockUser.email); 
    expect(component.form.controls['prs.passwd'].value).toEqual(mockUser.password); 
    })); 

    it('check if the form is valid after set incorrect values', fakeAsync(() => { 
    updateForm(mockInvalidUser.email, mockInvalidUser.password); 
    expect(component.form.valid).toBeFalsy(); 
    })); 

    fit('should update model on submit', fakeAsync(() => { 
    updateForm(mockUser.email, mockUser.password); 
    component.onSubmit(); 
    expect(router.navigate).toHaveBeenCalledWith(['./']); 
    })); 
}); 

Answer 1

私は誤解される可能性があり、それは似ていませんあなたはtで何かをしている彼は実際のテンプレート自体です。したがって、この予定を取得する最も簡単な方法は、単に「角度/コア@」からNO_ERROR_SCHEMAをインポート、および/場合は、あなたもポイントを取得するとき今

providers: [...], 
schemas: [NO_ERROR_SCHEMA] 

としてあなたのテストベッドの設定でそれを提供することですテンプレートをテストしたい場合は、いくつかのオプションがあります。 angular test projectに示すように、いくつかのルータスタブを提供できます。それらはテストフォルダの下にあります。それらを使用してテストベッド宣言に入れてください。それは少なくともルーティングの問題を解決するはずです。また、独自のスタブを作成することもできます。または、RouterTestingModule.withRoutes（[]）を構成することもできます。

これが役に立ちます。