Karma-Test：在其他测试中使用异步时随机测试失败答案

【问题标题】：Karma-Test: Random Test fails when using async in other testsKarma-Test：在其他测试中使用异步时随机测试失败
【发布时间】：2018-11-08 13:20:27
【问题描述】：

我对业力测试有疑问。当我运行测试时，有时会出现以下错误：

HeadlessChrome 70.0.3538 (Windows 10.0.0) ERROR
  {
    "message": "An error was thrown in afterAll\n[object ErrorEvent] thrown",
    "str": "An error was thrown in afterAll\n[object ErrorEvent] thrown"
  }

如果我不进行任何更改并再次运行相同的测试，测试可能不会失败。

我了解到这可能是异步测试的错误 (https://github.com/karma-runner/karma/issues/2811#issuecomment-407600850)，因此我删除了所有异步和 fakeasync 测试。但是，这仍然不能解决问题。如果没有 async 和 fakeasync 测试，我有这个错误：

HeadlessChrome 70.0.3538 (Windows 10.0.0) MyComponent should create FAILED
        [object ErrorEvent] thrown
HeadlessChrome 70.0.3538 (Windows 10.0.0): Executed 50 of 55 (1 FAILED) (0 secs / 0 secs)

但是在这个组件的测试中我找不到错误：

describe('MyComponent', () => {
    let component: MyComponent;
    let fixture: ComponentFixture<MyComponent>;
    const zipService = jasmine.createSpyObj('ZipService', {
        search: of([])
    });

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [MyComponent, OnOffSwitchComponent, TranslatePipeMock],
            imports: [
                NgbModule.forRoot(),
                FormsModule,
                ReactiveFormsModule
            ],
            providers: [
                {provide: TranslateService, useValue: translateServiceMock()},
                {provide: UtilService, useValue: utilMock()},
                {provide: ZipService, useValue: zipService}
            ]
        }).compileComponents();
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

有人知道它可能是什么吗？

【问题讨论】：

标签： angular karma-jasmine karma-runner

【解决方案1】：

你之前的每个块都是错误的，因为你试图在编译部分完成之前创建组件 MyComponent，如果你查看https://angular.io/api/core/testing/TestBed#compileComponents 你可以看到TestBed.compileComponents 返回一个承诺。所以你测试的样板应该会发生明显的变化。首先，您需要让 beforeEach 意识到它包含一些异步活动，这样做的方法不止一种，包括本机 async/await，angular 提供了一个开箱即用的实用程序async()。这将把你的测试转入beforeEach(async( () => {...})) 然后第二点是你的模拟的创建应该在编译组件时发生。所以你的代码看起来像

beforeEach(async(() => {
TestBed.configureTestingModule({
    declarations: [MyComponent, OnOffSwitchComponent, TranslatePipeMock],
    imports: [
        NgbModule.forRoot(),
        FormsModule,
        ReactiveFormsModule
    ],
    providers: [
        {provide: TranslateService, useValue: translateServiceMock()},
        {provide: UtilService, useValue: utilMock()},
        {provide: ZipService, useValue: zipService}
    ]
}).compileComponents().then(() => {
   fixture = TestBed.createComponent(MyComponent);
   component = fixture.componentInstance;
   fixture.detectChanges();
  });    
}));

【讨论】：