爲@select NG-終極版Jamine單元測試錯誤

Question

我component.ts文件看起來像下面

import { Component, OnInit } from '@angular/core'; 
import { select } from 'ng2-redux'; 
import { Observable } from 'rxjs/Observable'; 
import { PersonalDetailsComponent } from '../personal-details/personal-details.component' 

@Component({ 
    selector: 'app-profile-details', 
    templateUrl: './profile-details.component.html' 
}) 
export class ProfileDetailsComponent implements OnInit { 

    @select(['customerData', 'personalDetails'])personalDetails:Observable<object>; //<------if i comment out @select statement, then the tests work 
    @select(['loading']) loading: Observable<boolean>;//<------if i comment out @select statement, then the tests work 

    constructor() { } 

    ngOnInit() { } 

} 

我的茉莉花測試看起來像這樣

import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 
import { NgRedux, select } from 'ng2-redux'; 
import { ProfileDetailsComponent } from './profile-details.component'; 
import { customerData } from '../data/customerProfileDataMock'; 
import { PersonalDetailsComponent } from '../personal-details/personal-details.component' 
import { Router } from '@angular/router'; 
import { Observable } from 'rxjs/Observable'; 

class RouterStub { navigate(params) { } } 
class MockSelect { } 
class MockObservable<T> {} 
class NgReduxStub { 
    constructor() { } 
    dispatch =() => undefined; 
    getState =() => { return customerData; }; 
    subscribe =() => undefined; 
} 

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

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ProfileDetailsComponent, PersonalDetailsComponent], 
     providers: [ 
     { provide: Router, useClass: RouterStub }, 
     { provide: select, useClass: MockSelect }, 
     { provide: NgRedux, useClass: NgReduxStub }, 
     { provide: Observable, useClass: MockObservable } 
     ], 
    }) 
     .compileComponents(); 
    })); 

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

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

}); 

不知道什麼缺失，但@ SELECT語句是沒有得到嘲笑和提示以下錯誤：當我如果使用命令測試「NG測試」

TypeError: ng_redux_1.NgRedux.instance is undefined in src/test.ts 

Answer 1

不知道跑正在使用與我相同的軟件包，但我注意到npm上的ng2-redux（https://www.npmjs.com/package/ng2-redux）鏈接到github存儲庫https://github.com/angular-redux/store，因此可能有一些分支合併。

如果是這樣，我會建議給你一個更新包。他們最近添加MockNgRedux，您可以添加到您的測試與

import { NgReduxTestingModule, MockNgRedux } from '@angular-redux/store/testing'; 

這是加入到測試牀與

beforeEach(() => { 
    TestBed.configureTestingModule({ 
    imports: [ 
     NgReduxTestingModule, 
    ], 

，可以用來測試其通過在特定選擇設置值使用@select()組件與

const stub = MockNgRedux.getSelectorStub(selector); 
stub.next(values); 
stub.complete(); 

注意方法是靜態的，不需要MockNgRedux的實例。

一定要測試之間清除下來的模擬店

beforeEach(() => { 
    MockNgRedux.reset(); 
});