Uncaught TypeError: Cannot read property 'teams' of undefined thrown - Karma

Question

I'm running into this issues when I'm running ng test. It compiles fine, and ng build --prod runs fine. I don't even see those variables with that name just the Observables but the have a $ infront of the variables.

QUESTION UPDATED

"@types/jasmine": "2.8.9", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "codelyzer": "~4.2.1", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~1.7.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.0", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "^5.4.2", "ts-node": "~5.0.1", "tslint": "~5.9.1", "typescript": "~2.7.2"

Thi is all I see when Karma opens

My command line

PARENT TEST file

describe('MembersComponent', () => {
  let component: MembersComponent;
  let fixture: ComponentFixture<MembersComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        ReactiveFormsModule,
        HttpClientModule,
        RouterTestingModule,
        StoreModule.forRoot({})
      ],
      declarations: [MembersComponent, ModalComponent],
      providers: [{ provide: Store, useClass: StoreStub }]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MembersComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

CHILD TEST FILE

describe('ModalComponent', () => {
  let component: ModalComponent;
  let fixture: ComponentFixture<ModalComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ModalComponent],
      imports: [FormsModule, ReactiveFormsModule, StoreModule.forRoot({})],
      providers: [Store]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ModalComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

this.store is undefined. Usually, services are mocked in tested. What does your mock look like? — Gosha_Fighten
@Gosha_Fighten I don't really know how to do that. I'm new with Karma — devpato
You are mocking NgRx Store by using RxJS BehaviorSubject. BehaviorSubject does not provide the same API. It does not have methods like dispatch and select. See its documentation. Use Store mocks from NgRx as described in the Testing article. — Gosha_Fighten

Shashank Vivek Shashank Vivek · Accepted Answer · 2019-05-29T03:18:25

If you don't even want to test store then try below below:

import { of } from 'rxjs';

class StoreStub {
    select(val: any) {
        if (val === 'whatever action you have defined for RacingSelectors.selectMembers') {
            return of<Member[]>([
                {}, // create dummy member objects
            ]);
        } else if (val === 'whatever action you have defined for RacingSelectors.selectTeams') {
            return of<Team[]>([
                { firstName: '' },
                { lastName: '' },
                { jobTitle: '' },
                { team: '' },
                { status: '' }, // create dummy member objects
            ]);
        }
    }
    dispatch() {}
}

and in spec file:

    TestBed.configureTestingModule({
      imports: [
        ReactiveFormsModule,
        HttpClientModule,
        RouterTestingModule,
        StoreModule.forRoot({})
      ],
      declarations: [MembersComponent, ModalComponent],
      providers: [{ provide: Store, useClass: StoreStub}]
    }).compileComponents();
  }));

  it('should create', () => { 
        component.ngOnInit(); 
       expect(component).toBeTruthy(); 
   });

Uncaught TypeError: Cannot read property 'teams' of undefined thrown - Karma

1 Answers