Угловое модульное тестирование - не удается прочитать свойства неопределенного (чтение «размер») NgRx

Я получаю сообщение об ошибке, связанное с моим модульным тестом файла спецификации, который не удается решить, ошибка отображается при запуске npm test, на karma chrome:

введите здесь описание изображения

агент.сервис.спец.тс:

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(() => {

    })


});

агент.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... но это не решено. Нужна ваша помощь, спасибо!

Как я могу решить эту ошибку:

Cannot read properties of undefined (reading 'size')
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
66
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вам нужно инициализировать ваш магазин:

provideMockStore({
  grid: {     // assuming 'grid' is your feature key
    size: 5
  }
})

Спасибо за помощь! Помимо начального состояния в ProvideMockStore(), также необходимо предоставить конкретный селектор

pe'er cohen 16.04.2023 08:27

На самом деле это должно работать без переопределения селектора, если предоставленное состояние имеет правильный формат. В качестве альтернативы вы можете переопределить селектор, как в вашем ответе, но указать только пустой объект для состояния, поскольку переопределенный селектор никогда не получит к нему доступ.

wlf 16.04.2023 15:53

также необходимо инициализировать селекторы в provideMockStore():

provideMockStore({
     initialState: fromGrid.initialState,
     selectors: [
         {
            selector: fromGrid.getGridSize,
            value: GridSizeEnum.GRID_1
         }
     ]
 }),

Другие вопросы по теме