大家好,
我挣扎了好几天,在这里提出了一些问题,我把它们缩小到这个问题。
我有以下babel配置:
{
"presets": [
[
"@babel/env",
{
"modules": false,
}
]
],
"plugins": [
[
"@babel/plugin-transform-runtime", //target environment are not supported
{
"corejs": 3,
"helpers": true,
"regenerator": true
}
]
]
}
我也有一个茉莉花与webpack的设置,我正试图测试我写的一些模块。但问题是,在Jasmine中,他们设置了setTimeout的自定义定义,但我使用的babel配置包含不会污染全局环境的填充,这就是为什么我不能使用Jasmine提供的一些功能每次我必须通过Jasmine测试时,我不得不使用window。map(这里)或window。setTimeout(这里)
我已经向这里的茉莉花团队提出了建议,有人给了我一个有用的答复。
我想知道在babel中是否有任何方法可以帮助我测试我的模块。
任何建议将不胜感激!
经过多日的斗争,提出了多个问题,都深入到这个答案。(我会尝试在这里添加我所有的r&d)
首先,我使用下面的babel配置,因为我正在编写库。此处
{
"presets": [
[
"@babel/env",
{
"modules": false,
}
]
],
"plugins": [
[
"@babel/plugin-transform-runtime", //target environment are not supported
{
"corejs": 3,
"helpers": true,
"regenerator": true
}
]
]
}
同时,我想测试我的模块使用茉莉+ webpack。但问题是在Jasmine内部,他们已经设置了setTimeout的自定义定义以及用于测试地图的多个Matcher的实用程序,我使用的babel的配置包括不会污染全局环境的polyfills。正因为如此,我不能使用茉莉的多个功能,如时钟,地图平等使用等量匹配器。实际上,babel阻止了Jasmine实现使测试脚本失败。详细阅读此处
我向Babel团队提出了这个问题,认为Babel是否有一些配置可以解决我的问题,同时在本地进行单元测试模块,而不会影响我的生产包。
他们建议这不能通过@babel/plugin-transform-runtime实现与corejs选项。
步骤:
- 从@babel/plugin-transform-runtime中删除
corejs: 3
选项 - 安装新的
babel-plugin-polyfill-corejs3
,它类似于transform-runtime的+ corejs选项,但更强大。文档 - 配置babel如下:
["polyfill-corejs3", {
method: "usage-pure",
exclude: ["web.timers"]
}]
注意:"排除"配置显示:
所有填充提供程序接受两个选项:包括和排除。它们是一个字符串数组,将被认为不被目标(包括)支持或被认为是受支持的(排除)。
这个配置让我很开心,它只是说不要为setTimeout和Map Constructor进行polyfill填充,允许Jasmine设置全局定义并使所有测试用例成功运行。因此,解决了我以前问过的问题,这里,这里,这一个也😄。
我将排除设置为:
"exclude": [
"web.timers", //<--For setTimeout
"es.map" //For new Map()
]
最后,我想要的一件事是只为测试脚本设置所有这些配置,这也可以通过babel Env配置BABEL_ENV来实现,babel配置文件将读取babel配置文件。就像他们在主分支中使用的一样。阅读此处和此处
最终的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"]
}]
]
}
}
测试脚本包。Json格式为:
"test": "BABEL_ENV=test npm run karma",
希望对遇到类似问题的人有所帮助。