spyOn could not find an object to spy upon for start()

Question

I am using angular-cli testing framework.

inside my component , I have used 'ng2-slim-loading-bar' node module.

submit(){
    this._slimLoadingBarService.start(() => {
    });
    //method operations
}

Now when I am testing this component, I have applied spyOn this service as :

beforeEach(() => {
    let slimLoadingBarService=new SlimLoadingBarService();
    demoComponent = new DemoComponent(slimLoadingBarService);
    TestBed.configureTestingModule({
        declarations: [
            DemoComponent
        ],
        providers: [
            { provide: SlimLoadingBarService, useClass: SlimLoadingBarService}
        ],
        imports: [
            SharedModule
        ]
    });
});
it('should pass data to servie', () => {
    spyOn(slimLoadingBarService,'start').and.callThrough();
   //testing code,if I remove the above service from my component, test runs fine
});

but its not working.

It throws below error:

spyOn could not find an object to spy upon for start()

Solution 1

Declaring slimLoadingBarService with let, you are constraining its scope to the beforeEach callback scope. Declare it with var, or better, declare it after the proper describe() block and set its content within beforeEach callback function:

describe("some describe statement" , function(){
    let slimLoadingBarService = null;

    beforeEach( () => {
        slimLoadingBarService=new SlimLoadingBarService();

    });

    it('should pass data to service', () => {
        spyOn(slimLoadingBarService,'start').and.callThrough();
       //testing code,if I remove the above service from my component, test runs fine
    });
});

Solution 2

it's due to non declaration in beforeEach

updated syntax after angular 10

beforeEach(() => {
    slimLoadingBarService = TestBed.get(SlimLoadingBarService);
});

before angular 10

beforeEach(() => {
    slimLoadingBarService = TestBed.get(SlimLoadingBarService);
});

Comments

[Tom Hall]

+1. And you can inject that service in the beforeEach with slimLoadingBarService = TestBed.inject(SlimLoadingBarService); (for Angular 9) instead of the line that's there. And to take advantage of typescript, you could define the variable after the the describe as let mockSlimLoadingBarService: SlimLoadingBarService; so it's typed. You'd have to create an interface called SlimLoadingBarService and probably put it in a slim-loading-bar-service.model.ts file, but it helps keeps things organized and can weed out bugs before they happen.

[Srinivasan K K]

Since Angular 10, TestBed.inject(<class-name>) is the syntax.

[Mukesh Kumar Gupta]

beforeEach(() => { slimLoadingBarService = TestBed.get<SlimLoadingBarService>(SlimLoadingBarService); });