unit-testing - 如何在 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:

...
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 中的样子:

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$

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

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

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