Angular UT 模拟执行setTimeout

在 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 组件中的异步操作。掌握这些方法，可以帮助你写出更可靠、更快速的测试用例。