我正在学习为使用Typescript编写的 Angular 项目编写单元测试用例。为此,我选择了KarmaMocha。这是应用程序结构:

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"
  }
}

07-26 01:03