NgRx 8 测试 provideMockStore - 状态切片的 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

正如 xander 所说，您可以使用 mockSelectors。 TS 抱怨的原因是你的打字方式。

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

Answer 2

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

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

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

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

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

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