TypeError: Cannot read properties of undefined (reading 'and')

Question

Please help! I get the type error up above when trying to run a shallow integration test.

I have severally looked through my code to check if I have something amiss, but everything seems to be in place.

I'm trying to get this test to pass.

expect(fixture.componentInstance.heroes.length).toBe(3)

It keeps failing with this error in Karma.

TypeError: Cannot read properties of undefined (reading 'and')

import { ComponentFixture, TestBed } from "@angular/core/testing"
import { of } from "rxjs";
import { HeroService } from "../hero.service";
import { HeroesComponent } from "./heroes.component"

describe('HeroesComponent (shallow tests)', () => {
  let fixture: ComponentFixture<HeroesComponent>;
  let mockHeroService;
  let HEROES;  

  beforeEach(() =>{
    HEROES = [
      {id:1, name: 'SpiderDude', strength: 8},
      {id:2, name: 'Wonderful Woman', strength: 24},
      {id:3, name: 'SuperDude', strength: 55}
    ];
    mockHeroService = jasmine.createSpyObj(['getHeroes, addHero, deleteHero']);
    TestBed.configureTestingModule({
      declarations: [HeroesComponent],
      providers: [
        { provide: HeroService, useValue: mockHeroService}
      ],
      schemas: [NO_ERRORS_SCHEMA]
    })
    fixture = TestBed.createComponent(HeroesComponent)
  })

  it('should set heroes correctly from the service', () => {
    mockHeroService.getHeroes.and.returnValue(of(HEROES))
    fixture.detectChanges();

    expect(fixture.componentInstance.heroes.length).toBe(3)
  });
});

You have not mocked your hero service properly. – R. Richards Nov 06 '21 at 22:25 — R. Richards, Nov 06 '21 at 22:25

score 3 · Accepted Answer · edited Mar 01 '23 at 22:54

3

The quotes in the mockHeroService methods are not placed correctly.

mockHeroService = jasmine.createSpyObj(['getHeroes, addHero, deleteHero']);

It should be this instead.

mockHeroService = jasmine.createSpyObj(['getHeroes', 'addHero', 'deleteHero']);

edited Mar 01 '23 at 22:54

Mo.

26,306
36
159
225

answered Nov 10 '21 at 17:36

Abayomi

69
1
1
9

Or even better, use the awsome [auto-spies](https://github.com/hirezio/auto-spies) library: `import { createSpyFromClass } from 'jasmine-auto-spies'; ... mockHeroService = createSpyFromClass(HeroService)`. – hlovdal Jun 20 '23 at 21:31

Le Programmeur · Answer 2 · 2021-11-07T02:45:40.733

0

I'm not sure what Unit test framework you are using:

Your line here

 mockHeroService.getHeroes.and.returnValue(of(HEROES))

By the the error, I can tell that the compiler are trying to read property and from object mockHeroService.getHeroes. But the mockHeroService.getHeroes itself is undefined. So the compiler can not read and of undefined

The problem is here mockHeroService.getHeroes

Please check the mockHeroService with jasmine

edited Nov 07 '21 at 02:45

answered Nov 06 '21 at 22:03

Le Programmeur

61
9

I don't think this is true, if node throws: Cannot read properties of undefined (reading 'and') It means that it's the and itself that's undefined. It's not that it's a function instead of a member. – Damon Smith Nov 07 '21 at 01:01
This is all I've written so far in terms of this test. You can see me setting up the mockHeroService when I wrote this line mockHeroService = jasmine.createSpyObj(['getHeroes, addHero, deleteHero']);. – Abayomi Nov 10 '21 at 07:33
You were right! The quotes in the mockHeroService methods are wrong. – Abayomi Nov 10 '21 at 17:28

TypeError: Cannot read properties of undefined (reading 'and')

2 Answers2