问题描述
大家好,
我对测试框架 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: