英文:
Angular Unit Testing - Cannot read properties of undefined (reading 'size') NgRx
问题
我在运行npm test
时遇到了有关我的规范文件单元测试的错误,但未能成功解决。错误在karma chrome
上运行时显示:
agent.service.spec.ts:
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { MemoizedSelector, Store } from '@ngrx/store';
import { MockStore, provideMockStore } from '@ngrx/store/testing';
import * as fromGrid from './../grid/store/grid.reducer';
import { GridActions } from './../grid/store/grid.actions';
import { AgentService } from './agent.service';
import { GridSizeEnum } from '../models/enums/GridSize';
describe('AgentService', () => {
let agentService: AgentService;
let mockStore: MockStore<fromGrid.State>;
let mockGridSizeSelector: MemoizedSelector<fromGrid.State, GridSizeEnum>;
let size: GridSizeEnum = GridSizeEnum.GRID_1
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
HttpClientTestingModule,
RouterTestingModule
],
providers: [
AgentService,
provideMockStore({}),
],
});
agentService = TestBed.get(AgentService);
mockStore = TestBed.get(Store);
mockGridSizeSelector = mockStore.overrideSelector(fromGrid.getGridSize, size);
});
it('should return the default state', () => {
const action = {} as GridActions;
const state = fromGrid.reducer(fromGrid.initialState, action);
expect(state).toBe(fromGrid.initialState);
});
it('should be created', () => {
expect(agentService).toBeTruthy();
});
afterEach(() => {
})
});
agent.service.ts:
构造函数部分-
constructor(private http: HttpClient,
private router: Router,
private store: Store<fromRoot.State>,
private gridStore: Store<fromGrid.State>,
private commandWebSocket: CommandWebsocketService,
private logService: LogService) {
this.commandWebSocket.connect();
this.commandWebSocket.messages$.subscribe((data) => {
this.commandWebsocketData(data);
});
this.store.pipe(select(fromGrid.getGridSize), takeUntil(this.destroyed$)).subscribe((size) => {
if (size) {
this.gridSize = size;
}
});
this.gridStore.pipe(select(fromGrid.getGridVideoStreamIDs, this.gridSize), takeUntil(this.destroyed$)).subscribe(data => {
if (data && data.length) {
this.gridStreamIDs = data;
const byPassCpuIdsCopy = this.byPassCpuIds;
this.byPassCpuIds = [];
this.gridStreamIDs.filter((dta) => {
this.byPassCpuIds[dta] = byPassCpuIdsCopy[dta];
});
}
});
}
grid.reducer.ts:
export const getGridSize = createSelector(
getGridFeatureState,
state => state.size
);
这个错误在另一种情况下也经常出现,当我在constructor()
或ngOnInit()
中订阅特定的选择器时(如果是组件单元测试的话)。
为了解决这个问题,我尝试在规范文件中初始化状态,如上面的agent.service.spec
... 但没有解决。
如何解决这个错误:
无法读取未定义的属性(读取'size')?
英文:
I get an error about my spec file unit test without success to solve, the error display when I run npm test
, on karma chrome
:
agent.service.spec.ts:
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { MemoizedSelector, Store } from '@ngrx/store';
import { MockStore, provideMockStore } from '@ngrx/store/testing';
import * as fromGrid from './../grid/store/grid.reducer';
import { GridActions } from './../grid/store/grid.actions';
import { AgentService } from './agent.service';
import { GridSizeEnum } from '../models/enums/GridSize';
describe('AgentService', () => {
let agentService: AgentService;
let mockStore: MockStore<fromGrid.State>;
let mockGridSizeSelector: MemoizedSelector<fromGrid.State, GridSizeEnum>;
let size: GridSizeEnum = GridSizeEnum.GRID_1
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
HttpClientTestingModule,
RouterTestingModule
],
providers: [
AgentService,
provideMockStore({}),
],
});
agentService = TestBed.get(AgentService);
mockStore = TestBed.get(Store);
mockGridSizeSelector = mockStore.overrideSelector(fromGrid.getGridSize, size);
});
it('should return the default state', () => {
const action = {} as GridActions;
const state = fromGrid.reducer(fromGrid.initialState, action);
expect(state).toBe(fromGrid.initialState);
});
it('should be created', () => {
expect(agentService).toBeTruthy();
});
afterEach(() => {
})
});
agent.service.ts :
the constructor part-
constructor(private http: HttpClient,
private router: Router,
private store: Store<fromRoot.State>,
private gridStore: Store<fromGrid.State>,
private commandWebSocket: CommandWebsocketService,
private logService: LogService) {
this.commandWebSocket.connect();
this.commandWebSocket.messages$.subscribe((data) => {
this.commandWebsocketData(data);
});
this.store.pipe(select(fromGrid.getGridSize), takeUntil(this.destroyed$)).subscribe((size) => {
if (size) {
this.gridSize = size;
}
});
this.gridStore.pipe(select(fromGrid.getGridVideoStreamIDs, this.gridSize), takeUntil(this.destroyed$)).subscribe(data => {
if (data && data.length) {
this.gridStreamIDs = data;
const byPassCpuIdsCopy = this.byPassCpuIds;
this.byPassCpuIds = [];
this.gridStreamIDs.filter((dta) => {
this.byPassCpuIds[dta] = byPassCpuIdsCopy[dta];
});
}
});
}
grid.reducer.ts :
export const getGridSize = createSelector(
getGridFeatureState,
state => state.size
);
This error appears a lot in another case, when I have subscribe to specific selector at constructor()
or at ngOnInit()
(if it component unit test ).
For solution i tried to initial the state in spec file, see above in agent.service.spec
... but it isn't solved.
Need your help, thanks!
How can i solve this error:
Cannot read properties of undefined (reading 'size')
答案1
得分: 0
你需要初始化你的存储:
provideMockStore({
grid: { // 假设 'grid' 是你的功能键
size: 5
}
})
英文:
You need to initialize your store:
provideMockStore({
grid: { // assuming 'grid' is your feature key
size: 5
}
})
答案2
得分: 0
也需要在provideMockStore()
函数中初始化选择器:
provideMockStore({
initialState: fromGrid.initialState,
selectors: [
{
selector: fromGrid.getGridSize,
value: GridSizeEnum.GRID_1
}
]
}),
英文:
also need to initialize the selectors in provideMockStore()
:
provideMockStore({
initialState: fromGrid.initialState,
selectors: [
{
selector: fromGrid.getGridSize,
value: GridSizeEnum.GRID_1
}
]
}),
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论