ngrx가있는 각도 2 구성 요소 - 유닛 테스트 실행시 오류가 있습니다.

Question

ngrx (Redux 논리의 경우) 및 rxjs (관찰 가능)를 사용하여 각도 2 프로젝트에서 작업하고 있습니다.

이제 자동 생성 .spec.ts 파일을 실행하여 프로젝트를 테스트하려고합니다.

일부 테스트는 실패하며 모두 Store (ngrx의)를 사용하는 구성 요소를 테스트하고 있습니다. 다음은 그 중 하나입니다

import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 
import { By } from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 

import { MyComponent } from './overlay-menu-item.component'; 

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

beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
    declarations: [ MyComponent ], 
    }) 
    .compileComponents(); 
})); 

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

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

내가 문제 보살, 오류 :

No provider to Store

그래서 나는 추가 : 이제

beforeEach(async(() => { 
TestBed.configureTestingModule({ 
    declarations: [ MyComponent ], 
    providers: [Store] 
}) 
.compileComponents(); 
})); 

(I 테스트를 위해 자스민를 사용) 다른 오류가 있습니다 :

No provider for StateObservable

beforeEach(async(() => { 
TestBed.configureTestingModule({ 
    declarations: [ MyComponent ], 
    providers: [Store, StateObservable] 
}) 
.compileComponents(); 
})); 

을하지만 지금은 내가 그것으로 무엇을 모르는 새로운 오류 가지고 :그래서 나는 추가

Failed: Can't resolve all parameters for StateObservable: (?). 
    Error: Can't resolve all parameters for StateObservable: (?). 
     at syntaxError [mywebprojectPath]/node_modules/@angular/compiler/@angular/compiler.es5.js:1689:22) 

어떻게해야합니까를?

Answer 1

MockStore을 만들어야합니다. 한마디로

:

const initialState = {...}; 
TestBed.configureTestingModule({ 
    ... 
    providers:[ 
    {provide:Store, useValue: new MockStore(initialState)} 
    ] 
    ... 
}) 

:

이

import { Action } from '@ngrx/store'; 
import { Observable } from 'rxjs/Observable'; 
import { Subject } from 'rxjs/Subject'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 
import { map } from 'rxjs/operator/map'; 

export class MockStore<T> extends BehaviorSubject<T> { 
    constructor(private _initialState: T) { 
    super(_initialState); 
    } 
    dispatch = (action: Action): void => { 
    } 

    select = <T, R>(pathOrMapFn: any, ...paths: string[]): Observable<R> => { 
    return map.call(this, pathOrMapFn); 
    } 

}

그럼 당신은 당신이 시험에 mockStore를 제공 ​​할 수 있습니다