5

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

失败：无法创建组件 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!');
  }));
});

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

4

2 回答 2

7

在不知不觉中，Angular 实际上在它自己的卧底中重置了测试模块beforeEach（请参阅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 测试中使用的所有测试工具。它几乎是从测试模块导出的所有内容的编译。这包括上述添加全局beforeEach调用的测试文件。

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

于 2016-09-28T15:04:51.283 回答
1

对于正在寻找一种方法来实际防止 Angular 重置测试平台的人：请参阅本文

相关部分：

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());
};
于 2019-07-26T11:34:05.377 回答