javascript - 如何使用 Jasmine 使用 babel 配置（对于库）测试代码设置？

问题描述

祝大家好日子，

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

我有以下 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的自定义定义，但我使用的 babel 配置包含不会污染全局环境的 polyfill，这就是为什么我每次都无法使用 Jasmine 提供的某些功能的原因我必须通过我的茉莉花测试我必须使用 window.Map( here ) 或 window.setTimeout( here )

我在这里向茉莉团队提出了建议，有人给了我有用的回应。

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

任何建议将不胜感激！

标签： javascriptunit-testingjasminebabeljskarma-jasmine

经过多天的努力，提出了多个问题，所有这些都深入到这个答案。（将尝试在这里添加我所有的研发）

首先，我在编写库时使用了下面的 babel 配置。从这里使用建议的配置

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

同时我想使用Jasmine + webpack测试我的模块。但问题出在 Jasmine 内部，他们设置了setTimeout的自定义定义以及用于测试Maps的多个 Matcher 实用程序，并且我正在使用的 babel 配置包括不会污染全局环境的 polyfill。因此，我无法使用多个茉莉花功能，例如Clock， Maps Equality using equals Matchers。实际上 babel 正在阻止 Jasmine 实现使测试脚本失败。详细阅读这里

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

他们建议使用带有 corejs 选项的 @babel/plugin-transform-runtime 无法实现这一点。

要做的步骤：

corejs: 3从 @babel/plugin-transform-runtime 中删除选项
安装新的babel-plugin-polyfill-corejs3，类似于 transform-runtime 的 + corejs 选项，但更强大。文档
像下面这样配置你的 babel：

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

注意：“排除”配置说：

所有 polyfill 提供者都接受两个选项：包含和排除。它们是 polyfills 的字符串数组，被视为目标不支持（包括）或被视为支持（排除）。

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

我将排除设置为：

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

最后，我想要的一件事是仅为测试脚本设置所有这些配置，这也可以通过 babel 配置文件读取的 babel Env 配置 BABEL_ENV 来实现。就像他们在那里使用master分支一样。在这里和这里阅读

最终的 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",

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

javascript - 如何使用 Jasmine 使用 babel 配置（对于库）测试代码设置？

问题描述

解决方案

推荐阅读