[英]How to mock the store.pipe in a component in angular unit test
I am new to angular as i have tried to do unit test for one of the component which takes data from the store.我是 angular 的新手,因为我试图对从商店获取数据的组件之一进行单元测试。 I have mocked the service files as well as the store.
我已经嘲笑了服务文件以及商店。 When i try to run the test i am getting teh error like below.
当我尝试运行测试时,我收到如下错误。 So i have added some fake data to the store and passed the datas.But still i am getting the same issue
所以我向商店添加了一些假数据并传递了数据。但我仍然遇到同样的问题
Cannot read property 'switches' of undefined
Spec file规范文件
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();
});
});
Switch List Component开关列表组件
this.store.pipe(select('switches')).subscribe(val => {
this.rowData = val.switches;
this.pagination = val.pagination;
this.globalSearch = val.globalSearch;
});
can anyone tell me how to do the mocking for the this.store.pipe.谁能告诉我如何对 this.store.pipe 进行模拟。
Inside the spec.ts try to change the below code from在 spec.ts 中尝试更改以下代码
StoreModule.forRoot({ switchesReducer }),
to到
StoreModule.forRoot({ switches: switchesReducer }),
Pls refer the document for more info请参阅文档以获取更多信息
https://ngrx.io/guide/store/testing https://ngrx.io/guide/store/testing
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.