TestBed Configuration (Optional)

As you will see in Testing Components, real-world component testing often relies on the Angular2 testing utility TestBed, which requires some configuration. Most significantly, we need to use TestBed.initTestEnvironment to create a testing platform before we can use unit tests with TestBed. This testing environment would have to be created, destroyed and reset as appropriate before every unit test.

In the angular2-redux-starter, this configuration is done in a tests.configure.ts file and imported into every unit test for easy re-use.

  1. import {
  2.   getTestBed,
  3.   ComponentFixtureAutoDetect,
  4.   TestBed,
  5. } from '@angular/core/testing';
  7. import {
  8.   BrowserDynamicTestingModule,
  9.   platformBrowserDynamicTesting,
  10. } from '@angular/platform-browser-dynamic/testing';
  12. export const configureTests = (configure: (testBed: TestBed) => void) => {
  13.   const testBed = getTestBed();
  15.   if (testBed.platform == null) {
  16.     testBed.initTestEnvironment(
  17.       BrowserDynamicTestingModule,
  18.       platformBrowserDynamicTesting());
  19.   }
  21.   testBed.configureCompiler({
  22.       providers: [
  23.         {provide: ComponentFixtureAutoDetect, useValue: true},
  24.       ]
  25.     });
  27.   configure(testBed);
  29.   return testBed.compileComponents().then(() => testBed);
  30. };

tests.configure.ts creates the testing platform if it doesn't already exist, compiles the template, and exports configureTests which can then be imported and used in our unit tests.

Here's a look at how it would be used:

  1. import { TestBed } from '@angular/core/testing';
  2. import { ExampleComponent } from './index';
  3. import { configureTests } from '../../tests.configure';
  4. import { AppModule } from '../../modules/app.module';
  6. describe('Component: Example', () => {
  7.   let fixture;
  9.   beforeEach(done => {
  10.     const configure = (testBed: TestBed) => {
  11.       testBed.configureTestingModule({
  12.         imports: [AppModule],
  13.       });
  14.     };
  16.     configureTests(configure).then(testBed => {
  17.       fixture = testBed.createComponent(ExampleComponent);
  18.       fixture.detectChanges();
  19.       done();
  20.     });
  21.   });

原文: https://angular-2-training-book.rangle.io/handout/testing/intro-to-tdd/setup/testbed-configuration.html