CODEWITHSUNDEEP
angularunit-testingjasminekarma-jasmine
Amila Eranda
Amila Eranda

Reputation: 105

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

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();
      });

Upvotes: 5

Views: 24485

Answers (1)

Buczkowski
Buczkowski

Reputation: 2416

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.

Upvotes: 4

Related Questions