javascript - Karma - TypeScript - 找不到变量 : exports

Question

我正在学习为用 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: Can't find variable: exports

但是，如果我从 coolcomp.ts 中删除 export 关键字并从 coolcomp.spec.ts 中删除第一行(import..)测试运行顺利。在 SO 上已经有几个这样的问题，但没有一个对我有帮助。
有人可以指导我哪里做错了吗？

更新:在 StackOverflow 社区和其他几个论坛的帮助下，我找到了解决此问题的方法。对于那些希望看到它的人，这里是我的代码存储库的 url:GitHub Link

Answer 1

这就是您的解决方案。暂时去掉sinon。

npm 卸载@types/sinonnpm 卸载 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")
            ]
        })
    }

//TS配置

{
"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"
]

//包.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"
  }
}