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

问题描述

今天是个好日子，

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

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

更新我弄清楚了为什么测试用例失败了，但我不知道为什么会这样。

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

我添加了setTimeout和window.setTimeout的console语句，发现两个函数的定义很不一样。window.setTimeout 有一个定义（屏幕截图中的绿色圆圈）与我们安装 Jasmine.clock 安装后的定义相同。IE。这里但是 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

标签： javascriptjasminebabeljsbabel-loaderts-loader

解决方案

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 问题中做到这一点的其他想法

但是让我们暂时忘记简单（也是最好的解决方案）并深入研究这个问题。如果没有 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 毫秒完成，测试将通过（显然，我们需要在类和测试中这样做）。

根据茉莉花文档：

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

问题描述

解决方案

推荐阅读