【发布时间】：2017-07-28 09:11:30
【问题描述】：
我正在学习为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 任务时，我收到了这个错误：
ReferenceError: 找不到变量：exports
但是，如果我从 coolcomp.ts 中删除 export 关键字并从 coolcomp.spec.ts 中删除第一行（import..），则测试运行顺利。在 SO 上发布的此类问题已经很少，但没有一个对我有帮助。
有人可以指导我哪里做错了吗？
更新：在 StackOverflow 社区和其他几个论坛的帮助下，我找到了解决这个问题的方法。对于那些希望在这里看到它的人，我的代码存储库的 url：GitHub Link
【问题讨论】：
-
删除模块解决方案。还可以尝试在 tsconfig.json 中添加属性 "types":["mocha", "etc"]
-
@LeonardoVenoso 我试过了。没用:(
-
我的配置和你的一样。这也是我在配置中的内容：文件：[{模式：“file.ts”，包括：真，观看：假}，{模式：“file2.ts”，包括：真，观看：假}]，还有插件： [ require("karma-typescript-preprocessor"), ...]
-
这方面有什么进展吗？
-
嗨@LeonardoVenoso 您能否将您的解决方案（文件）发布在我或其他人可以参考的github上。谢谢！
标签： javascript unit-testing typescript mocha.js karma-mocha