An error was thrown in afterAll TypeError: Cannot read property 'ids' of undefined

user_9482707 0
Viewed 12102

I am new to angular and i tried to write simple unit test for my component. My test fail time to time ant i get the following error: An error was thrown in afterAll TypeError: Cannot read property 'ids' of undefined and i also attached the error traceenter image description here

This is my component implementation:

    ngOnInit() {
        this.groupValueForm.valueChanges.subscribe((group: BasicGroup) => {
          this.store.dispatch(GroupActions.selectGroup({ group: group }));
        });
        this.store.dispatch(GroupActions.getAllGroups());
        this.store.pipe(select(selectAllGroups)).subscribe((basicGroups: BasicGroup[]) => {
          this.groups = basicGroups;
        });
      }

this is my test class implementation:

      beforeEach(() => {
        TestBed.configureTestingModule({
          imports: [
            TopPanelModule,
            STORE_MODULE_TEST
          ],
          providers: [
            { provide: COUNTRY_ID, useValue: 'sv-SE' },
            { provide: TranslateService, useValue: mockTranslateService },
            provideMockStore({ initialState })
          ]
        });
        store = TestBed.inject(MockStore);
        fixture = TestBed.createComponent(TopPanelComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });
    
      it('should create', () => {
        expect(component).toBeTruthy();
      });
    
      it('should use the groupList from store', (done: DoneFn)  => {
        spyOn(store, 'pipe').and.returnValue(of(groups));
        component.ngOnInit();
        store.pipe().subscribe(resp=>{
          expect(component.groups).toEqual(groups);
          done();
        })
      });
    
      it('should dispatch getAllGroups', () => {
        spyOn(component['store'], 'dispatch');
        component.ngOnInit();
        expect(component['store'].dispatch).toHaveBeenCalledWith(GroupActions.getAllGroups());
      });
    
      afterEach(() => {
        fixture.destroy();
      });
karma-jasmine jasmine angular unit-testing
1 Answers

This is one of potential fixes as your error suggest that yourEntityFeatureSliceName (in case below) is undefined. In other hand if you don't want to override initial state you can always override selectors and as I wrote in comments it could be selectAll or selectEntities - selectAllGroups.

import {MockStore, provideMockStore} from '@ngrx/store/testing';

let store$: MockStore;

beforeEach(() => {
  TestBed.configureTestingModule({
    // Put other dependencies
    providers: [
      provideMockStore({
        initialState: {
          yourEntityFeatureSliceName: { // Update name
            ids: [],
            entities: {}
          }
        }
      })
    ]
  });

  store$ = TestBed.inject(MockStore);
});

to override selector:

store.overrideSelector(selectAllGroups, {}); // Provide data

Beside all of that - note that you spy on store.pipe in test case and first fixture.detectChanges(); call is in beforeEach so ngOnInit will be executed before spy.

user_99072930
Related