我正在学习使用Jest为ngrx8应用程序编写单元测试。
我正在测试已订阅ngOnInit中的选择器的组件:
ngOnInit(): void {
this.store.pipe(select(someSelector(this.parameter))).subscribe((res:
// some logic here
});
}
在.spec.ts文件中,我将provideMockStore
放在了TestBed配置中:
TestBed.configureTestingModule({
// ...
providers: [
provideMockStore({
initialState, // defined somewhere above
selectors: [
{
selector: someSelector('param'),
value: {a: 'b', c: 'd'}
}
]
})
]
// ...
}).compileComponents();;
因此,我希望在运行此单元测试时,我应该在组件.ts文件中输入预订(“此处有一些逻辑”部分,并且res
等于{a: 'b', c: 'd'}
。
不会发生,而是会忽略模拟的选择器,而使用实际的选择器。
我尝试过的事情:
store.overrideSelector(someSelector('param'), {a: 'b', c: 'd')
将fixture.detectChanges()
,await fixture.whenStable()
放在不同的位置
现在我没有选择权了,NGRX documentation几乎不涵盖任何内容。
模拟选择器似乎不是最佳解决方案。最好模拟商店本身。
您可以在以下位置提供状态:
provideMockStore({ initialState: your_state })
或
mockStore.setState(your_state);
mockStore.setState(...)
允许您在测试内部的商店中执行具有不同价值的测试。
BUT如果您有一家复杂的商店,我建议您执行以下操作:
MockStoreState
。
type RecursivePartial<T> = {
[P in keyof T]?:
T[P] extends (infer U)[] ? RecursivePartial<U>[] :
T[P] extends object ? RecursivePartial<T[P]> :
T[P];
};
export class MockStoreState {
private store_a: RecursivePartial<Store_A>;
private store_b: RecursivePartial<Store_b>;
build(): any {
const defaultStore_a = {
...
};
const defaultStore_b = {
...
};
return {
store_a: { ...defaultStore_a , ...this.store_a},
store_b: { ...defaultStore_b , ...this.store_b },
};
}
setStore_a(value: RecursivePartial<Store_A>): Store_A_State {
this.store_a= value;
return this;
}
setStore_b(value: RecursivePartial<DatasourceState>): Store_B_State {
this.store_b= value;
return this;
}
}
describe(MyComponent.name, () => {
...
let mockStore: MockStore<any>;
beforeEach(() => {
...
mockStore = TestBed.get(Store);
})
it('...', () => {
const state = new MockStoreState().setStore_a({...})
.build();
mockStore.setState(state);
// HERE you have set the data in your store.
})
}