使用 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 僅在描述函數前添加了“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 中定義。 我從絕對類型網站下載了這個文件。

declare module jasmine {
    ...
}

Answer 1

這是（在我看來）截至 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 2

把它放在你的打字稿規范文件的頂部：

/// <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 3

對我來說，我做了以下事情：

安裝類型

npm install typings --global

然后為茉莉花添加類型

typings install dt~jasmine --save --global

Answer 4

如果導入有問題，請使用tsconfig-paths

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

運行支持打字稿的 jasmine：

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 5

您可以嘗試僅引入@types/jasmine聲明並將 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 使用專門的茉莉花加載器。 只需對編譯后的 js 文件運行 jasmine：

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

假設您的打字稿文件位於編譯為bin/test的“test”子目錄中，並且您有一個test/support/jasmine.json其中包含以下內容：

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

PS 以上所有方法也適用於 Windows

Answer 6

將此包含在您的茉莉花 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 7

由於某種原因，這個問題從來沒有得到妥善回答，當然事情發生了變化，但這里沒有現代答案，我是通過谷歌來到這里的，因為我很懶，而且我有時會谷歌片段。

如果您遇到此問題，請確保已將@typings/jasmine typings @typings/jasmine安裝為devDependency，並且您的tsConfig包含include中的類型，例如

  "include": ["typings/**/*.d.ts"]

Answer 8

你沒有要求這個，而是為了加分：一旦你得到 AJ 的答案並運行（使用ts-node調用 Jasmine 啟動腳本），你可以添加一個新任務：

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

當然，如果您願意，您可以使用 Jasmine 的配置文件傳遞您的規范或任何其他參數。 現在，Jasmine 將運行您的所有規范一次，然后ts-node-dev將坐在后台等待您的測試或他們可能require更改的任何內容，此時jasmine將再次運行。 我還沒有找到一種方法來只運行已更改的測試（或導入已更改的測試）——據我所知，無論如何都不支持；

Answer 9

我的文件夾結構

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());

茉莉花.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"
}

並將“/spec/dist”行添加到.gitignore

運行你的測試！

使用npm test運行您的測試。

它是如何工作的？

1. 測試目錄已清理。
2. 測試被編譯到 JS 的 spec/dist 文件夾。
3. 測試從此位置運行。

我希望它會幫助你。 良好的編碼。