NgRx 8 测试 provideMockStore - State Slice 的 setState

Question

我的 NgRx 实现有一个智能组件测试，看起来像这样：

describe( 'Component', () => {
  let store: MockStore<State>;

  beforeEach( async( () => {
    TestBed.configureTestingModule( {
        /* ... */
        providers: [
            provideMockStore( { initialState: fromReducer.initialState } )
        ]
    } ).compileComponents();
    store = TestBed.get<Store<State>>( Store );
  } ) );

  it( 'should load items in #ngOnInit', () => {
    store.setState( {
        item: {
          ...fromReducer.initialState,
          entities: { [item.id]: item },
        },
        otherFeature: null,
        otherFeature: null,
        otherFeature: null
    } );
    component.items$.subscribe( items =>
        store.select( ItemStoreSelectors.selectItems ).subscribe( fromStore => expect( items ).toEqual( fromStore ) )
    );
  } );
});

我使用 provideMockStore 和 setState 来模拟我的 NgRx 状态。这样一切都很好，但我真的不喜欢它的这一部分：

store.setState( {
    item: {
      ...fromReducer.initialState,
      entities: { [item.id]: item },
    },
    otherFeature: null,
    otherFeature: null,
    otherFeature: null
} );

我必须将我所在州的所有其他特征切片添加到 setState 函数中。否则 Typescript 会抛出错误。

所以最好我不想设置根状态，而是像这样的特定特征切片：

store.setState( {
  ...fromReducer.initialState,
  entities: { [item.id]: item },
} );

我找不到关于如何将 provideMockStore 用于状态 here 的特定切片的任何文档。

Answer 1

我建议在这里采用不同的方法。您应该做的是独立地对您的选择器和组件进行单元测试。

NgRx 8 允许 mock selectors。在您的组件中使用它来验证组件的逻辑是否正确。

然后，独立地对您的选择器进行单元测试，以验证您的选择器是否按预期工作。

这样测试是独立的，不脆弱的，真正的单元测试。

编辑：我链接的文档是官方文档，但另一种模拟选择器的方法是：

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        provideMockStore({
          selectors: [
            {
              selector: yourSelectorNameHere,
              value: someMockValueHere
            }
          ]
        })
      ]
    });

Answer 2

正如 xander 提到的，您可以使用 mockSelectors。 TS抱怨的原因是你输入的方式。

MockStore<State> 可能是你的整个状态树，对于一个特征切片，使用 MockStore<FeatureState>

NgRx 8 测试 provideMockStore - State Slice 的 setState

NgRx 8 Test provideMockStore - setState for State Slice

angular

typescript

ngrx

ngrx-store

angular-test