如何在nrgx 8单元测试中模拟选择器？

2024-05-04 • 问答

我正在学习使用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(...)允许您在测试中的商店中进行具有不同价值的测试。

但是如果您有一家复杂的商店，建议您执行以下操作：

创建一个类，其中将具有您的模拟存储状态：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.
   })
}

如何在nrgx 8单元测试中模拟选择器？

zhou341000 回答：如何在nrgx 8单元测试中模拟选择器？

大家都在问