我正在学习为使用Typescript
编写的 Angular 项目编写单元测试用例。为此,我选择了Karma
和Mocha
。这是应用程序结构:
Project/
├── app/
│ └── components/
│ └── mycoolcomponent/
│ ├── coolcomp.spec.ts
│ └── coolcomp.ts
│
├── node_modules/
│
├── gulpfile.js
│── karma.conf.js
│── package.json
└── tsconfig.json
这是 karma.conf.js :
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['mocha', 'chai', 'sinon'],
files: [
'app/components/mycoolcomponent/coolcomp.ts',
'app/components/mycoolcomponent/coolcomp.spec.ts'
],
exclude: [
],
preprocessors: {
'**/*.ts': ['typescript']
},
typescriptPreprocessor: {
options: {
sourceMap: true, // generate source maps
noResolve: false // enforce type resolution
},
transformPath: function (path) {
return path.replace(/\.ts$/, '.js');
}
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome', 'IE', 'PhantomJS'],
singleRun: true,
concurrency: Infinity
})
}
tsconfig.json :
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "system",
"moduleResolution": "node",
"noImplicitAny": false,
"outDir": "Scripts/app",
"removeComments": false,
"sourceMap": true,
"target": "es6",
"inlineSources": true
},
"exclude": [
"node_modules",
"wwwroot",
"typings/boot",
"typings/boot.d.ts"
]
}
Gulp任务:
gulp.task('test', function (done) {
new Server({
configFile: __dirname + '/karma.conf.js',
singleRun: true
}, done).start();
});
Package.json 具有以下开发依赖关系:
"devDependencies": {
"@types/chai": "^4.0.1",
"@types/expect": "^1.20.1",
"@types/mocha": "^2.2.41",
"@types/sinon": "^2.3.3",
"chai": "^4.1.0",
"del": "2.2.2",
"gridstack": "^0.3.0",
"gulp": "^3.9.1",
"gulp-sourcemaps": "2.4.1",
"gulp-typescript": "3.1.7",
"karma": "^1.7.0",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.2.0",
"karma-ie-launcher": "^1.0.0",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.4",
"karma-sinon": "^1.0.5",
"karma-typescript-preprocessor": "^0.3.1",
"merge": "1.2.0",
"mocha": "^3.4.2",
"phantomjs": "^2.1.7",
"sinon": "^2.4.1",
"typescript": "^2.4.2",
"typings": "2.1.0"
}
coolcomp.ts :
export class Calculator {
add(x: number, y: number): number {
return x + y;
}
}
coolcomp.spec.ts :
import { Calculator } from "./coolcomp";
var expect = chai.expect;
describe("Calculator Mocha", () => {
var calculator;
beforeEach(() => {
calculator = new Calculator();
});
xit("can add", () => {
var result = calculator.add(5, 5);
expect(result).to.be.equal(1);
});
});
当我运行gulp任务时,出现此错误:
但是,如果我从 coolcomp.ts 中删除了
export
关键字,并且从 coolcomp.spec.ts 中删除了第一行(导入),则测试运行顺利。这样的问题已经很少出现在SO上了,但是没有一个帮助我。有人可以指导我做错了什么吗?
更新:在StackOverflow社区和其他一些论坛的帮助下,我已经找到了解决此问题的方法。对于那些希望看到它的人,这里是我的代码存储库的网址:GitHub Link
最佳答案
这是您的解决方案。取出sinon片刻。
npm卸载@ types / sinon
npm卸载sinon
测试tsc是否可以从命令行运行。
然后从命令行执行:“karma start”。不用喝了
// Karma configuration
module.exports = function (config) {
config.set({
basePath: "",
frameworks: [ "karma-typescript" , "mocha", "chai" ],
files: [
{ pattern: "app/components/mycoolcomponent/**/*.ts", included: true, watches: false }
],
preprocessors: { "app/components/mycoolcomponent/**/*.ts": ["karma-typescript"] },
port: 8081,
typescriptPreprocessor: {
options: {
sourceMap: true,
noResolve: false
},
transformPath: function(path) {
return path.replace(/\.ts$/, ".js");
}
},
browsers: [ "Chrome" ],
reporters: [ "progress", "mocha", "karma-typescript" ],
autoWatch: true,
singleRun: false,
concurrency: Infinity,
plugins: [
require("karma-typescript"),
require("karma-chrome-launcher"),
require("karma-sourcemap-writer"),
require("karma-mocha-reporter"),
require("karma-mocha"),
require("karma-chai")
]
})
}
// TSCONFIG
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"noEmitOnError": false,
"noImplicitAny": false,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"allowJs": true,
"removeComments": true,
"inlineSourceMap": true
},
"types": [
"node",
"mocha",
"chai",
"expect"
],
"version": "2.4.1",
"include": [
"app/**/*.ts"
]
}
// PACKAGE.JSON
{
"name": "unittestingwithkarmamocha",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@types/chai": "^4.0.1",
"@types/expect": "^1.20.1",
"@types/mocha": "^2.2.41",
"chai": "^4.1.0",
"gulp": "^3.9.1",
"karma": "^1.7.0",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage": "^1.1.1",
"karma-ie-launcher": "^1.0.0",
"karma-mocha": "^1.3.0",
"karma-mocha-reporter": "^2.2.3",
"karma-sinon": "^1.0.5",
"karma-source-map-support": "^1.2.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-sourcemap-writer": "^0.1.2",
"karma-typescript": "^3.0.4",
"karma-typescript-preprocessor": "^0.3.1",
"mocha": "^3.4.2",
"phantomjs": "^2.1.7",
"systemjs": "^0.20.17",
"typescript": "^2.4.2"
}
}