使用 Jasmine 运行的 Karma 测试找不到 TypeScript 模块

Question

我想用Karma执行的Jasmine测试我的TypeScript代码。

不幸的是，Karma 无法找到我的模块，并且存在"模块名称尚未加载用于上下文"。

我的 TypeScript 类是这样的：

src/ts/Greeter.ts

export default class Greeter {
  name:string;
  constructor(message:string) {
    this.name = message;
  }
  greet() {
    return "Hi " + this.name;
  }
}

dest/js/Greeter.js

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
"use strict";
var Greeter = (function () {
    function Greeter(message) {
        this.name = message;
    }
    Greeter.prototype.greet = function () {
        return "Hi " + this.name;
    };
    return Greeter;
}());
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = Greeter;
},{}]},{},[1]);

这是我的测试文件：

test/ts/GreeterSpec.ts

///<reference path="../../../typings/index.d.ts"/>
import Greeter from "../../../src/ts/Greeter/Greeter";
describe('Greeter', function () {
  it('says Hi', function () {
    var name = 'Joe';
    var greeter = new Greeter(name);
    expect(greeter.greet()).toBe('Hi ' + name);
  });
});

test/js/GreeterSpec.js

"use strict";
///<reference path="../../../typings/index.d.ts"/>
var Greeter_1 = require("../../../src/ts/Greeter/Greeter");
describe('Greeter', function() {
  it('says Hi', function() {
    var name = 'Joe';
    var greeter = new Greeter_1.default(name);
    expect(greeter.greet()).toBe('Hi ' + name);
  });
});

执行测试时，我得到以下响应：

未捕获的错误："../../../src/ts/Greeter/Greeter"没有 已加载以用于上下文。

这是我的编译器配置：

tsconfig.json

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noImplicitAny": true,
    "removeComments": false,
    "sortOutput": true,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

我应该如何在测试规范中声明我的导入以使编译版本找到我的模块？

Answer 1

我犹豫要不要发布这个，因为我不使用 TypeScript，但不应该在你有src/ts/Greeter/...的地方的文件 test/js/GreeterSpec.js

"use strict";
///<reference path="../../../typings/index.d.ts"/>
var Greeter_1 = require("../../../src/ts/Greeter/Greeter");

而是按以下方式src/js/Greeter/...：

"use strict";
///<reference path="../../../typings/index.d.ts"/>
var Greeter_1 = require("../../../src/js/Greeter/Greeter");

换句话说，当你真正想要JavaScript时，看起来你正在调用TypeScript。

Answer 2

我不熟悉 TypeScript，但是当我查看生成的 JavaScript 代码时，我看到的代码无法使用 RequireJS。您收到错误的原因是因为 GreeterSpec.js 中的这段代码：

"use strict";
///<reference path="../../../typings/index.d.ts"/>
var Greeter_1 = require("../../../src/ts/Greeter/Greeter");

这是行不通的，因为采用单个参数的require形式必须出现在define中才能安全执行：

define(function (require) {
    var Greeter_1 = require("../../../src/ts/Greeter/Greeter");

我还看到Greeter.js没有调用define因此 RequireJS 在解决require("../../../src/ts/Greeter/Greeter")时会遇到问题。（一般来说，RequireJS 配置中的shim可能会有所帮助，但我认为使用特定代码，a） 它无济于事，b） 没有必要。

我在您的编译配置中看到您"module": "commonjs".有问题的代码实际上是好的CommonJS代码。但是，RequireJS想要加载AMD模块，并且我看到"module": "amd"是一个可能的值，因此我将切换到此值。