Jasmine 测试用例失败，在函数内部测试 setTimeout 时

如何解决Jasmine 测试用例失败，在函数内部测试 setTimeout 时

大家好，

我对测试框架 Jasmine 很陌生。我们有一个 TS 项目设置，我正在尝试测试一个由 setTimeout 组成的函数，但它一直失败。我正在尝试使用 Clock

一个重要的点 我注意到我在将 webpack 配置更改为 ts-loader 后立即使用 babel-loader。测试用例不会失败。 （不知道为什么?‍♀️）。我已经检查了多次但没有运气。

更新 我想出了测试用例失败的原因，但我不知道为什么会发生这种情况。

babel 和 ts-loader 的配置是正确的我只是将 setTimeout 更改为 window.setTimeout（在 babel-loader 中）存储库，现在测试用例执行成功?‍♀️。这只是 Stack Overflow Link 的疯狂猜测。

我添加了setTimeout和window.setTimeout的console语句，发现两个函数的定义有很大的不同。 window.setTimeout 有一个定义（截图中的绿色圆圈）与我们安装 Jasmine.clock 后相同。 IE。 HERE 但是setTimeout定义（截图中的红圈）很不一样（下图）。

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

我尝试在 ts-loader 存储库中做同样的事情，但这里的 setTimeout 和 window.setTimeout 定义是相同的。

代码：

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

测试规范：

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
    });

任何建议都会有所帮助。

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

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

使用 ts-loader（测试用例通过）截图（Branch = "tsloader"）：

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

解决方法

clock() 使用我们立即解决的承诺的示例：

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();
        });
    });
});

有关如何在此github issue中执行此操作的其他想法

但是让我们暂时忘记简单（和最佳解决方案）并深入研究这个问题。如果没有 Clock 类，我们将不得不使用 done() 回调。 在这种情况下，我们将有两种解决方案：

1 - 将 jasmine.DEFAULT_TIMEOUT_INTERVAL 更改为至少比超时时间高 1 毫秒：

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)
    });
});

这适用于 done() 回调（可能在处理异步任务时使用） 并通过覆盖 jasmine.DEFAULT_TIMEOUT_INTERVAL。

2 - 减少超时时间 - 1 毫秒（是的，1 毫秒就足够了）：

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);
    });
});

和之前一样，done回调，但是这次我们在Jasmine默认超时前1毫秒完成，测试通过（显然，我们需要在类和测试中做）。

根据Jasmine docs：