Cannot set property 'http' of undefined - Angular Unit testing

Question

I am fairly new to unit testing. I am building an Angular component and my test suite is Jasmine/Karma.

My first test is complaining about two issues and I'm only trying to test an initialised variable value:

TypeError: Cannot set property 'http' of undefined

TypeError: Cannot read property 'isView' of undefined

The code is pretty simple so wondering why I'm getting these errors?

myComponent.ts

sView = false;

myComponent.spec.ts

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

    beforeEach(() => {
        TestBed.configureTestingModule({
            schemas: [NO_ERRORS_SCHEMA],
            declarations: [myComponent],
            imports: [HttpClientTestingModule],
            providers: [
                {
                    provide: myService,
                    useFactory: myServiceMock
                }
            ]
        });
        fixture = TestBed.createComponent(myComponent);
        component = fixture.componentInstance;
    });


    it('isView defaults to: false', () => {
        expect(component.isView).toEqual(false);
    });

});

What is going on here?

@AnoopRajasekharaWarrier sView = false; is pretty much the only thing going on. — Tom Rudge
– Tom Rudge, Commented Apr 1, 2020 at 17:06
Just to confirm if every thing okay, can you try it('should create', () => { expect(component).toBeTruthy(); }); brfore the it() statement you have. — Anoop Rajasekhara Warrier
– Anoop Rajasekhara Warrier, Commented Apr 1, 2020 at 17:08
Is it passing? it('should create', () => { expect(component).toBeTruthy(); }); — Anoop Rajasekhara Warrier
– Anoop Rajasekhara Warrier, Commented Apr 1, 2020 at 17:13

Anoop Rajasekhara Warrier · Accepted Answer · 2020-04-01 17:29:53Z

1

Try below code:

describe('myComponent', () => {
component: myComponent;
let fixture: ComponentFixture<myComponent>;
let myServiceMock: MyServiceMock;
beforeEach(async(() => {
  myServiceMock = new MyServiceMock();
  TestBed.configureTestingModule({
  declarations: [myComponent],
  providers: [
    { provide: myService, useValue: myServiceMock }
  ]
})
  .compileComponents();
}));

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

beforeEach(() => {
 component.ngOnInit();
})

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

answered Apr 1, 2020 at 17:29

Anoop Rajasekhara Warrier

1,0606 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Anoop Rajasekhara Warrier Over a year ago

myComponent should be your Component Class Name, MyServieMock is the mock service, and myService is your Service class name

Anoop Rajasekhara Warrier Over a year ago

There might be spelling mistake.Please give actual class name you have

Tom Rudge Over a year ago

If I take away the providers the http errors disappears, what can this mean?

Collectives™ on Stack Overflow

Cannot set property 'http' of undefined - Angular Unit testing

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related