如何在 Jest moduleNameMapper 中正确创建正则表达式答案

【问题标题】：How to properly create regular expressions in Jest moduleNameMapper如何在 Jest moduleNameMapper 中正确创建正则表达式
【发布时间】：2020-03-25 20:20:05
【问题描述】：

我正在尝试使用 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 页面上的 README 后，我尝试使用此配置在我的 jest.config.js 文件中存根 vue-material-design-icons：

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

...但它不起作用。我已经在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

【解决方案1】：

在我的例子中，我忽略了未转换的组件的转换模式（本例中为“vue-material-design-icons”和“vue-simple-spinner”）

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

【讨论】：

【解决方案2】：

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

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)。

【讨论】：