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

Question

我正在尝试使用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 jest.config.js ：

...
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"
},
...

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

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

先感谢您！

Answer 1

我想通了我做错了什么。 首先，这是我的moduleNameMapper配置现在在jest.config.js中的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 ）。

Answer 2

在我的例子中，我忽略了没有被转换的组件的转换模式（在这个例子中是“vue-material-design-icons”和“vue-simple-spinner”）

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