Jasmine test case are failing, when testing setTimeout inside function

Question

Good Day Everyone,

I am quite new to testing frameworks Jasmine. We have a TS project setup and I am trying to test a function consisting of setTimeout, but it keeps failing. I am trying to use Clock

One Important point I noticed is that I am using babel-loader as soon as I change the webpack configuration to ts-loader. The test case doesn't fail. (Don't know Why ‍♀️). I have checked multiple times but no luck.

UPDATE I figured out why the test cases are failing but I have no idea why is it happening.

The configurations of babel and ts-loader are correct I just changed the setTimeout to window.setTimeout(in babel-loader) repository and now the test cases are executing successfully‍♀️. This was just a wild guess from Stack Overflow Link.

I added a console statement of setTimeout and window.setTimeout and found that the definitions of both functions are very different. window.setTimeout has a definition(Green circle in the screenshot) that is the same as after we install Jasmine.clock install. ie. HERE But setTimeout definition(Red circle in the screenshot) is very different(below).

function (/* ...args */) {
    return fn.apply(that, arguments);
  }

I tried doing the same in ts-loader repository but here setTimeout and window.setTimeout definitions are the same.

Code:

hideToast() {
        setTimeout(() => {
            this.showToast = false;
        }, 5000);
    }

Test Spec:

beforeEach(() => {
        // Sometimes calling install() will fail for some reason,
        // but calling uninstall() first will make it work
        jasmine.clock().uninstall();
        jasmine.clock().install();
    });

afterEach(() => {
        jasmine.clock().uninstall();
});

it('should hide toast', () => {
        const obj: Car = new Car();
        obj.showToast = true; // This value should change after timeout

        obj.hideToast();      // Call the component method that turns the showToast value as false

        jasmine.clock().tick(5000);
        expect(obj.showToast).toBeFalsy();  // Then executes this
    });

Any suggestion would be helpful.

With babel-loader(Test case fail's) Screenshot(Branch = "main"):

https://github.com/dollysingh3192/ts-babel-template

With ts-loader(Test cases passed) Screenshot(Branch = "tsloader"):

https://github.com/dollysingh3192/ts-babel-template/tree/tsloader

Answer 1

Example with clock() using a promise that we resolve straight away:

import { Car } from './car';

describe('Car', () => {
    beforeEach(() => {
        jasmine.clock().uninstall(); // you probably don't need this line
        jasmine.clock().install();
    });

    afterEach(() => {
        jasmine.clock().uninstall();
    });

    it('should hide toast', () => {
        const obj: Car = new Car();
        obj.showToast = true; // also here, it's redundant, as set to true in constructor
        obj.hideToast();
        Promise.resolve().then(() => {
            jasmine.clock().tick(5000);
            expect(obj.showToast).toBeFalsy();
        });
    });
});

Other ideas on how to do it in this github issue

But let's forget about the simple (and best solution) for a moment and dig a big into the issue. Without the Clock class, we would have to use the done() callback. In that case, we would have two solutions:

1 - change jasmine.DEFAULT_TIMEOUT_INTERVAL, to be at least 1ms higher than your timeout:

import { Car } from './car';

describe('Car', () => {
    beforeEach(() => {
        jasmine.DEFAULT_TIMEOUT_INTERVAL = 5001;
    });

    it('should hide toast', (done) => {
        const obj: Car = new Car();
        obj.hideToast();
        setTimeout(() => {
            expect(obj.showToast).toBeFalsy();
            done();
        }, 5000)
    });
});

This works with the done() callback (that might be used while working with async tasks) and by overriding the jasmine.DEFAULT_TIMEOUT_INTERVAL.

2 - Lower your timeout - by 1 millisecond (yes, 1ms is enough):

import {Car} from './car';

describe('Car', () => {
    it('go() works', () => {
        const car: Car = new Car();
        const returnValue = car.go('vroom');
        expect(returnValue).toEqual('vroom');
    });

    it('should hide toast', (done) => {
        const obj: Car = new Car();
        obj.hideToast();
        setTimeout(() => {
            expect(obj.showToast).toEqual(false);
            done();
        }, 4999);
    });
});

Same as before, done callback, but this time we finish 1 millisecond before the Jasmine default timeout and the test will pass (obviously, we need to do it in the class and in the test).

According to the Jasmine docs: