Angular2 RC5 如何正确配置测试模块

Question

我正在更新 Angular2 RC5 的单元测试。 变更日志记录了以下重大变更：

addProviders [已弃用]，请改用TestBed.configureTestingModule

但这似乎只有在尝试在测试中包含服务时才会出错。 我的单元测试用于执行以下操作：

beforeEach(() => addProviders([
    MyService,
    MockBackend,
    ... 
]));

现在应该配置测试模块：

TestBed.configureTestingModule({
    providers: [
        StoryService,
        MockBackend,
        ...
    ]
});

但这现在会引发错误

服务：MyService 遇到声明异常 FAILED

错误：当测试模块已经实例化时，无法配置测试模块。 确保您没有在TestBed.configureTestingModule之前使用inject 。

我已经检查过在configureTestingModule之前没有调用inject 。 这不会影响任何其他组件/指令测试，它们似乎通过得很好。 如何解决此错误以使用 RC5 对服务进行单元测试？ 我意识到我可能必须等到 RC5 的测试文档更新，但对可能的解决方案的任何见解都将不胜感激。

Answer 1

根据我的阅读，您只需要初始化测试环境一次。 然后，您可以在每次测试之前重置测试模块并配置测试模块：

beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [ GridComponent ]
        });
    });

    afterEach(() => {
        TestBed.resetTestingModule();
    });

前期配置是：

var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');

try {
    testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
} catch ($error) {
    console.log("test env failure" + $error);
}

通读代码后，似乎 configureTestingModule 将在内部调用 resetTestingModule 但我喜欢在每个之后声明它以提高可读性。

Answer 2

我有一个类似的问题，并通过重置测试环境修复它：

import {MyService} from './my.service';
import {inject, TestBed} from '@angular/core/testing/test_bed';
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } 
       from '@angular/platform-browser-dynamic/testing';

describe('MyService', () => {
  beforeEach(() => {
    // Must reset the test environment before initializing it.
    TestBed.resetTestEnvironment();

    TestBed
      .initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting())
      .configureTestingModule({
        providers: [
          MyService
        ]
    });
  });

  it('should do something', inject([MyService], (s: MyService) => {
    let r = s.getResult();
    expect(r.length).toBe(2);
  }));
});

谈到 Angular 2，我是个菜鸟，所以我欢迎更多知识渊博的人进行更正。 似乎不必在每次测试中都必须重置和重新初始化测试环境。 不幸的是，这是我能够让它工作的唯一方法。

Answer 3

将TestBed.configureTestingModule放在 beforeEach 中，如下所示：

beforeEach(() => {
    TestBed.configureTestingModule({
        providers: [
            StoryService,
            MockBackend,
            ...
]
    });
});

Answer 4

当 TestBed 有两个或更多规格文件时，在每个之前在 a 之外初始化时会出现问题。

例如：

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));
describe('AppComponent', () => {
  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
 });

将在TestBed测试之前实例化一个TestBed ，而不仅仅是规范文件。 因此，如果您有另一个带有 TestBed 和 beforeEach 的 .spec，它将被解释为 2 个 TestBed，如下所示：

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));
describe('AppComponent', () => {
  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
 });

错误

失败：当测试模块已经实例化时，无法配置测试模块。

会是对的，因为您实例化了两个 TestBed（但在两个规范文件中）。

为了解决这个问题，你必须总是把TestBed定义（所以beforeEach ）放在这样的描述中：

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

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