angular - NgRX provideMockStore createSelector 状态未定义
问题描述
使用提供 mockStore 时,我的功能/选择器函数仅将状态视为未定义。
因此,我只能模拟选择器,因此无法执行更完全集成的测试。
当模拟商店提供状态时,选择器不应该看到状态还是应该这样做?
创建模拟商店
TestBed.configureTestingModule({
providers: [
AuthGuardGuard,
provideMockStore({
initialState: { ...initialState },
}),
],
});
然后记录选择器应该看到的状态,这是未定义的。
export const currentUser = createSelector(
authRootFeature,
(state: fromAuthRoot.State) => {
console.log(state); // Undefined
return state.auth.currentUser;
}
);
解决方案
MockStore 应该设置状态,我将与您分享两个有效的实现,您可以选择您喜欢的一个,您的问题中缺少信息,因此很难指出为什么这对您不起作用。
这是一个:
我的选择器:
export const selectFeature = createFeatureSelector<State, FeatureState>('feature');
export const getFeatureProperty = createSelector(
selectFeature,
(state) => state.featureProperty
);
我的测试文件:
describe('MyComponent', () => {
let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;
let mockStore: MockStore<State>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [LogsMenuViewComponent, LogsMenuViewDropdownComponent],
providers: [provideMockStore({ initialState: { feature: { featureProperty: 123 } } as State })],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MyComponent);
mockStore = TestBed.inject(Store) as MockStore<State>;
component = fixture.componentInstance;
fixture.detectChanges();
});
});
之所以可行,是因为我的选择器使用了一个特性选择器,因此它能够正确获取状态。
另一个可能对您有用的实现是覆盖选择器,如下所示:
describe('selectors', () => {
let mockShowsSelector;
beforeEach(() => {
mockShowsSelector = store.overrideSelector(selectFavoriteShows, [{
id: 3,
name: 'C',
description: 'Show C',
imgUrl: '',
isFavorite: true
}]);
fixture.detectChanges();
});
it('should render all favorite shows', () => {
expect(fixture.debugElement.queryAll(By.css('.mat-card')).length).toBe(1);
});
it('should update the UI when the selector changes', () => {
mockShowsSelector.setResult([ // overide selector
{
id: 1,
name: 'A',
description: 'Show A',
imgUrl: '',
isFavorite: true
},
{
id: 2,
name: 'B',
description: 'Show B',
imgUrl: '',
isFavorite: true
}
]);
store.refreshState();
fixture.detectChanges();
expect(fixture.debugElement.queryAll(By.css('.mat-card')).length).toBe(2);
});
})
推荐阅读
- firebase - 用于 SDK 更改的 Firebase RSS 提要
- python-3.x - Python3 导入 - 运行本地与来自 pip 差异
- python - 如何安装模块'keras'?
- powershell - 在PowerShell中建立域和工作组计算机之间的远程连接
- typescript - 打字稿:更新一个类属性会自动导致另一个更新
- python-3.x - Python内存相关和时间消耗相关
- c# - .NET Core 2.1 上的 AWS Secrets Manager GetSecretValueAsync 上的套接字异常
- python - 如何在 Flask 中使用带有“start_background_task”的块功能?
- java - 上传Pdf文件未在android中转换为base64
- java - SimpleJdbcRespository 实例化的我的存储库接口如何以及在哪里?