Angular 2 - Issues running Component tests

问题:

I am trying to run a component test for Angular 2 - rc5 and am getting the following error when I run the tests:

Missing error handler on socket. TypeError: (msg || "").replace is not a function at /project/node_modules/karma/lib/reporter.js:48:23

I concluded that when I comment out the setBaseProviders line (and the lines in the component tests that might make use of these providers) the rest of the test suite runs without issues. Unfortunately, it appears I need these providers in order to run component tests with the TestComponentBuilder.

// other import statements above
import {
  TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS,
  TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
} from '@angular/platform-browser-dynamic/testing';

setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
  TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
// other code below that is currently commented out

I logged the error message from inside node_modules/karma/lib/reporter.js:48 and received the following message: 'A platform with a different configuration has been created. Please destroy it first.'

Below is my package.json file and karma-conf.js. I have also used angular2-CLI in order to set up the initial repository. Any ideas on what may be the issue? Please let me know if there is any other information I could provide to help troubleshoot.

karma.conf

module.exports = function (config) {
  config.set({
    basePath: '..',
    frameworks: ['jasmine'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher')
    ],
    customLaunchers: {
      // chrome setup for travis CI using chromium
      Chrome_travis_ci: {
        base: 'Chrome',
        flags: ['--no-sandbox']
      }
    },
    files: [
      { pattern: 'dist/vendor/es6-shim/es6-shim.js', included: true, watched: false },
      { pattern: 'dist/vendor/zone.js/dist/zone.js', included: true, watched: false },
      { pattern: 'dist/vendor/reflect-metadata/Reflect.js', included: true, watched: false },
      { pattern: 'dist/vendor/systemjs/dist/system-polyfills.js', included: true, watched: false },
      { pattern: 'dist/vendor/systemjs/dist/system.src.js', included: true, watched: false },
      { pattern: 'dist/vendor/zone.js/dist/async-test.js', included: true, watched: false },

      { pattern: 'config/karma-test-shim.js', included: true, watched: true },

      // Distribution folder.
      { pattern: 'dist/**/*', included: false, watched: true }
    ],
    exclude: [
      // Vendor packages might include spec files. We don't want to use those.
      'dist/vendor/**/*.spec.js'
    ],
    preprocessors: {},
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

package.json

{
  "name": "free-code-camp",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng server",
    "postinstall": "typings install",
    "lint": "tslint \"src/**/*.ts\"",
    "format": "clang-format -i -style=file --glob=src/**/*.ts",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.0.0-rc.5",
    "@angular/compiler": "^2.0.0-rc.5",
    "@angular/core": "^2.0.0-rc.5",
    "@angular/http": "^2.0.0-rc.5",
    "@angular/platform-browser": "^2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "^2.0.0-rc.5",
    "d3": "^4.2.2",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.31",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "angular-cli": "0.0.*",
    "clang-format": "^1.0.35",
    "codelyzer": "0.0.14",
    "ember-cli-inject-live-reload": "^1.4.0",
    "jasmine-core": "^2.4.1",
    "jasmine-spec-reporter": "^2.4.0",
    "karma": "^0.13.15",
    "karma-chrome-launcher": "^0.2.3",
    "karma-jasmine": "^0.3.8",
    "protractor": "^3.3.0",
    "ts-node": "^0.5.5",
    "tslint": "^3.6.0",
    "typescript": "^1.8.10",
    "typings": "^0.8.1"
  }
}

回答1:

So I'm quite new to jasmine and karma but I had the same error:

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

This is probably because you've set the base providers in your karma-test-shim.js file.

If that's the case you need to remove this from your unit test:

setBaseTestProviders(
  TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
  TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);

I imagine you can only set the base providers once, so the error might come from elsewhere within your unit test.

karam-test-shim.js should look like this:

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

testing.setBaseTestProviders(
  browser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
  browser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS
);

回答2:

I had a similar error message upgrading to angular rc6 and had to replace

testing.setBaseTestProviders(
  browser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
  browser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS
);

with

testing.TestBed.initTestEnvironment(
  browser.BrowserDynamicTestingModule,
  browser.platformBrowserDynamicTesting()
);

This is listed as breaking change in the RC.5 changelog.