NgRx：如何模拟存储选择函数以返回不同的值

问题描述

我在我的角度应用程序中使用NgRx Store进行状态管理。

在init函数中，我通过如下选择器初始化数据：

 ngOnInit() { 
  this.store.select(getData1).subscribe((result) => { 
     this.data1 = result; 
  });
  this.store.select(getData2).subscribe((result) => { 
     this.data2 = result; 
  });
}

在测试案例中，我嘲笑了商店并进行了如下检查：

 let storeMock = {
    select(): Observable<any> {
      return of([{key:'data1',value:'data1'}])
    }
}



beforeAll(async(() => {
    Testbed.configureTestingModule({
     providers:[{ provide: Store,useValue: storeMock }]
   });

测试用例：

it('ngOnInit',() => {
    component.ngOnInit();
    expect(component.data1.key).toBe('data1');
    expect(component.data2.key).toBe('data2'); // in both cases it returns data1 as we have mocked only data 1
});

这里的问题是我从select模拟了Store方法，但是每次我都无法返回不同的值，因为我在ngOnInit中两次调用了选择器，但是由于模拟了它带有数据的两个选择器返回相同的数据。

有什么办法，我可以在不同的时间返回不同的模拟数据（通过某些参数或调用选择器的顺序，例如第一次返回不同的数据，第二次返回不同的数据）

解决方法

请考虑使用@ngrx/store/testing中的测试实用程序。

let mockStore: MockStore<MyState>;

beforeEach(() => {
  TestBed.configureTestingModule({
    providers: [
      provideMockStore(),],});

  mockStore = TestBed.get(Store);
  mockStore.overrideSelector(getData1,{key:'data1',value:'data1'});
  mockStore.overrideSelector(getData2,{key:'data2',value:'data2'});
}