6

我正在 angularjs 应用程序中探索 JavaScript es6 代码，并使用 grunt babel 将 es6 编译为 es5。

我的单元测试（茉莉花）没有使用 phantomjs 运行 es6 代码。

什么是运行测试的最佳方式？有没有什么插件可以让 jasmine 运行 es6 代码？

4

4 回答 4

6

您可以将 Jasmine 配置为使用 Babel 作为助手并即时转换您的代码。

安装babel-register模块：

npm install --save-dev babel-register

并将其注册为 Jasmine 助手

在您的spec/support/jasmine.json文件中进行以下更改：

{
  "helpers": [
    "../node_modules/babel-register/lib/node.js"
  ]
}

有关更多信息，请参阅 Github 上的piecioshka/test-jasmine-babel存储库。

Babel 6.x 没有默认启用任何转换。您需要明确告诉它要运行哪些转换。你已经在使用 Babel，所以应该安装这些模块。如果没有，您可以使用 npm 安装 ES2015 Preset：

npm install babel-preset-es2015 --save-dev

假设您已经安装了 Babel 和 ES2015 Preset，为了启用它，您必须在.babelrc文件中定义它，如下所示：

{
  "presets": ["es2015"]
}
于 2016-08-11T13:20:02.017 回答
6

这是Babel 7+，Jasmine 3.5.0项目结构的最小设置示例：

☁  jasmine-examples [master] ⚡  tree -a -L 3 -I "node_modules|coverage|.git|.nyc_output"
.
├── .babelrc
├── .editorconfig
├── .gitignore
├── .nycrc
├── .prettierrc
├── LICENSE
├── README.md
├── jasmine.json
├── package-lock.json
├── package.json
└── src
    ├── helpers
    │   ├── console-reporter.js
    │   └── jsdom.js
    └── stackoverflow
        ├── 60138152
        ├── 61121812
        ├── 61277026
        ├── 61643544
        └── 61985831

8 directories, 12 files

开发依赖：

"@babel/preset-env": "^7.9.6",
"@babel/register": "^7.9.0",
"jasmine": "^3.5.0",

npm 脚本：

"scripts": {
  "test": "jasmine --config=./jasmine.json",
  "coverage": "nyc npm run test && nyc report --reporter=html"
}

jasmine.json：

{
  "spec_dir": "src",
  "spec_files": ["**/?(*.)+(spec|test).[jt]s?(x)"],
  "helpers": ["helpers/**/*.js", "../node_modules/@babel/register/lib/node.js"],
  "stopSpecOnExpectationFailure": false,
  "random": true
}

.babelrc：

{
  "presets": ["@babel/preset-env"]
}

这里我们需要注意的是文件路径helpers：

相对于 spec_dir 的文件路径（和 glob）数组，包含在 jasmine 规范之前

helpers选项中的文件路径是相对于 spec_dir，而不是相对项目根路径。这意味着你应该使用

"../node_modules/@babel/register/lib/node.js"

不是

"./node_modules/@babel/register/lib/node.js"

src/61985831/myClass.js：

export class MyClass {
  constructor() {}
}

src/61985831/myClass.spec.js：

import { MyClass } from './myClass';

describe('my class', function () {
  var myClassInstance;
  beforeEach(function () {
    myClassInstance = new MyClass();
  });

  it('is an instance of MyClass', function () {
    expect(myClassInstance).toBeInstanceOf(MyClass);
  });
});

测试结果：

> jasmine-examples@1.0.0 test /Users/ldu020/workspace/github.com/mrdulin/jasmine-examples
> jasmine --config=./jasmine.json "/Users/ldu020/workspace/github.com/mrdulin/jasmine-examples/src/stackoverflow/61985831/myClass.spec.js"


Executing 1 defined specs...
Running in random order... (seed: 66758)

Test Suites & Specs:
(node:57105) ExperimentalWarning: The fs.promises API is experimental

1. my class
   ✔ is an instance of MyClass (4ms)

>> Done!


Summary:

  Passed
Suites:  1 of 1
Specs:   1 of 1
Expects: 1 (0 failures)
Finished in 0.017 seconds

在这里回购：https ://github.com/mrdulin/jasmine-examples

于 2020-05-26T05:06:41.587 回答
2

我花了相当长的时间让 babel 和 jasmine 合作，所以我应该在这里发布我的解决方案：

安装babel-cli包，做标准的 babel 配置（对我来说是.babelrc文件）

我创建了自定义运行器文件：bin/jasmine

#!/usr/bin/env bash
./node_modules/.bin/babel-node ./node_modules/.bin/jasmine $@ --config=spec/support/jasmine.json

这样即使传递参数也有效！bin/jasmine -h虽然总是方便地定义配置路径

于 2018-02-23T17:25:25.553 回答
1

通过在 package.json 中执行以下命令，我设法让它适用于 babel 7+：

"test": "jasmine --config=jasmine.json --require=@babel/register"
于 2021-12-18T12:38:33.827 回答