使用模拟商店时如何在ngxs中模拟@Select

Posted 2023-02-19

【中文标题】使用模拟商店时如何在ngxs中模拟@Select

【英文标题】：How to mock @Select in ngxs when using a mock store

【发布时间】：2018-12-07 11:36:58

【问题描述】：

我正在使用 ngxs 进行角度状态处理，并且我正在尝试将我们的组件作为单元进行测试，因此最好只使用模拟存储、状态等。

我们的组件中的内容类似于：

export class SelectPlatformComponent 

  @Select(PlatformListState) platformList$: Observable<PlatformListStateModel>;

  constructor(private store: Store, private fb: FormBuilder) 
    this.createForm();
    this.selectPlatform();
  

  createForm() 
    this.selectPlatformForm = this.fb.group(
      platform: null,
    );
  

  selectPlatform() 
    const platformControl = this.selectPlatformForm.get('platform');
    platformControl.valueChanges.forEach(
      (value: Platform) => 
        console.log("select platform " + value);
        this.store.dispatch(new PlatformSelected(value));
      
    );
  

我们的夹具设置如下所示，因此我们可以在商店中查看调用情况：

describe('SelectPlatformComponent', () => 
  let component: SelectPlatformComponent;
  let fixture: ComponentFixture<SelectPlatformComponent>;
  let store: Store;

  beforeEach(async(() => 
    const storeSpy = jasmine.createSpyObj('Store', ['dispatch']);
    TestBed.configureTestingModule(
      imports: [ReactiveFormsModule],
      declarations: [SelectPlatformComponent],
      providers: [provide: Store, useValue: storeSpy]

    )
      .compileComponents();
    store = TestBed.get(Store);
  ));

但是当我们运行这个时，我们得到以下错误：

Error: SelectFactory not connected to store!
    at SelectPlatformComponent.createSelect (webpack:///./node_modules/@ngxs/store/fesm5/ngxs-store.js?:1123:23)
    at SelectPlatformComponent.get [as platformList$] (webpack:///./node_modules/@ngxs/store/fesm5/ngxs-store.js?:1150:89)
    at Object.eval [as updateDirectives] (ng:///DynamicTestModule/SelectPlatformComponent.ngfactory.js:78:87)
    at Object.debugUpdateDirectives [as updateDirectives] (webpack:///./node_modules/@angular/core/fesm5/core.js?:11028:21)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:10425:14)
    at callViewAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:10666:21)
    at execComponentViewsAction (webpack:///./node_modules/@angular/core/fesm5/core.js?:10608:13)
    at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:10431:5)
    at callWithDebugContext (webpack:///./node_modules/@angular/core/fesm5/core.js?:11318:25)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (webpack:///./node_modules/@angular/core/fesm5/core.js?:10996:12)

我可以为此启用整个 ngxs 模块，但是我需要创建服务模拟来注入状态对象，我不喜欢这样，因为我不再单独测试组件。我试图创建一个模拟 SelectFactory，但它似乎没有从模块中导出。

有没有办法模拟 SelectFactory，或者直接将一些模拟注入到 platformList$ 中？其他建议？

【参考方案1】：

我遇到了同样的问题，并通过从提供程序数组中删除 Store 提供程序并进行了配置来解决它：

TestBed.configureTestingModule(
        imports: [NgxsModule.forRoot([MyState])],
);

【讨论】：

感谢您的建议，但正如我在上一段中所说，这不是我想要的，因为那时我需要开始在状态类中模拟东西，我想在完全隔离。

【参考方案2】：

我偶然发现了同样的问题，我发现仅使用 Angular 的 DI 机制是不可能的。不过，可以通过创建实际实例然后像这样模拟它：

beforeEach(async(() => 
   TestBed.configureTestingModule(
      declarations: [MyComponent]
      imports: [NgxsModule.forRoot([])] // import real module without state
   );

   const store:Store = TestBed.get(Store);
   spyOn(store, 'select').and.returnValue(of(null)); // be sure to mock the implementation here
   spyOn(store, 'selectSnapshot').and.returnValue(null); // same here
));

如果您在组件中使用记忆选择器（例如@Select(MyState.selector)），请务必始终模拟商店的选择功能。如果你不这样做，NGXS 将尝试实例化类MyState，不管它没有提供给NgxsModule.forRoot([])。这在很多情况下都不是问题，但只要您在 MyState 的构造函数中拥有依赖项（Angular DI 依赖项），您还需要将这些依赖项提供给 providers 数组。

【讨论】：

如果你有多个 store.selectSnapshot 或 store.select 使用记忆选择器怎么办？你知道这是否可以实现吗？

我认为您可以使用.and.callFake() 并根据您的回调返回值。这应该可以解决问题。

谢谢。我最终找到了替代方案。由于我使用的是 jest，我不得不使用.mockImplementation()，它接收一个函数。但是，我使用的外观模式允许我嵌套选择器，这使得模拟的实现非常广泛。另一种方法是使用store.reset( ... )，它允许我传递一个模拟我需要的状态的对象。也许这可以帮助原始问题:)

当然，

store.reset() 应该也能正常工作！我们目前在大多数测试用例中都使用它——但它并不能防止在使用记忆选择器时意外实例化原始状态对象（这就是我不推荐它的原因）。如果它对你有用，它仍然是绝对有效的！ :)