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',isFavorite: true
        },{
          id: 2,name: 'B',description: 'Show B',isFavorite: true
        }
      ]);
      store.refreshState();
      fixture.detectChanges();
      expect(fixture.debugElement.queryAll(By.css('.mat-card')).length).toBe(2);
    });
  })

angular angular-test ngrx