如何在 angular 单元测试中模拟组件中的 store.pipe

Question

我是 angular 的新手，因为我曾尝试对其中一个从商店获取数据的组件进行单元测试。我模拟了服务文件和商店。当我尝试运行测试时，出现如下错误。所以我在商店中添加了一些假数据并通过了 datas.But 我仍然遇到同样的问题

Cannot read property 'switches' of undefined

规格文件

describe('SwitchListComponent', () => {
  let component: ListComponent;
  let fixture: ComponentFixture<ListComponent>;

  let store: Store<any>;
  const switchData = {
    switches: [
      {
        availability: true,
        created_at: "2020-01-30T05:06:06.366Z",
        description: "1",
        hardware_id: "2",
        id: 1018,
        max_flows: 2,
        name: "2",
        updated_at: "2020-01-30T05:34:36.702Z"
      }
    ],
    pagination: {
      currentPage: 1,
      endAt: 10,
      nextPage: 2,
      perPage: 10,
      prevPage: null,
      startAt: 1,
      totalCount: 1012,
      totalPages: 100
    }
  };


  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        ListComponent,
        MultiSelectComponent,
      ],
      imports: [
        RouterTestingModule,
        FormsModule,
        StoreModule.forRoot({ switchesReducer }),
      ],
      providers: [
        {provide: SwitchesService, useClass: SwitchesServiceStub},
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ListComponent);
    component = fixture.componentInstance;
    store = fixture.debugElement.injector.get(Store);
    store.dispatch({
      type: 'FETCH_SWITCHES',
      payload: {
        switches: switchData.switches,
        pagination: switchData.pagination
      }
    });
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

切换列表组件

this.store.pipe(select('switches')).subscribe(val => {
  this.rowData = val.switches;
  this.pagination = val.pagination;
  this.globalSearch = val.globalSearch;
});

谁能告诉我如何为 this.store.pipe 进行模拟。

Answer 1

在 spec.ts 中尝试更改以下代码

StoreModule.forRoot({ switchesReducer }),

到

StoreModule.forRoot({ switches: switchesReducer }),

更多信息请参考文档

https://ngrx.io/guide/store/testing

如何在 angular 单元测试中模拟组件中的 store.pipe

How to mock the store.pipe in a component in angular unit test

unit-testing

karma-jasmine

angular

ngrx-store