使用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屋!