文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Jest moduleNameMapper中正确创建正则表达式

问如何在Jest moduleNameMapper中正确创建正则表达式
EN

Stack Overflow用户

提问于 2019-12-01 00:51:52

回答 2查看 2.3K关注 0票数 2

我正在尝试用vue-test-utils和Jest测试一个Vue CLI项目。我正在使用来自vue-material-design-icons的一些图标，但是当我运行Jest时，它们不会被转换。这是我在运行Jest时得到的错误：

    /path/to/node_modules/vue-material-design-icons/Sitemap.vue:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest) 
    {<template functional>
     ^

    SyntaxError: Unexpected token <

      101 | <script>
      102 | import { mapGetters, mapActions } from "vuex";
    > 103 | import SitemapIcon from "vue-material-design-icons/Sitemap.vue";
          | ^
      104 | import AccessPointIcon from "vue-material-design-icons/AccessPoint.vue";
      105 | import AlphaIcon from "vue-material-design-icons/Alpha.vue";
      106 |

在阅读了jest-transform-stub GitHub页面上的自述文件后，我尝试使用以下配置清除jest.config.js文件中的vue-material-design-icons：

...
moduleNameMapper: {
  "/vue-material-design-icons\/[\w]+.vue/": "jest-transform-stub",
  "^@/(.*)$": "<rootDir>/src/$1"
},
...

...but它不工作。我已经在https://regex101.com/和https://www.regextester.com/中测试了正则表达式，正则表达式在这两个站点上都能正常工作。

如果我将文件路径硬编码到配置中，那么它可以工作：

...
moduleNameMapper: {
  "vue-material-design-icons/Sitemap.vue": "jest-transform-stub",
  "^@/(.*)$": "<rootDir>/src/$1"
},
...

显然，我不想为项目中的每个图标硬编码文件路径。

有人知道正则表达式为什么不起作用吗？

提前谢谢你！

unit-testing

vue.js

testing

jestjs

vue-test-utils

回答 2

Stack Overflow用户

发布于 2020-01-21 07:10:40

我发现我做错了什么。首先，这是我在jest.config.js中的moduleNameMapper配置

moduleNameMapper: {
  "^vue-material-design-icons\/[a-zA-Z0-9$_-]+\.vue$": "jest-transform-stub",
  "^@/(.*)$": "<rootDir>/src/$1"
},

现在，此正则表达式将与代码文件中的任何vue-material-design-icons/IconName.vue导入匹配：

^vue-material-design-icons\/[a-zA-Z0-9$_-]+\.vue$

Jest关于moduleNameMapper配置对象的文档指出：“如果您提供的模块名称没有边界^$，可能会导致很难发现错误。”(请参阅https://jestjs.io/docs/en/configuration#modulenamemapper-objectstring-string。)

所以我把RegEx包在一个插入符号^和一个美元符号$之间(而不是两个正斜杠/之间)，现在一切都正常了。

注意：jest-transform-stub模块是一个简单的模块，“您可以使用...避免在导入非JavaScript资产时出错”(https://github.com/eddyerburgh/jest-transform-stub)。

票数 2

Stack Overflow用户

发布于 2021-05-19 21:51:44

在我的例子中，我忽略了没有被转换的组件的转换模式(本例中的‘vue-material-design-icons’和'vue-simple-spinner‘)

transformIgnorePatterns: [
    "node_modules/(?!vue-material-design-icons|vue-simple-spinner)"
],

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59118274

复制

相似问题

问如何在Jest moduleNameMapper中正确创建正则表达式
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Jest moduleNameMapper中正确创建正则表达式EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Jest moduleNameMapper中正确创建正则表达式
EN