Angular 8:A 已创建具有不同配置的平台。请先销毁它

Question

我正在尝试测试这个简单的测试服务，它基本上通过 getMagicNumber api 提供幻数。它的构造函数通过平台级注入器提供的注入令牌注入一个神奇的数字。

但是在针对测试服务执行单元测试时，出现以下错误

Chrome 79.0.3945 (Windows 10.0.0) ERROR An error was thrown in afterAll Error: A platform with a different configuration has been created. Please destroy it first. at assertPlatform (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:31506:1) at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:31489:1 at Module../src/main.ts (http://localhost:9876/_karma_webpack_/webpack:/src/main.ts:11:23) at webpack_require (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:78:1) at Module../src/app/test.service.ts (http://localhost:9876/_karma_webpack_/main.js:452:66) at webpack_require (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:78:1) at Module../src/app/test.service.spec.ts (http://localhost:9876/_karma_webpack_/webpack:/src/app/test.service.spec.ts:1:1)
at webpack_require (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:78:1) at webpackContext (http://localhost:9876/_karma_webpack_/webpack:/src sync .spec.ts$:9:1) Chrome 79.0.3945 (Windows 10.0.0): Executed 3 of 3 ERROR (0.146 secs / 0.127 secs)

这是来自 test.service.spec.ts 文件的单元测试

    import { TestBed, inject } from "@angular/core/testing";
import { TestService } from "./test.service";
import { MAGIC_NUMBER } from "src/main";

describe("Testing Test Service", () => {
  testService: TestService;
  beforeEach(() => {
    TestBed.configureCompiler({
      providers: [
        {
          provide: MAGIC_NUMBER,
          useValue: 007
        },
        TestService
      ]
    });

    this.testService = TestBed.get(TestService);
  });
  it("Should create TestService", () => {
    expect(this.testService).toBeTruthy();
  });
});

这是测试服务的代码

import { Injectable, Inject } from "@angular/core";
import { MAGIC_NUMBER } from "src/main";

@Injectable({ providedIn: "root" })
export class TestService {
  constructor(@Inject(MAGIC_NUMBER) private magicNumber) {}
  getMagicNumber() {
    return this.magicNumber;
  }
}

如果我在 test.service.spec.ts 文件

中添加这行代码，就会出现上述错误

 TestBed.configureTestingModule({
      providers: [
        {
          provide: MAGIC_NUMBER,
          useValue: 007
        },
        TestService
      ]
    });

如何解决这个问题。这是源代码的link。source-code-link

Answer 1

您从 src/main 导入 MAGIC_NUMBER，但在 src/main 中，您有以下内容：

platformBrowserDynamic([
  {
    provide: MAGIC_NUMBER,
    useValue: 111
  }
])
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));

其中配置平台。请注意，当您导入文件或其成员时，可能会发生一些副作用。因此，您正在 bootstrap 编写您的应用程序。但是测试环境已经为您完成了。这就是为什么你有错误。不可能 bootstrap 应用程序两次。 要解决这个问题，您需要将令牌声明移到 src/main.

之外

例如，您可以创建 src/app/token.ts.

import {InjectionToken} from "@angular/core";

export const MAGIC_NUMBER = new InjectionToken<{}>("MAGIC_NUMBER");

并像这样导入：

import { MAGIC_NUMBER } from "./token";

此外，您想创建一个上下文，将所需类的实例化委托给 Angular。将 TestBed.configureCompiler 替换为 TestBed.configureTestingModule.

 TestBed.configureTestingModule({
  providers: [
    {
      provide: MAGIC_NUMBER,
      useValue: 007
    },
    TestService
  ]
});

我也注意到您的测试文件中存在一些错误，我将在您的 github 存储库上进行 PR。

Answer 2

就我而言，我通过从模块中删除代码解决了这个单元测试问题。

platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err));

因为它已经在 main.ts 文件下。

Angular 8:A 已创建具有不同配置的平台。请先销毁它

Angular 8:A platform with a different configuration has been created. Please destroy it first

karma-runner

karma-jasmine

angular