Karma没有执行任何测试

Question

我现在遇到一个问题，因为我让Karma开始没有任何问题。我可以在命令行中看到确认我的spec文件，然而，没有测试正在运行，看到＆＃34; Chrome 53.0.2785（Windows 7 0.0.0）：执行0 0错误（0.005秒/ 0秒）＆ ＃34;：

> testingexample@0.0.1 test C:\src\testingexample
> tsc && concurrently "tsc -w" "karma start karma.conf.js"

[1] [WARNING] Looking up paths with require.resolve() is deprecated.
[1] Please add "systemjs" to your SystemJS config paths.
[1] [WARNING] Looking up paths with require.resolve() is deprecated.
[1] Please add "traceur" to your SystemJS config paths.
[1] 27 09 2016 16:06:07.265:WARN [karma]: No captured browser, open http://localhost:9876/
[1] 27 09 2016 16:06:07.307:WARN [karma]: Port 9876 in use
[1] 27 09 2016 16:06:07.309:INFO [karma]: Karma v1.3.0 server started at http://localhost:9877/
[1] 27 09 2016 16:06:07.309:INFO [launcher]: Launching browser Chrome with unlimited concurrency
[1] 27 09 2016 16:06:07.364:INFO [launcher]: Starting browser Chrome
[1] 27 09 2016 16:06:08.151:INFO [Chrome 53.0.2785 (Windows 7 0.0.0)]: Connected on socket /#r4UrKTjwWvF4GtokAAAA with i
d 75686393
    Chrome 53.0.2785 (Windows 7 0.0.0): Executed 0 of 0 ERROR (0.004 secs / 0 secs)
[1] 27 09 2016 16:06:10.172:INFO [watcher]: Changed file "C:/src/testingexample/test/1st.spec.js".
[1] 27 09 2016 16:06:10.194:INFO [watcher]: Changed file "C:/src/testingexample/test/components/header/header.spec.js".
[0] 4:06:10 PM - Compilation complete. Watching for file changes.
    Chrome 53.0.2785 (Windows 7 0.0.0): Executed 0 of 0 ERROR (0.005 secs / 0 secs)

项目结构：

app/
├── common/
├── components/
|   └── header/
|       ├── header.component.css
|       ├── header.component.html
|       └── header.component.ts
test/
├── components/
|   └── header/
|       └── header.spec.ts
├── models/
└── services/
karma-test-shim.js
karma.conf.js
systemjs.config.js

packages.json（可能因为试图让所有事情都没有错误而被污染）：

{
  "name": "testingexample",
  "version": "0.0.1",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "test-once": "tsc && karma start karma.conf.js --single-run",
    "lite": "lite-server",
    "lint": "tslint ./app/**/*.ts -t verbose",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "systemjs": "0.19.27",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.23",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "brfs": "^1.4.3",
    "browserify": "^13.1.0",
    "concurrently": "^2.2.0",
    "http-server": "^0.9.0",
    "jasmine": "^2.5.2",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-browserify": "^5.1.0",
    "karma-chrome-launcher": "^0.2.3",
    "karma-cli": "^0.1.2",
    "karma-htmlfile-reporter": "^0.2.2",
    "karma-jasmine": "^0.3.8",
    "karma-systemjs": "^0.15.0",
    "lite-server": "^2.2.0",
    "phantomjs": "^2.1.7",
    "protractor": "^3.3.0",
    "traceur": "0.0.111",
    "tslint": "^3.7.4",
    "typescript": "^2.0.2",
    "typings": "^1.0.4",
    "watchify": "^3.7.0"
  }
}

karma-test-shim.js（这个似乎很标准）：

// #docregion
// /*global jasmine, __karma__, window*/
Error.stackTraceLimit = 0;

jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;

var builtPath = '/base/app/';

__karma__.loaded = function () { };

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

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

function isBuiltFile(path) {
  return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
}

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

System.config({
  baseURL: '/base',
  // Extend usual application package list with test folder
  packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } },

  // Assume npm: is set in `paths` in systemjs.config
  // Map the angular testing umd bundles
  map: {
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
  },
});

System.import('systemjs.config.js')
  .then(importSystemJsExtras)
  .then(initTestBed)
  .then(initTesting);

/** Optional SystemJS configuration extras. Keep going w/o it */
function importSystemJsExtras(){
  return System.import('systemjs.config.extras.js')
  .catch(function(reason) {
    console.log(
      'WARNING: System.import could not load "systemjs.config.extras.js"; continuing without it.'
    );
    console.log(reason);
  });
}

function initTestBed(){
  return Promise.all([
    System.import('@angular/core/testing'),
    System.import('@angular/platform-browser-dynamic/testing')
  ])

  .then(function (providers) {
    var coreTesting    = providers[0];
    var browserTesting = providers[1];

    coreTesting.TestBed.initTestEnvironment(
      browserTesting.BrowserDynamicTestingModule,
      browserTesting.platformBrowserDynamicTesting());
  })
}

// Import all spec files and start karma
function initTesting () {
  return Promise.all(
    allSpecFiles.map(function (moduleName) {
      return System.import(moduleName);
    })
  )
  .then(__karma__.start, __karma__.error);
}

karma.conf.js：

// #docregion
module.exports = function(config) {

  var appBase    = 'app/';       // transpiled app JS and map files
  var appSrcBase = 'app/';       // app source TS files
  var appAssets  = 'app/'; // component assets fetched by Angular's compiler

  var testBase    = 'test/';       // transpiled test JS and map files
  var testSrcBase = 'test/';       // test source TS files

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

    customLaunchers: {
      // From the CLI. Not used here but interesting
      // chrome setup for travis CI using chromium
      Chrome_travis_ci: {
        base: 'Chrome',
        flags: ['--no-sandbox']
      }
    },
    files: [
      // System.js for module loading
      'node_modules/systemjs/dist/system-polyfills.js',
      'node_modules/systemjs/dist/system.src.js',

        // Reflect and Zone.js
      'node_modules/reflect-metadata/Reflect.js',

      'node_modules/zone.js/dist/zone.js',
      'node_modules/zone.js/dist/long-stack-trace-zone.js',
      'node_modules/zone.js/dist/async-test.js',
      'node_modules/zone.js/dist/fake-async-test.js',
      'node_modules/zone.js/dist/sync-test.js',
      'node_modules/zone.js/dist/proxy.js',
      'node_modules/zone.js/dist/jasmine-patch.js',

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

      // Angular 2 itself and the testing library
      {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
      {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},

      'karma-test-shim.js',


      'test/**/*spec.js'
    ],

    // Proxied base paths for loading assets
    proxies: {
      // required for component assets fetched by Angular's compiler
      "/app/": appAssets
    },

    exclude: [],
    preprocessors: {

    },

    reporters: ['progress', 'html'],

    // HtmlReporter configuration
    htmlReporter: {
      // Open this file to see results in browser
      outputFile: '_test-output/tests.html',

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

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

最后，systemjs.config.js：

(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries
      'rxjs':                       'npm:rxjs',
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular2-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

我知道这很重要 - 我希望我做的事情显然是错的。

Answer 1

我认为这是因为业力不会查看您的规范文件，例如测试文件。

当它告诉您已检测到更改时：

[1] 27 09 2016 16:06:10.194:INFO [watcher]: Changed file "C:/src/testingexample/test/components/header/header.spec.js".

这并不意味着它是一个测试文件。

要告诉业力哪些文件是测试文件，您可以在 karma-test-shim.js

中看到

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

它告诉业力加载所有文件，然后只保留那些

• isSpecFile：以.spec.js
结尾的内容
• isBuiltFile：构建路径/base/app/
下的内容

在您的情况下，您的测试不在app目录中，因此您必须删除.filter(isBuiltFile)，以便业力可以处理您 spec.js 作为测试。< / p>

我查看了自己的业力测试项目，发现了一些不同之处。

在我的 karma.conf.js

中

• 我没有任何SystemJS插件。

  frameworks: ['jasmine'],
  plugins   : [
      require('karma-jasmine'),
      require('karma-chrome-launcher')
  ],
  

• 我已将已编译的应用和测试JS添加到files，而不是'test/**/*spec.js'。

  {pattern: appBase + '**/*.js', included: false, watched: true},
  {pattern: testBase + '**/*.js', included: false, watched: true},
  

  我不知道业力是否允许模式而不使用{pattern: 'test/**/*spec.js', ...}。

在我的 karma-test-shim.js

中

• 我没有使用 systemjs.config.extras.js ，所以我删除了所有相关代码。

Answer 2

愿意为我的解决方案做出贡献，希望有人在将来发现它有用。

首先，我使用此setup启动了我的项目。

我希望将此测试放在 spec / 文件夹中，遵循以下结构：

src
└── app/
    ├── components/
    |       └── app.component.ts
    ├── models/
    └── services/
    main.ts
spec/
└── components/
    └── app.component.spec.ts
karma-test-shim.js
karma.conf.js
systemjs.config.js

为了完成这项工作，我做了三处改动：

1.-更改 karma.config.js 中的默认测试文件夹：

...
// Testing helpers (optional) are conventionally in a folder called `testing`
var testingBase    = 'spec/'; // transpiled test JS and map files
var testingSrcBase = 'spec/'; // test source TS files
...

2.-在运行npm test时构建 spec / 文件夹，这正在更改 package.json 文件：

{
  "name": "my app",
  "version": "1.0.0",
  ...
  "scripts": {
    ...
    "build:test": "tsc -p spec/",
    ...
    "test": "concurrently \"npm run build:test\" \"npm run build:watch\" \"karma start karma.conf.js\"",
    ...
  }
  ...
}

3.-在 spec / 文件夹中创建 tsconfig.json 文件，信息为：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

在运行npm test时， tsc 将构建生成 .js 和 .js的所有 .ts 文件。图。之后，业力将在 spec / 文件夹中运行测试。

似乎测试运行了两次，但不确定是否与此配置相关或者angular2如何工作。

希望这有助于其他人。

干杯。 ：）