如何在 nrgx 8 单元测试中模拟选择器? [英] How do I mock selectors in nrgx 8 unit tests?

问题描述

我正在学习使用 Jest 为 ngrx8 应用程序编写单元测试.

I am learning to write unit tests for ngrx8 application using Jest.

我正在测试一个订阅了 ngOnInit 中的选择器的组件:

I am testing a component that has subscription to a selector in ngOnInit:

ngOnInit(): void {
  this.store.pipe(select(someSelector(this.parameter))).subscribe((res: 
    // some logic here
  });
}

在 .spec.ts 文件中，我将 provideMockStore 放在 TestBed 配置中:

In the .spec.ts file I put provideMockStore in TestBed configuration:

TestBed.configureTestingModule({
    // ...
    providers: [
      provideMockStore({
        initialState, // defined somewhere above
        selectors: [
          {
            selector: someSelector('param'),
            value: {a: 'b', c: 'd'}
          }
        ]
      })
    ]
    // ...
}).compileComponents();;

所以我希望在运行这个单元测试时，我应该在组件 .ts 文件中输入订阅(这里的一些逻辑"部分)，res 将等于 {a:'b', c: 'd'}.

So I expect that while running this unit test, I should enter the subscription (the "some logic here" section) in the component .ts file and res will equal {a: 'b', c: 'd'}.

这不会发生，而是忽略模拟选择器并使用真正的选择器.

That doesn't happen, instead mocked selector is ignored and the real one is used.

我尝试过的事情:

• store.overrideSelector(someSelector('param'), {a: 'b', c: 'd')

把fixture.detectChanges()，await fixture.whenStable()，放在不同的地方

现在我没有选择了，NGRX 文档几乎没有涵盖任何内容.

Now I am out of options, and the NGRX documentation doesn't cover almost anything.

推荐答案

模拟选择器似乎不是最好的解决方案.最好模拟商店本身.

Mocking the selector doesn't seem to be the best solution. It would be better to mock the store itself.

您可以提供以下状态:

provideMockStore({ initialState: your_state })

或

mockStore.setState(your_state);

mockStore.setState(...) 允许您在测试中的商店中使用不同的值进行测试.

mockStore.setState(...) allows you to do tests with different value in your store inside your tests.

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

BUT I suggest you do do the following if you have a complex store:

• 创建一个类，您将在其中拥有您的模拟商店状态: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 单元测试中模拟选择器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！