Angular-cli: Unit Test Failures- Error: A platform with a different configuration has been created. Please destroy it first.

Created on 15 Mar 2017 · 5Comments · Source: angular/angular-cli

Karma , Jasmine Failures to creat unit test instance:

Error: A platform with a different configuration has been created. Please destroy it first.
at assertPlatform (http://localhost:9876/base/src/test.ts?3dd3df58e39fbebb2f34c8313262ec136a3cc28e:31208:15) []
at Object.platformBrowserDynamicTesting (http://localhost:9876/base/src/test.ts?3dd3df58e39fbebb2f34c8313262ec136a3cc28e:31191:16) []
at Object. (http://localhost:9876/base/src/test.ts?3dd3df58e39fbebb2f34c8313262ec136a3cc28e:36047:92) []
at attemptSync (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?916005cc407925f4764668d61d04888d59258f5d:1950:24) []
at ZoneQueueRunner.QueueRunner.run (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?916005cc407925f4764668d61d04888d59258f5d:1938:9) []
at ZoneQueueRunner.QueueRunner.execute (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?916005cc407925f4764668d61d04888d59258f5d:1923:10) []
at http://localhost:9876/base/src/test.ts?3dd3df58e39fbebb2f34c8313262ec136a3cc28e:73459:130 []
at Zone.runTask (http://localhost:9876/base/src/test.ts?3dd3df58e39fbebb2f34c8313262ec136a3cc28e:70552:47) [ => ]
at drainMicroTaskQueue (http://localhost:9876/base/src/test.ts?3dd3df58e39fbebb2f34c8313262ec136a3cc28e:70932:35) []
Error: A platform with a different configuration has been created. Please destroy it first.

Versions.

Angular CLI v1.0.0 RC0 & Webpack 2
"@angular/common": "^2.4.8",
"@angular/compiler": "^2.4.8",
"@angular/core": "^2.4.8",
"@angular/forms": "^2.4.8",
"@angular/http": "^2.4.8",
"@angular/platform-browser": "^2.4.8",
"@angular/platform-browser-dynamic": "^2.4.8",
"@angular/router": "^3.4.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"javascript-obfuscator": "^0.9.1",
"json-loader": "^0.5.4",
"karma": "^1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-coverage": "^1.1.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-sourcemap-loader": "^0.3.7",

OS : MacOS Sierra V10.12.3

Files Config :

---- > main.ts:

import './polyfills.ts';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

---- > tsconfig.json:

{
"exclude": [
"test.ts"
],
"compilerOptions": {
"baseUrl": "",
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"es6",
"dom"
],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/@types"
]
}
}

---- > karma.conf.js:

// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html
const path = require('path');

module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
files: [ //src/app/contact/contact.component.spec.ts
{pattern: './src/test.ts', watched: false}
],
preprocessors: {
'./src/test.ts': ['@angular/cli']
},
mime: {
'text/x-typescript': ['ts', 'tsx']
},
coverageIstanbulReporter: {
reports: ['html', 'lcovonly'],
dir: path.join(__dirname, 'coverage'),
'report-config': {
html: {
subdir: 'html'
},
cobertura: {
subdir: 'cobertura'
},
lcovonly: {
file: 'coverage.lcov'
}
},
thresholds: {
statements: 100,
lines: 100,
branches: 100,
functions: 100
},
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev'
},
reporters: config.angularCli && config.angularCli.codeCoverage

  ? ['progress', 'coverage-istanbul']
  : ['progress', 'kjhtml'],

port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false

});
};

---- > test.ts:

import './polyfills.ts';

import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import { getTestBed } from '@angular/core/testing/test_bed';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing/index';

// Unfortunately there's no typing for the __karma__ variable. Just declare it as any.
declare var __karma__: any;
declare var require: any;

// Prevent Karma from running prematurely.
__karma__.loaded = function () {};

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
let context = require.context('./', true, /.spec.ts$/);
// And load the modules.
context.keys().map(context);
// Finally, start Karma to run the tests.
__karma__.start();

---- > app.component.ts:

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {}

---- > app.component.spec.ts:

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
import { BrowserDynamicTestingModule,
platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';

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

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

});

------------------------------------------------ :(
capture d ecran 2017-03-15 a 11 37 32

1 (urgent) bufix

Source

AhmedHadjTaieb

😕1

Most helpful comment

I solved this problem with upgrade 'zone.js' to v0.8.1 and change code in test.ts :
import './polyfills.ts';
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

// Unfortunately there's no typing for the __karma__ variable. Just declare it as any.
declare var __karma__: any;
declare var require: any;

// Prevent Karma from running prematurely.
__karma__.loaded = function () {};