如何在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.

您可以在以下位置提供状态:

You can provide the state in :

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屋！