为什么 TestBed beforeeach 使用 waitForAsync 而不是仅仅使用 async/awaitcompileComponents？

编辑：我在 Angular 上提出了一个问题，他们更新了文档 : https://github.com/angular/angular/issues/39740 https://github.com/angular/angular/issues/39740

在 Angular 测试中，通常的做法是为beforeEach method

    beforeEach(waitForAsync(() => {
      TestBed
          .configureTestingModule({
            declarations: [BannerComponent],
          })
          .compileComponents();  // compile template and css
    }));

与执行以下操作有什么区别？

    beforeEach(async () => {
      await TestBed
          .configureTestingModule({
              declarations: [BannerComponent],
          })
          .compileComponents();  // compile template and css
    });

我试图在文档中找到解释，但无法弄清楚。

https://angular.io/api/core/testing/waitForAsync#description https://angular.io/api/core/testing/waitForAsync#description https://v10.angular.io/guide/testing-components-scenarios#the-async-beforeeach https://v10.angular.io/guide/testing-components-scenarios#the-async-beforeeach

关于两种方法

我们有多种方法可以在测试角度操作时定义异步操作

• using waitForAsync()

等待异步 https://angular.io/api/core/testing/waitForAsync

将测试函数包装在异步测试区域中。当该区域内的所有异步调用完成时，测试将自动完成。可用于包装注入调用。 来自文档

还需要注意的是，该方法是初始方法的重命名async.

async https://angular.io/api/core/testing/async罢工>

已弃用: use waitForAsync(),（预计在 v12 中删除）

async() 助手已重命名

测试辅助函数async已被弃用并重命名waitForAsync.

此重命名背后的原因是，使用名为的函数可能会令人困惑async()当我们现在有一个名为的 JavaScript 关键字时async（创建 Angular 函数时该关键字不存在），这有点相似（您可以await异步调用），但不同（async()等待所有异步调用，其中async只等待标有await 的调用）。

归功于Cédric Exbrayat 看这篇文章 https://blog.ninja-squad.com/2020/09/03/what-is-new-angular-10.1/#:%7E:text=The%20reason%20behind%20this%20renaming,async()%20waits%20for%20all

WaitForAsync函数在特殊的异步测试区域中执行其体内的代码。这会跟踪体内创建的所有承诺。该函数还跟踪嵌套函数创建的任何 Promise，例如，如果我们在 ngOnInit 函数中调用异步函数，这将被跟踪。

• Using Async/ Await

基本上这使用了普通的 Javascriptasync\ await。我们将函数声明为异步并等待承诺解决

这两种方法有什么区别？

让我们考虑使用 5 种方法进行测试asyncMethod1,nonAsyncMethod1, asyncMethod2, asyncMethod3, nonAsyncMethod2.

Using async / await。我们需要做下面的事情

beforeEach(async () => {
   await asyncMethod1();
   nonAsyncMethod1(); 
   await asyncMethod2();
   await asyncMethod3();
   nonAsyncMethod2()
   await TestBed
      .configureTestingModule({
          declarations: [BannerComponent],
      })
      .compileComponents();  // compile template and css
});

using waitForAsync以上将是

beforeEach(waitForAsync(() => {
   asyncMethod1();
   nonAsyncMethod1(); 
   asyncMethod2();
   asyncMethod3();
   nonAsyncMethod2()
   TestBed
      .configureTestingModule({
        declarations: [BannerComponent],
      })
      .compileComponents();  // compile template and css
}));

所以一般在使用的时候async /await，我们需要在使用时跟踪所有异步操作waitForAsync一旦函数体中的所有承诺都得到解决，函数就会跟踪这个问题并解决承诺