Question

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

我的单元测试（jasmine）并没有使用phantomjs运行es6代码。

什么是运行测试的最佳方式？是否有任何插件可用于运行es6代码的jasmine？

Answer 1

以下是 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

devDependencies：

"@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）数组，要包含在茉莉花规格之前

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

Answer 2

您可以将Jasmine配置为使用Babel作为帮助程序并动态转换代码。

安装babel-register模块：

npm install --save-dev babel-register

并将其注册为Jasmine助手

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

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

有关更多信息，请参阅Github上的https://winscp.net/eng/docs/message_large_packet存储库。

Babel 6.x未附带默认启用的任何转换。您需要明确告诉它要运行什么转换。您已经在使用Babel，因此应该安装这些模块。如果没有，您可以使用npm：

安装ES2015预设

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

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

{
  "presets": ["es2015"]
}

Answer 3

我花了很多时间来制作babel＆amp;茉莉合作，所以我应该在这里发布我的解决方案：

安装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，而方便配置的路径始终定义

在Jasmine中运行javascript es6代码

3 个答案: