时间戳

首页 > 解决方案 > Angular 8：已经创建了具有不同配置的平台。请先销毁

angular - Angular 8：已经创建了具有不同配置的平台。请先销毁

问题描述

我正在尝试测试这个简单的测试服务，它基本上通过 getMagicNumber api 提供幻数。它的构造函数通过平台级别的 Injector 提供的 Injection Token 注入一个幻数。

但是在针对 Test Service 执行单元测试时，我遇到了以下错误

Chrome 79.0.3945 (Windows 10.0.0) 错误 afterAll 错误中引发错误：已创建具有不同配置的平台。请先销毁它。在 assertPlatform ( http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.js:31506:1 ) 在http://localhost:9876/_karma_webpack_/webpack:/node_modules/@ angular/core/fesm2015/core.js:31489:1 在 Module../src/main.ts ( http://localhost:9876/_karma_webpack_/webpack:/src/main.ts:11:23 ) 在webpack_require ( http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:78:1 ) 在 Module../src/app/test.service.ts ( http://localhost:9876/_karma_webpack_/main.js: 452:66) 在webpack_require ( http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:78:1 ) 在 Module../src/app/test.service.spec.ts ( http://localhost:9876/ _karma_webpack_/webpack:/src/app/test.service.spec.ts:1:1 )
在webpack_require ( http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:78:1 ) 在 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
      ]
    });

如何解决这个问题。这是源代码的链接。源代码链接

标签： angularkarma-jasminekarma-runner

解决方案

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

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

其中配置平台。请注意，当您导入文件或其成员时，可能会发生一些副作用。因此，您正在引导您的应用程序。但是测试环境已经为你做了。这就是为什么你有错误。不可能两次引导应用程序。 要解决此问题，您需要将令牌声明移到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。

推荐阅读