组件中的 NGRX 实体测试答案

【问题标题】：NGRX Entity test in component组件中的 NGRX 实体测试
【发布时间】：2019-05-15 15:30:22
【问题描述】：

我在 ngOnInit 中有一个带有实体选择器“selectAllProperties”的组件，我想测试这个组件：

ngOnInit() {
    this.store.dispatch(new LoadPropertiesRequested());
    this.properties$ = this.store.pipe(select(selectAllProperties));
    this.loading$ = this.store.pipe(select(selectPropertiesLoading));
    this.logs$ = this.store.pipe(select(selectPropertiesLogs));
  }

在我的规范文件中，我像在 ngrx 文档中一样初始化了商店：

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        StoreModule.forRoot({
          ...fromRoot.reducers,
          feature: combineReducers(fromProperties.reducer),
        })
      ],
      declarations: [
        SidebarPropertiesComponent,
        SidebarElementComponent
      ]
    })
    .compileComponents();
  }));

当我启动测试时，出现“TypeError: Cannot read property 'ids' of undefined”。所有其他选择器都不会产生错误
我还想模拟每个选择器返回的 Observable。

谢谢

【问题讨论】：

标签： ngrx

【解决方案1】：

我在 TestBed.configureTestingModule 中找到了问题

而不是

  imports: [
    StoreModule.forRoot({
      ...fromRoot.reducers,
      feature: combineReducers(fromProperties.reducer),
    })
  ],

使用

  imports: [
    StoreModule.forRoot(reducers, { metaReducers }),
    StoreModule.forFeature('properties', fromProperties.reducer),
  ],

不再出现“TypeError：无法读取未定义的属性 'ids'”
我可以模拟属性

 it('should have 2 properties elements', () => {
   store.dispatch(new LoadPropertiesSuccess({properties: propertiesMock}));
   fixture.detectChanges();

   const list = debugElement.queryAll(By.css('li'));
   expect(list.length).toBe(2);
 });

【讨论】：