使用Webpack和Typescript的Karma不执行任何测试 [英] Karma with Webpack and Typescript performs no tests

问题描述

我试图弄清楚如何将Karma testrunner与Webpack和Typescript源文件一起使用.以该源文件作为唯一的测试文件为例:

I'm trying to figure out how to use the Karma testrunner with Webpack and Typescript source files. Taking this source file as the only test file as an example:

test.spec.ts

var message: string = 'yay';
alert(message);
describe('1st tests', () => {
  it('true is true', () => expect(true).toBe(true));
});

以及以下业力配置:

karma.config.js

module.exports = function (config) {

  config.set({
    basePath: '',
    frameworks: ['jasmine'],

    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-webpack'),
      require('karma-jasmine-html-reporter')
    ],

    client: {
      builtPaths: ['app/'], // add more spec base paths as needed
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },

    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: [
      { pattern: 'app/test.spec.ts', included: true, watched: true },
    ],

    exclude: [],
    preprocessors: {
      // add webpack as preprocessor
      'app/test.spec.ts': ['webpack']
    },

    webpack: {
      // karma watches the test entry points
      // (you don't need to specify the entry option)
      // webpack watches dependencies

      // webpack configuration
      resolve: {
        //root: [ path.join(__dirname, 'app') ],
        extensions: ['', '.ts', '.js']
      },
      module: {
        loaders: [
          // .ts files for TypeScript
          { test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader'], exclude: '/node_modules/' },
        ]
      }
    },
    reporters: ['progress', 'kjhtml'],

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

运行karma start时未找到测试.浏览器将启动，但表示找到0个测试.当我将.ts扩展名更改为.js并更新业力配置文件时，它确实可以工作，因此很明显是因为Typescript弄乱了它.

No tests are found when running karma start. The browser will start, but it says it finds 0 tests. When I change the .ts extension to be .js and update the karma config file it does work, so clearly it's the Typescript that messes it up.

但是，当使用上述配置手动运行webpack时，它只会输出正确的javascript文件，因此配置看起来确实不错...

However, when running webpack manually with the configuration above, it'll just output a proper javascript file, so the configuration does seem ok...

为完整起见，这些是package.json和tsconfig.json文件:

To be complete, these are the package.json and tsconfig.json files:

package.json

{
  "name": "karma-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "karma": "karma init"
  },
  "author": "",
  "license": "ISC",
  "private": true,
  "devDependencies": {
    "@types/jasmine": "^2.5.41",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "^3.0.0-beta.18",
    "jasmine-core": "^2.5.2",
    "karma": "^1.4.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-webpack": "^2.0.1",
    "typescript": "^2.1.5",
    "webpack": "^1.14.0"
  }
}

tsconfig.json

{
    "compileOnSave": false,
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true
    },
    "awesomeTypescriptLoaderOptions": {
        "useWebpackText": true
    },
    "exclude": [
        "node_modules"
    ]
}

推荐答案

您必须为Typescript文件添加mime类型.否则，Chrome将不会运行这些文件.

You have to add the mime type for Typescript files. Otherwise, Chrome won't run these files.

mime: {
  'text/x-typescript': ['ts']
}

这篇关于使用Webpack和Typescript的Karma不执行任何测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！