typescript - 简单的 Karma + Typescript 配置 - 引用错误 : x is not defined

Question

我想使用 Karma 设置一个基本的测试运行器来测试 Typescript 类。

当我运行测试 karma start 时，出现错误 ReferenceError: Calculator is not defined. 据推测，karma runner 可能不会导入转译后的源代码或者预处理器不转译源代码。

我的来源是here in a repo下面有相关部分。我怎样才能使配置工作/我缺少什么？

我目前的理解是，transpiler 和 karma"file"配置属性将为我加载计算器类。

transpiler => lib/calculator.ts => lib/calculator.tsfiles => okay, loading lib/**/.js

/lib/calclulator.ts

export class Calculator{
  add ( a : number , b : number) : number {
    return a + b;
  } 
}

/test/calculator.test.js

describe('Demo Test Runner', function() {
  var calc = new Calculator();
  it('should return 3 for 1 + 2', function() {
   expect( calc.add(1,2) ).toBe(3);
  });
});

包.json

...
"devDependencies": {
  "jasmine-core": "^2.5.2",
  "karma": "^1.3.0",
  "karma-chrome-launcher": "^2.0.0",
  "karma-jasmine": "^1.0.2",
  "karma-typescript-preprocessor": "^0.3.0"
}

karma .conf.js

module.exports = function(config) {
 config.set({

 ...
 frameworks: ['jasmine'],

 files: [
    'lib/**/*.js',
    'test/**/*.js'
  ],


 preprocessors: {
   '**/*.ts': ['typescript']         
 },


 typescriptPreprocessor: {
    // options passed to the typescript compiler 
    options: {
      sourceMap: true, // (optional) Generates corresponding .map file. 
      target: 'ES5', // (optional) Specify ECMAScript target version: 'ES3' (default), or 'ES5' 
      module: 'amd', // (optional) Specify module code generation: 'commonjs' or 'amd' 
      noImplicitAny: true, // (optional) Warn on expressions and declarations with an implied 'any' type. 
      noResolve: true, // (optional) Skip resolution and preprocessing. 
      removeComments: true, // (optional) Do not emit comments to output. 
      concatenateOutput: false // (optional) Concatenate and emit output to single file. By default true if module option is omited, otherwise false. 
    },
    // transforming the filenames 
    transformPath: function(path) {
      return path.replace(/\.ts$/, '.js');
    }
 }
 ...

Answer 1

由于您将计算器定义为

export class Calculator{...}

这意味着您的 /lib/calculator.ts 是一个模块，它的类需要由其他模块导入才能使它们可见(它们不是全局的)。

因此您的 /test/calculator.test.js 需要以某种方式导入此模块。如何执行此操作取决于您在 tsconfig.json

中的模块配置

在您的情况下，您可能希望使用 "module": "commonjs" 或 "module": "amd"。

但是，您需要一个额外的 karma 插件才能加载这些模块。如果你使用 amd 那么像 karma-requirejs 这样的东西，如果你使用 commonjs 你可能需要像 karma-webpack 这样的东西>。然后您需要使用必要的语法将其导入您的 js 文件(例如 var MyCalculator = require('/lib/calculator');)

您的另一种选择是不“导出”您的Calculator 类。这将使它在全局范围内可用。但是，您真的应该尝试使用模块方式工作，因为这是在大型应用程序中推荐的方法。