MemoizedSelector
を使用してreduxストアからアイテムを取得し、アクションのペイロードでmergeMap
を使用する_@Effect
_があります。効果は問題なく機能しますが、select
がインポートされた宣言された関数であるため、セレクターの戻り値をモックできないように見えるため、Jestテストの設定は難しいことが判明しました(from '@ ngrx/store')およびエフェクトで使用され、セレクター自体もインポートされた関数です。今、ストローを掴んでいます。
ユニットテストを作成して、ストアセレクターを利用するNGRX効果をテストするにはどうすればよいですか?
"@ ngrx/store": "^ 7.4.0"、
"rxjs": "^ 6.2.2"
_provideMockStore({
initialState
})
_
provideMockStoreは_'@ngrx/store/testing';
_から取得され、初期状態はmyactualinitialStateと状態の両方でしたそれは私が選択しようとしている正確な構造/アイテムが含まれています
さまざまなSO質問/回答およびさまざまなブログ投稿アプローチからのさまざまなタイプのMockStore
を使用する
<selector>.projector(<my-mock-object>)
を使用してセレクターをモックしようとしています(ここでストローをつかんで、エフェクトではなくselectorの分離テストでこれが使用されると思います)
効果自体:
_@Effect()
getReviewsSuccess$ = this.actions$.pipe(
ofType<ProductActions.GetReviewsSuccess>(
ProductActions.ProductActionTypes.GET_REVIEWS_SUCCESS
),
mergeMap(() => this.reduxStore.pipe(select(selectProduct))),
map(({ product_id }) => product_id),
map(product_id => new ProductActions.GetReviewsMeta({
product_id,
}))
);
_
スペック:
_......
let effects: ProductEffects;
let facade: Facade;
let actions$: Observable<any>;
let store$: Observable<State>;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule,
// ^ I've also tried using StoreModule.forRoot(...) here to configure
// it in similar fashion to the module where this effect lives
],
providers: [
ProductEffects,
provideMockActions(() => actions$),
{
provide: Facade,
useValue: facadeServiceMock,
},
ResponseService,
provideMockStore({
initialState
})
// ^ also tried setting up the test with different variations of initialState
],
});
......
it('should return a GetReviewsMeta on successful GetReviewsSuccess', () => {
const reviews = {...reviewListMock};
const { product_id } = {...productMockFull};
const action = new ProductActions.GetReviewsSuccess({
reviews
});
const outcome = new ProductActions.GetReviewsMeta({
product_id
});
actions$ = hot('-a', { a: action });
// store$ = cold('-c', { c: product_id });
// not sure what, if anything I need to do here to mock select(selectProduct)
const expected = cold('-b', { b: outcome });
expect(effects.getReviewsSuccess$).toBeObservable(expected);
});
_
セレクタselectProduct
:
_export const getProduct = ({product}: fromProducts.State) => product;
export const getProductState = createFeatureSelector<
fromProducts.State
>('product');
export const selectProduct = createSelector(
getProductState,
getProduct,
);
_
テストに合格することを期待していますが、代わりに次のエラーが発生します
_● Product Effects › should return a GetReviewsMeta on successful GetReviewsSuccess
expect(received).toBeNotifications(expected)
Expected notifications to be:
[{"frame": 10, "notification": {"error": undefined, "hasValue": true, "kind": "N", "value": {"payload": {"product_id": 2521}, "type": "[Reviews] Get Reviews Meta"}}}]
But got:
[{"frame": 10, "notification": {"error": [TypeError: Cannot read property 'product_id' of undefined], "hasValue": false, "kind": "E", "value": undefined}}]
_
明らかにMemoizedSelector
(selectProduct)は、ストアにあるべきProductオブジェクトが何であるかを認識していません(しかし、それを持っているinitialState
を挿入するかどうかはわかりません) beforeEach
または仕様自体でこれを正しく設定しなかったため、製品の_product_id
_を取得できません...
ngrx.io のドキュメントでこれを取り上げました。構文はNgRx 8向けですが、NgRx 7についても同じ考え方が重要です。
addBookToCollectionSuccess$ = createEffect(
() =>
this.actions$.pipe(
ofType(CollectionApiActions.addBookSuccess),
withLatestFrom(this.store.pipe(select(fromBooks.getCollectionBookIds))),
tap(([, bookCollection]) => {
if (bookCollection.length === 1) {
window.alert('Congrats on adding your first book!');
} else {
window.alert('You have added book number ' + bookCollection.length);
}
})
),
{ dispatch: false }
);
it('should alert number of books after adding the second book', () => {
store.setState({
books: {
collection: {
loaded: true,
loading: false,
ids: ['1', '2'],
},
},
} as fromBooks.State);
const action = CollectionApiActions.addBookSuccess({ book: book1 });
const expected = cold('-c', { c: action });
actions$ = hot('-a', { a: action });
expect(effects.addBookToCollectionSuccess$).toBeObservable(expected);
expect(window.alert).toHaveBeenCalledWith('You have added book number 2');
});
});
状態がredux devtoolsと同じ構造であることを確認してください。
NgRx 8はセレクターをモックする方法も提供するため、単一のテストで状態ツリー全体を設定する必要はありません- https://next.ngrx.io/guide/store/testing#using-モックセレクター 。
describe('Auth Guard', () => {
let guard: AuthGuard;
let store: MockStore<fromAuth.State>;
let loggedIn: MemoizedSelector<fromAuth.State, boolean>;
beforeEach(() => {
TestBed.configureTestingModule({
providers: [AuthGuard, provideMockStore()],
});
store = TestBed.get(Store);
guard = TestBed.get(AuthGuard);
loggedIn = store.overrideSelector(fromAuth.getLoggedIn, false);
});
it('should return false if the user state is not logged in', () => {
const expected = cold('(a|)', { a: false });
expect(guard.canActivate()).toBeObservable(expected);
});
it('should return true if the user state is logged in', () => {
const expected = cold('(a|)', { a: true });
loggedIn.setResult(true);
expect(guard.canActivate()).toBeObservable(expected);
});
});