Angular 2 CLI Jasmine 单元测试在使用 beforeAll 而不是 beforeEach 时失败

Question

我使用 NG-CLI (beta.15) 创建了一个新项目，并将 app.component.spec 修改为将 beforeEach 更改为 beforeAll，这导致测试失败并出现以下错误：

失败：无法创建组件 AppComponent，因为它没有导入到测试模块中！

我不明白这个错误是什么意思，当然我为什么会首先得到它。

这是修改后的规范：

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('App: Ng2CliTest2', () => {
  beforeAll(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    });
  });

  it('should create the app', async(() => {
    let fixture = TestBed.createComponent(AppComponent);
    let app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));

  it(`should have as title 'app works!'`, async(() => {
    let fixture = TestBed.createComponent(AppComponent);
    let app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('app works!');
  }));

  it('should render title in a h1 tag', async(() => {
    let fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    let compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('app works!');
  }));
});

然后我将规范修改为此，前两个测试通过，第三个测试失败并显示以下消息：

失败：尝试使用已破坏的视图：detectChanges

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';

let fixture;
let app;

describe('App: Ng2CliTest2', () => {
  beforeAll(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    });
    fixture = TestBed.createComponent(AppComponent);
    app = fixture.debugElement.componentInstance;        
  });

  it('should create the app', async(() => {
    expect(app).toBeTruthy();
  }));

  it(`should have as title 'app works!'`, async(() => {
    expect(app.title).toEqual('app works!');
  }));

  it('should render title in a h1 tag', async(() => {
    fixture.detectChanges();
    let compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('app works!');
  }));
});

我不明白为什么会有任何失败。

Answer 1

在不知不觉中，Angular 实际上是 resets the testing module 在它自己的卧底 beforeEach (see testing.ts)

var _global = <any>(typeof window === 'undefined' ? global : window);

// Reset the test providers and the fake async zone before each test.
if (_global.beforeEach) {
  _global.beforeEach(() => {
    TestBed.resetTestingModule();
    resetFakeAsyncZone();
  });
}

我什至没有尝试过，但是如果您想知道它是如何工作的，可以尝试并（安全地）禁用此功能，这就是我想出的：

您已导入配置中的某处

@angular/core/bundles/core-testing.umd.js

这在karma-test-shim.js 文件中有很多次。这个文件几乎包含了我们在 Angular 测试中使用的所有测试工具。它几乎是从testing module 导出的所有内容的汇编。这包括上述添加全局beforeEach 调用的测试文件。

如果从上述信息中看不出你的beforeAll 只适用于第一次测试，那么 Angular 会重置测试台。所以下一个测试你尝试从一个空的测试台配置创建一个组件。

Answer 2

对于正在寻找一种方法来真正防止 Angular 重置测试平台的人：see this article

相关部分：

import { TestBed, TestModuleMetadata } from '@angular/core/testing';
const resetTestingModule = TestBed.resetTestingModule;
const preventAngularFromResetting = () => TestBed.resetTestingModule = () => TestBed;
const allowAngularToReset = () => {
  resetTestingModule();
  TestBed.resetTestingModule = resetTestingModule;
};
export const setUpTestBed = (moduleDef: TestModuleMetadata, ...funcs: (() => void)[]) => {
  beforeAll(done => (async () => {
    resetTestingModule();
    preventAngularFromResetting();

    TestBed.configureTestingModule(moduleDef);
    funcs.forEach(func => func());

    TestBed.resetTestingModule = () => TestBed;
    return await TestBed.compileComponents();
  })().then(done).catch(done.fail));

  afterAll(() => allowAngularToReset());
};