如何使用 Jasmine 测试带有 babel 配置（对于库）的代码设置？

Question

大家好，

我苦苦挣扎了好几天，提出了几个问题here here，我已经将它们缩小到这个问题。

我有以下 babel 配置：

{
    "presets": [
        [
            "@babel/env",
            {
                "modules": false,
            }
        ]
    ],
    "plugins": [
        [
            "@babel/plugin-transform-runtime", //target environment are not supported
             {
                 "corejs": 3,
                 "helpers": true,
                 "regenerator": true
             }
        ]
    ]
}

我也有一个带有 webpack 的 jasmine 设置，我正在尝试测试我编写的一些模块。但问题出在 Jasmine 内部，他们设置了 setTimeout but the configuration of babel that I am using has included polyfills that will not pollute global environment and That’s why I am not able to use some of the feature’s provided by Jasmine and every time I have to pass my jasmine test I had to use window.Map(here) or window.setTimeout(here)

的自定义定义

我已经加到茉莉花队here and someone gave me a helpful response。

我想知道 babel 中是否有任何方法可以帮助我测试我的模块。

如有任何建议，我们将不胜感激！

Answer 1

经过多日与多个问题的斗争，所有问题都深入到这个答案。（将尝试在此处添加我所有的研发）

首先，我在编写库时使用了以下 babel 配置。使用了 Here

中的建议配置

{
    "presets": [
        [
            "@babel/env",
            {
                "modules": false,
            }
        ]
    ],
    "plugins": [
        [
            "@babel/plugin-transform-runtime", //target environment are not supported
             {
                 "corejs": 3,
                 "helpers": true,
                 "regenerator": true
             }
        ]
    ]
}

同时我想用Jasmine + webpack. But the problem is inside Jasmine they have set custom definition of setTimeout as well as multiple Matcher's utility for testing Maps and the configuration of babel that I am using has included polyfills that will not pollute global environment. Because of this I was not able to use multiple feature's of jasmine like Clock, Maps Equality using equals Matchers. Actually babel was preventing Jasmine implementation making test script to fail. Detail Read Here

测试我的模块

我就这个问题联系了 Babel 团队，我想如果 babel 有一些配置可以同时解决我在本地单元测试模块的问题，它不会影响我的生产包。

他们建议用@babel/plugin-transform-runtime无法实现使用 corejs 选项。

执行步骤：

删除@babel/plugin-transform-runtime

corejs: 3

安装新的 babel-plugin-polyfill-corejs3，它类似于 transform-运行time 的 + corejs 选项，但更强大。 Documentation
像下面这样配置你的 babel:

["polyfill-corejs3", {
  method: "usage-pure",
  exclude: ["web.timers"]
}]

注意：“排除”配置表示：

All polyfill providers accept two options: include and exclude. They are an array of strings to polyfills to be considered as not supported by the targets (include) or to be considered as supported (exclude).

这个配置让我很开心，它只是说不要对 setTimeout 和 Map Constructor 进行 polyfill 填充，允许 Jasmine 设置全局定义并使所有测试用例成功运行。因此解决了我之前提出的问题 here here 而这个也是。

我将排除设置为：

"exclude": [
     "web.timers", //<--For setTimeout
     "es.map"   //For new Map()
]

最后，我想要的一件事是只为测试脚本设置所有这些配置，这也可以通过 babel 环境配置 BABEL_ENV 实现，它将被 babel 配置文件读取。就像他们在那里使用的那样 master branch. Read Here and here

最终的 babel 配置如下：

{
  "presets": [
    ["@babel/env", { "modules": false }]
  ],
  "plugins": [
    "@babel/transform-runtime",
    ["polyfill-corejs3", { "method": "usage-pure" }]
  ],
  "env": {
    "test": {
      "plugins": [
         ["polyfill-corejs3", {
           "method": "usage-pure",
           "exclude": ["web.timers"]
          }]
       ]
  }
}

package.json 中的测试脚本将是：

"test": "BABEL_ENV=test npm run karma",

希望这对面临类似问题的任何人有所帮助。

如何使用 Jasmine 测试带有 babel 配置（对于库）的代码设置？

How to test code setup with babel configuration(For Library) using Jasmine?

javascript

unit-testing

jasmine

karma-jasmine

babeljs