Angular 7 测试 - 异步函数调用 + async..await答案

【问题标题】：Angular 7 Testing - Async function call + async..awaitAngular 7 测试 - 异步函数调用 + async..await
【发布时间】：2019-07-24 14:35:46
【问题描述】：

在 Angular 7 单元测试中，当将异步支持与 async..await 关键字结合使用时，有没有办法避免双重 async( async(){} ) 语法？

我是 Angular 的新手，但我是一位经验丰富的程序员，但我无法找到我喜欢的测试风格。

我想在测试中安全地使用async..await，并且我理解以下语法。然而，当指导新开发人员接触现代 javascript 和/或 async..await 的概念时，双重 async(async()) 语法对他们来说是多余且令人困惑的。他们忽略了外部异步。服务中抛出的异常会导致在实际测试之外报告故障，这很难追踪。

似乎以下之一会更好：

it() 应该神奇地支持 async..await 并将我的回调包装在 async() 中，这样我就不必考虑它了。
it() 应该采用一个可选的函数参数（即async 或fakeAsync）来包装我的回调。
it() 变体 ita() 和 itfa() 应该存在，它们将使用适当的异步帮助程序包装我的回调。
it() 用async 包装我的回调，另外一个itf() 将用fakeAsync 包装我的回调。

我是否遗漏了现有的概念或语法？有没有更好的选择？

    import { async } from '@angular/core/testing';

    describe('MyService', () => {
        let service: MyService;

        ...

        it('should get data', async( async() => {
            // arrange
            let expectedData = { answer: 42 };

            // act
            let data = await service.getDataAsync();

            // assert
            expect(data).toEqual(expectedData);
        } ));
    })

【问题讨论】：

至于“令人困惑”，现在他们已将async() 重命名为waitForAsync()，也许更容易理解？

标签： angular unit-testing karma-jasmine angular7 angular-test

【解决方案1】：

有几种不同的方式来处理异步测试：

使用内置的业力完成函数：(doneFunction) => {async test here... then eventually call done();}。它可以让您对测试结束的位置进行细粒度控制，但让您可以使用done.fail(error) 自行处理错误。
包装在角度 async() 函数中。这是您上面示例的一部分，但正如您所指出的，Angular async 函数似乎不会自动支持内部的 await 语法，因此需要使用内部 async 来获得对 await 的支持。
使用 Angular fakeAsync() 包装函数，它允许您在代码中的任何位置调用 tick() 来模拟时间流逝以及可观察对象、承诺和其他异步函数的解析。一个缺点：您不能在此进行 HTTP 调用，因为它们会实时发生。

虽然我发现这 3 种方法各有利弊，但我发现 #2 对于创建流畅且易于阅读的测试最有用。因此，尽管您可以使用 #1 或 #3 避免嵌套异步代码，但我不确定收益是否会超过成本。至于您的建议，如果对您很重要，您可能需要考虑向 angular repo 提交功能请求。

有关更多信息，我发现此来源非常有帮助：https://medium.com/@michaelericksen_12434/angular-asynchronous-test-patterns-and-recipes-202cf7d47ec7。希望对您有所帮助！

【讨论】：