Javascript 使用 Jasmine 和 TypeScript 进行单元测试

Unit testing using Jasmine and TypeScript

提问by aw1975

I am trying to get a unit test written in Typescript using Jasmine to compile. With the following in my unit-test file, Resharper prompts me with a link to import types from jasmine.d.ts.

我正在尝试使用 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");
    });
});

So I click on the link and end up with the following (actually resharper only prefixed the describe function with "Jasmine.", so I manually prefixed the other Jasmine calls):

因此，我单击链接并最终得到以下内容（实际上，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");
    });
});

However the import statement has a red squiggly line with error message "Unable to resolve external module ../../../scripts/typings/jasmine/jasmine. Module cannot be aliased to a non-module type"

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

Any idea what is causing this error? I've checked that the "Module System" option is set to AMD in my project build settings. I've also checked that the jasmine module is defined in jasmine.d.ts. I downloaded this file from DefinitelyTyped site.

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

declare module jasmine {
    ...
}

回答by AJ Richardson

Here's (in my opinion) the best way to test a ts-nodeapp as of 2018:

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

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

In package.json:

在package.json：

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

In your spec files:

在您的规范文件中：

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

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

To run the tests:

要运行测试：

npm test

This will use the locally installed versions of ts-nodeand jasmine. This is better than using globally installed versions, because with local versions, you can be sure that everyone is using the same version.

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

Note: if you have a web app instead of a node app, you should probably run your tests using Karma instead of the Jasmine CLI.

注意：如果你有一个 Web 应用程序而不是一个节点应用程序，你应该使用 Karma 而不是 Jasmine CLI 来运行你的测试。

回答by Yavin5

Put this at the top of your typescript spec file:

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

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

You must install the following Jasmine modules for that to work:

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

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

Once you do that, the IDE (such as WebStorm) will recognize Jasmine and its functions such as describe(), it(), and expect().. So you don't need to prefix them with "Jasmine." Also, you can run your spec files from the command line using the jasmine-ts module. Install these command line tools globally:

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

$ npm install -g jasmine jasmine-ts

Then configure the "jasmine" command line module so that Jasmine can find its configuration file. Then you should be able to run jasmine-ts and your spec file should run fine from the command line:

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

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

.. and, you can configure your IDE to run it like that as well, and debug runs that way should also work (works for me).

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

Writing your tests this way, you can run a Jasmine test spec on the server side without Karma, or run it in a web browser using Karma. Same typescript code.

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

回答by Andrew Newland

For me I did the following:

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

Install Typings

安装类型

npm install typings --global

Then add the typings in for jasmine

然后为茉莉花添加类型

typings install dt~jasmine --save --global

回答by marcel

Include this to your jasmine html file,...

将此包含在您的茉莉花 html 文件中，...

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

...or install the npm jasmine package:

...或安装 npm jasmine 包：

npm install --save-dev jasmine

when you are using the second way (jasmine as module) you have to import it:

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

var jasmine = require('jasmine');

or

或者

import jasmine from 'jasmine';

then change the other code:

然后更改其他代码：

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

Personally i would prefer the first way without using the jasmine npm module. (I didn't test the module yet)

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

回答by Graeme Wicksted

You could try a side-effect only importwhich brings in the @types/jasminedeclaration and places the jasmine functions into the global scope so you don't need to prefix each call with jasmine.allowing a quick port from existing unit tests and still plays nice with webpack.

您可以尝试仅@types/jasmine引入副作用的导入，它引入声明并将 jasmine 函数放入全局范围，这样您就不需要在每个调用前加上jasmine.允许从现有单元测试中快速移植的前缀，并且仍然可以很好地与 webpack 配合使用。

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

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

Of course you still need to install jasmine and the typings:

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

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

But no need for specialized jasmine loaders for ts or node. Just run jasmine against the compiled js files:

但是不需要为 ts 或 node 使用专门的茉莉花加载器。只需对编译后的 js 文件运行 jasmine：

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

Assuming your typescript files are within a "test" subdirectory compiling to bin/testand you have a test/support/jasmine.jsonwith something like this:

假设您的打字稿文件在编译到的“测试”子目录中，bin/test并且您有test/support/jasmine.json这样的内容：

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

P.S. all of the above works on Windows too

PS 以上所有方法也适用于 Windows

回答by Sergey P. aka azure

If you have issues with imports, use tsconfig-paths

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

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

Run typescript-enabled jasmine:

运行支持打字稿的 jasmine：

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

Ensure that your jasmine will search .ts files:

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

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

To test your scripts you may also need polyfills if you use them in your project. Create a helper file with required imports, like helpers/global/polifill.ts

为了测试你的脚本，如果你在你的项目中使用它们，你可能还需要 polyfill。创建具有所需导入的帮助文件，例如helpers/global/polifill.ts

import 'core-js';