使用 Jasmine 和 TypeScript 进行单元测试

Question

我正在尝试使用 Jasmine 编译一个用 Typescript 编写的单元测试。在我的单元测试文件中包含以下内容后，Resharper 会提示我一个从 jasmine.d.ts 导入类型的链接。

/// <reference path="sut.ts" />
/// <reference path="../../../scripts/typings/jasmine/jasmine.d.ts" />

describe("Person FullName", function () {
    var person;

    BeforeEach(function () {
        person = new Person();
        person.setFirstName("Joe");
        person.setLastName("Smith");
    });

    It("should concatenate first and last names", function () {
        Expect(person.getFullName()).toBe("Joe, Smith");
    });
});

所以我点击链接并得到以下结果（实际上 resharper 只在 describe 函数前加上了“Jasmine.”，所以我手动为其他 Jasmine 调用添加了前缀）：

/// <reference path="sut.ts" />
/// <reference path="../../../scripts/typings/jasmine/jasmine.d.ts" />
import Jasmine = require("../../../Scripts/typings/jasmine/jasmine");

Jasmine.describe("Person FullName", function () {
    var person;

    Jasmine.BeforeEach(function () {
        person = new Person();
        person.setFirstName("Joe");
        person.setLastName("Smith");
    });

    Jasmine.It("should concatenate first and last names", function () {
        Jasmine.Expect(person.getFullName()).toBe("Joe, Smith");
    });
});

但是，导入语句有一条红色波浪线，带有错误消息“无法解析外部模块../../../scripts/typings/jasmine/jasmine。模块不能别名为非模块类型”

知道是什么导致了这个错误吗？我检查了我的项目构建设置中的“模块系统”选项是否设置为 AMD。我还检查了 jasmine 模块是否在 jasmine.d.ts 中定义。我从DefiniteTyped 网站下载了这个文件。

declare module jasmine {
    ...
}

Answer 1

将此添加到您的 jasmine html 文件中，...

<script type="text/javascript" src="jasmine/lib/jasmine-2.0.0/jasmine.js"></script>

...或安装 npm jasmine 包：

npm install --save-dev jasmine

当您使用第二种方式（茉莉花作为模块）时，您必须导入它：

var jasmine = require('jasmine');

或

import jasmine from 'jasmine';

然后更改其他代码：

jasmine.describe("Person FullName", function () {
    var person;

    jasmine.beforeEach(function () {
        person = new Person();
        person.setFirstName("Joe");
        person.setLastName("Smith");
    });

    jasmine.it("should concatenate first and last names", function () {
        jasmine.expect(person.getFullName()).toBe("Joe, Smith");
    });
});

我个人更喜欢不使用 jasmine npm 模块的第一种方式。 （我还没有测试模块）

Answer 2

对我来说，我做了以下事情：

安装类型

npm install typings --global

然后为 jasmine 添加输入

typings install dt~jasmine --save --global

Answer 3

把它放在你的打字稿规范文件的顶部：

/// <reference path="../../node_modules/@types/jasmine/index.d.ts" />
let Jasmine = require('jasmine');

您必须安装以下 Jasmine 模块才能使其工作：

$ npm install jasmine-core jasmine @types/jasmine @ert78gb/jasmine-ts --save-dev

一旦你这样做了，IDE（比如 WebStorm）就会识别 Jasmine 和它的函数，比如 describe()、it() 和 expect().. 所以你不需要在它们前面加上 "Jasmine. "此外，您可以使用 jasmine-ts 模块从命令行运行您的规范文件。全局安装这些命令行工具：

$ npm install -g jasmine @ert78gb/jasmine-ts

然后配置“jasmine”命令行模块，让Jasmine可以找到它的配置文件。然后你应该能够运行 jasmine-ts 并且你的规范文件应该可以从命令行运行：

./node_modules/.bin/jasmine-ts src/something.spec.ts

.. 而且，您也可以将 IDE 配置为这样运行它，并且以这种方式运行调试也应该可以工作（对我有用）。

以这种方式编写测试，您可以在没有 Karma 的情况下在服务器端运行 Jasmine 测试规范，或者使用 Karma 在 Web 浏览器中运行它。相同的打字稿代码。

Answer 4

这是（在我看来）截至 2018 年测试 ts-node 应用程序的最佳方法：

npm install --save-dev typescript jasmine @types/jasmine ts-node

在package.json:

{
  "scripts": {
    "test": "ts-node node_modules/jasmine/bin/jasmine"
  }
}

在jasmine.json 中将文件模式更改为*.ts

"spec_files": ["**/*[sS]pec.ts"],

在您的规范文件中：

import "jasmine";
import something from "../src/something";

describe("something", () => {
    it("should work", () => {
        expect(something.works()).toBe(true);
    });
});

运行测试：

npm test

这将使用本地安装的ts-node 和jasmine 版本。这比使用全局安装的版本要好，因为使用本地版本，您可以确保每个人都使用相同的版本。

注意：如果您有一个 Web 应用而不是节点应用，您可能应该使用 Karma 而不是 Jasmine CLI 运行测试。

Answer 5

如果您有导入问题，请使用tsconfig-paths

npm i ts-node tsconfig-paths types/jasmine jasmine --save-dev

运行支持打字稿的茉莉花：

ts-node -r tsconfig-paths/register node_modules/jasmine/bin/jasmine.js

确保您的 jasmine 将搜索 .ts 文件：

"spec_files": [
    "**/*[sS]pec.ts"
],
"helpers": [
    "helpers/**/*.ts"
],

要测试您的脚本，如果您在项目中使用它们，您可能还需要 polyfill。创建一个包含所需导入的帮助文件，例如 helpers/global/polifill.ts

import 'core-js';

Answer 6

您可以尝试 side-effect only import，它会引入 @types/jasmine 声明并将 jasmine 函数置于全局范围内，因此您无需在每个调用前加上 jasmine.允许从现有的单元测试中快速移植，并且仍然可以与 webpack 配合使用。

// tslint:disable-next-line:no-import-side-effect
import "jasmine";

describe("My Unit Test", () => { /* ... */ } );

当然你还需要安装jasmine和typings：

$ npm i jasmine @types/jasmine --save-dev

但是对于 ts 或 node 不需要专门的 jasmine 加载器。只需对已编译的 js 文件运行 jasmine：

$ node ./node_modules/jasmine/bin/jasmine.js --config=test/support/jasmine.json

假设您的 typescript 文件位于编译为 bin/test 的“测试”子目录中，并且您有一个 test/support/jasmine.json ，内容如下：

{
    "spec_dir": "bin/test",
    "spec_files": [
      "**/*[sS]pec.js"
    ],
    "stopSpecOnExpectationFailure": false,
    "random": false
}

附：以上所有方法也适用于 Windows

Answer 7

您不是要求这个，而是要加分：一旦您启动并运行 AJ 的答案（使用 ts-node 调用 Jasmine 启动脚本），您可以添加一个新任务：

"scripts": {
  "watch": "ts-node-dev --respawn -- ./node_modules/jasmine/bin/jasmine src/**.spec.ts"
}

当然，如果您愿意，您可以使用 Jasmine 的配置文件来传递您的规范或任何其他参数。现在，Jasmine 将运行一次您的所有规范，然后ts-node-dev 将在后台等待您的测试或任何他们可能有require'd 更改，此时jasmine 将再次运行。我还没有找到只运行已更改的测试（或导入已更改的测试）的方法——据我所知，这是not supported anyway;

Answer 8

我的文件夹结构

Spec 文件夹位于项目的根目录

    spec
      \- dist              // compiled tests
      \- helpers           // files modified testing env
         \- ts-console.ts  // pretty prints of results
      \- support
         \- jasmine.json
      \- YourTestHere.spec.ts
      \- tsconfig.json     // tsconfig for your tests

文件内容

ts-console.ts

const TSConsoleReporter = require("jasmine-console-reporter");
jasmine.getEnv().clearReporters();
jasmine.getEnv().addReporter(new TSConsoleReporter());

jasmine.json

{
  "spec_dir": "spec/dist",
  "spec_files": [
     "**/*[sS]pec.js"
  ],
  "helpers": [
    "spec/helpers/**/*.js"
  ],
  "stopSpecOnExpectationFailure": false,
  "random": true
}

在 package.json

中有额外的脚本

"scripts": {
  "test": "rm -rf ./spec/dist && tsc -p ./spec && jasmine"
}

并在 .gitignore

中添加“/spec/dist”行

运行你的测试！

使用npm test 运行您的测试。

它是如何工作的？

1. 测试目录已清理。
2. 测试被编译到 JS 的 spec/dist 文件夹中。
3. 从该位置运行测试。

希望对你有所帮助。良好的编码。