Jasmine 测试用例失败，在函数内部测试 setTimeout [重复]

Question

大家好，

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

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

更新 我知道为什么测试用例会失败，但我不知道为什么会发生。

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

添加了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（测试用例失败）截图（Branch = "main"）：

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

使用 ts-loader(测试用例通过) 截图(Branch = "tsloader"):

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

Answer 1

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

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

根据Jasmine docs：