Angular测试中 fakeAsync、tick、flush、flushMicrotasks

原创

已于 2022-03-15 22:54:58 修改 · 811 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#angular.js #typescript #javascript

于 2022-02-11 13:09:32 首次发布

本文介绍了在Angular测试中如何使用fakeAsync、tick和flush进行异步操作模拟。fakeAsync用于在特定Zone中执行函数，tick用于模拟时间流逝并处理微任务，而flush则用于模拟处理所有未完成的计时器任务。通过示例展示了它们在宏任务和微任务处理中的应用，以及processNewMacroTasksSynchronously参数的影响。

`fakeAsync`

包装一个函数，以便在 fakeAsync Zone 中执行：

// 参数fn：可用于包装 inject() 调用。里面含有异步操作，比如计时器。
// 返回值：要包装为在 fakeAsync Zone 中执行的函数。

fakeAsync(fn: Function): (...args: any[]) => any

说明

通过调用 flushMicrotasks() 手动执行微任务，
计时器是同步的，用 tick() 模拟异步时间的流逝。
如果函数末尾有任何待处理的计时器，则将引发异常。

示例

// Error: The code should be running in the fakeAsync zone to call this function
it('error test', () => {
   
   
    let flag = false;
    setTimeout(() => {
   
   
        flag = true;
    }, 100);
    tick(100);
    expect(flag).toBe(true);
});

it('correct test', fakeAsync(() => {
   
   
    let flag = false;
    setTimeout(() => {
   
   
        flag = true;
    }, 100);
    tick(100);
    expect(flag