角度4單元測試 - 無法讀取未定義的屬性「根」

Question

我的單元測試出現問題。我不知道這個測試有什麼問題。我搜索了一個資源，但沒有任何適合我的作品。當我想模擬路由器時，我有一個錯誤TypeError: Cannot read property 'root' of undefined。 感謝advace尋求幫助。

錯誤：

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（[]）。

希望這會有所幫助。