返回
Angular UT 模拟执行setTimeout
2024-09-10
147 0在 Angular 单元测试中,我们经常需要模拟异步操作,比如 setTimeout。
提高测试速度: 真实环境下的 setTimeout 会阻塞测试,导致测试运行时间过长。
确保测试的可靠性: 模拟 setTimeout 可以让我们更好地控制异步操作的执行时机,避免由于外部因素导致的测试失败。
Angular 提供了多种方法来模拟 setTimeout,其中最常用的是:
1. Jasmine 的 tick() 函数
Jasmine 是一个常用的 JavaScript 测试框架,它提供了 tick() 函数来模拟异步操作的推进。
import { TestBed, fakeAsync, tick } from '@angular/core/testing';
describe('MyComponent', () => {
it('should call a function after 2 seconds', fakeAsync(() => {
// ...
setTimeout(() => {
// ...
}, 2000);
tick(2000); // 模拟经过2秒
// 断言
}));
});
fakeAsync: 将测试标记为异步测试,允许我们使用 tick()。
tick(2000): 模拟经过 2000 毫秒。
2. RxJS 的测试调度器
如果你在项目中使用了 RxJS,可以使用测试调度器来控制 Observable 的执行。
import { TestBed, fakeAsync, tick } from '@angular/core/testing';
import { of, TestScheduler } from 'rxjs';
describe('MyComponent', () => {
let testScheduler: TestScheduler;
beforeEach(() => {
testScheduler = new TestScheduler((actual, expected) => {
// 断言
});
});
it('should call a function after 2 seconds', fakeAsync(() => {
// ...
const source = of(1).pipe(delay(2000));
testScheduler.flush(); // 执行所有订阅
// 断言
}));
});
3. Jest 的 fakeTimers
如果你使用 Jest 作为测试运行器,它提供了内置的 fakeTimers 功能。
import { jest } from '@jest/globals';
describe('MyComponent', () => {
it('should call a function after 2 seconds', () => {
jest.useFakeTimers();
setTimeout(() => {
// ...
}, 2000);
jest.advanceTimersByTime(2000);
// 断言
jest.useRealTimers();
});
});
通过模拟 setTimeout,我们可以更有效地测试 Angular 组件中的异步操作。掌握这些方法,可以帮助你写出更可靠、更快速的测试用例。
您可能感兴趣:
网友点评
提交