在 Jasmine 中运行 javascript es6 代码

Question

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

我的单元测试 (jasmine) 不能使用 phantomjs 与 es6 代码一起运行。

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

Answer 1

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

安装babel-register模块：

npm install --save-dev babel-register

并将其注册为茉莉花助手

在您的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"]
}

Answer 2

这是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 的文件路径（和 globs）数组，要包含在 jasmine 规范之前

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

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

不是

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

src/61985831/myClass.js：

?  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

src/61985831/myClass.spec.js：

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

测试结果：

> 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