Angular8单元测试茉莉花超时问题答案

【问题标题】：Angular8 unit testing jasmine timeout issueAngular8单元测试茉莉花超时问题
【发布时间】：2019-10-08 18:38:18
【问题描述】：

在这种故障模式下随机单元测试失败

错误：超时 - 在 jasmine.DEFAULT_TIMEOUT_INTERVAL 指定的超时内未调用异步回调。

其中一些失败的测试甚至没有进行异步测试！

想知道这个sn-p的代码是否正确；这是我们在 Angular 的所有测试中全面使用的模式

beforeEach(async(() => {
    TestBed.configureTestingModule({ . // Should this be **return TestBed.configureTestingModule**
      imports: [
        ...CommonTestModules
      ],
      declarations: [FooComponent]
    })
    .compileComponents();
  }));

是否应该从回调中返回 compileComponents 的承诺？我在某处读到，异步包装器正在等待承诺，当承诺得到解决时，它最终调用 done()。但是在这里，这种模式看起来并没有返回承诺，我们也没有在任何地方调用“await”关键字。如果没有返回语句，这段代码会不会显得错误？

【问题讨论】：

标签： angular karma-jasmine angular-unit-test karma-jasmine-ajax

【解决方案1】：

不返回该承诺是可以的，the async function 负责等待在 beforeEach 内创建的所有承诺。您可以在整个Angular Testing docs 中看到这种模式：

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

您的 IDE 可能会像 WebStorm 一样抱怨，因为它不知道 Angular 的 async 函数的语义（注意这与 JavaScript 中的 async 关键字不同，这是一个在 Angular 中声明的函数

关于您的原始错误，请尝试隔离失败的测试，或添加其中一个测试的示例，这些测试有时无法查看我们是否发现任何奇怪的东西。

【讨论】：

我认为这不能回答最初的问题。无论使用何种 IDE，测试都将运行。 BTW async 不是 Angular 的，而是 Jasmine 的：jasmine.github.io/tutorials/async
@JandroRojas Jasmine 没有自己的async，来自您的链接comes from JavaScript。答案中使用的async 是来自 Angular 的那个（检查链接和部分：“注意这与 JavaScript 中的异步关键字不同，这是一个在 Angular 中声明的函数”）

【解决方案2】：

您不需要它是异步的，您可以简单地删除异步功能并使用createComponent(your_component) 而不是compileComponents() 进行同步（无论如何您都在等待它的解决方案）。我可以确认这是可行的：

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [ BannerComponent ],
  });
  fixture = TestBed.createComponent(BannerComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
});

希望对你有帮助

【讨论】：