Angular 2 的 Karma 设置。

Question

我正在尝试使用 Jasmine 设置 Karma 以测试我的 Angular2 应用程序。 Karma 无法在规范文件中附加导入扩展名。例如我的规范文件有 import {TileComponent} from './tiles.component'; 当我运行 Karma 时，出现以下错误：http://localhost:9876/base/wwwroot/app/tiles/tiles.component 404 (Not Found) 如果我尝试转到此 link 并在末尾手动附加 js，它将加载我的文件。

karma.conf.js:

module.exports = function (config) {

    var appBase = 'wwwroot/app/';
    var appAssets = '/base/app/';

    config.set({
        basePath: '',
        frameworks: ['jasmine'],
        plugins: [
          require('karma-jasmine'),
          require('karma-chrome-launcher'),
          require('karma-htmlfile-reporter')
        ],

        customLaunchers: {
            Chrome_travis_ci: {
                base: 'Chrome',
                flags: ['--no-sandbox']
            }
        },
        files: [               'node_modules/systemjs/dist/system.src.js',

          'node_modules/core-js/client/shim.js',

          'node_modules/reflect-metadata/Reflect.js',
          'node_modules/zone.js/dist/zone.js',
          'node_modules/zone.js/dist/jasmine-patch.js',
          'node_modules/zone.js/dist/async-test.js',
          'node_modules/zone.js/dist/fake-async-test.js',

          // RxJs.
          { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
          { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },

          { pattern: 'node_modules/@angular/**/*.js', included: false, watched: false },
          { pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false },

          { pattern: 'systemjs.config.js', included: false, watched: false },
          //{ pattern: 'karma-test-shim.js', included: false, watched: false },
          //'systemjs.config.js',
          'karma-test-shim.js',
          { pattern: appBase + '**/*.js', included: false, watched: true },

          { pattern: appBase + '**/*.html', included: false, watched: true },
          { pattern: 'wwwroot/styles/**/*.css', included: false, watched: true },

          { pattern: 'app/**/*.ts', included: false, watched: false },
          { pattern: appBase + '**/*.js.map', included: false, watched: false }
        ],

        proxies: {
            "/app/": appAssets
        },

        exclude: [],
        preprocessors: {},
        reporters: ['progress', 'html'],

        htmlReporter: {
            outputFile: '_test-output/tests.html',

            pageTitle: 'Unit Tests',
            subPageTitle: __dirname
        },

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

业力测试-shim.js

// /*global jasmine, __karma__, window*/
Error.stackTraceLimit = Infinity;
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;

__karma__.loaded = function () {
};

function isJsFile(path) {
    return path.slice(-3) === '.js';
}

function isSpecFile(path) {
    return /\.spec\.js$/.test(path);
}

function isBuiltFile(path) {
    var builtPath = '/base/wwwroot/';
    return isJsFile(path) && (path.substr(0, builtPath.length) === builtPath);
}

var allSpecFiles = Object.keys(window.__karma__.files)
  .filter(isSpecFile)
  .filter(isBuiltFile);

System.config({
    baseURL: '/base',
    packageWithIndex: true, // sadly, we can't use umd packages (yet?)
    map: {
        'http://localhost:9876/base/wwwroot/app/app.component': 'http://localhost:9876/base/wwwroot/app/app.component.js'
    }
});

System.import('systemjs.config.js')
  .then(function () {
      return Promise.all([
        System.import('@angular/core/testing'),
        System.import('@angular/platform-browser-dynamic/testing')
      ])
  })
  .then(function (providers) {
      var testing = providers[0];
      var testingBrowser = providers[1];

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

  })
  .then(function () {
      // Finally, load all spec files.
      // This will run the tests directly.
      return Promise.all(
        allSpecFiles.map(function (moduleName) {
            return System.import(moduleName);
        }));
  })
  .then(__karma__.start, __karma__.error);

Answer 1

问题是我导入了两次 system.config.js。我从 karma.conf.js 文件中删除了导入。我还做了一些小的路径更改。

Angular 2 的 Karma 设置。

Karma setup for Angular 2.

karma-jasmine

angular2-testing