Unit testing Vue test utils | Jest：如何处理依赖关系？

情况：

我正在我的Vue应用程序中实施单元测试，使用带有Jest配置的Vue测试UTIL

当我测试简单的组件时，一切都很好。但当我测试导入其他依赖项的组件时，测试失败

配置：

Vue版本：

2.5.17

@vue/测试工具：

1.0.0-beta.20

cli插件单元笑话：

3.0.3

巴别塔笑话：

23.0.1

错误消息：

确切的错误消息取决于我导入的依赖项

例如，错误为：

SyntaxError: Unexpected token import

SyntaxError: Unexpected token <

错误是：

SyntaxError: Unexpected token import

SyntaxError: Unexpected token <

SyntaxError:意外标记<

如何复制：

• 重新安装vue（使用Jest作为单元测试套件）
• 运行示例测试，它应该通过
• 安装依赖项（例如：

  npm安装--save epic spinners

  ）
• 在HelloWorld组件内导入依赖项
• 再次运行测试（不更改任何内容）

如果执行这些步骤，测试将失败，并显示上述错误消息

问题：

---

如何在vue test utils/Jest中处理依赖项导入？

问题是某些模块可能未正确编译

解决方案是使用Jest设置的属性。也就是说，从文档中：

与所有源匹配的regexp模式字符串数组 转换前的文件路径。如果测试路径与任何 模式，它将不会被转换

就我而言，我就是这样解决这个问题的：

transformIgnorePatterns: [
  "node_modules/(?!epic-spinners|vue-radial-progress)"
],

编辑：

这是我的jest.config.js

module.exports = {
  moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    'vue'
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest',
  },
  transformIgnorePatterns: [
    "node_modules/(?!epic-spinners|vue-radial-progress)"
    // "node_modules/(?!epic-spinners)",
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  testURL: 'http://localhost/'
}

module.exports={
moduleFileExtensions：[
"js",，
“jsx”，
“json”，
“vue”
],
转换：{
“^.+\\.vue$”：“vue jest”，
“.+\（css | styl | less | sass | scss | png | jpg | ttf | woff | woff2）$”：“jest transform stub”，
“^.+\\.jsx？$”：“巴贝尔笑话”，
},
转换信号模式：[
“节点_模块/（？！epic微调器| vue径向进度）”
//“节点_模块/（？！epic微调器）”，
],
模块映射：{
“^@/（.*）$”：“/src/$1”
},
快照序列化程序：[
“jest serializer vue”
],
测试匹配：[
“**/tests/unit/**.spec.（js | jsx | ts | tsx）|**/u测试/**.（js | jsx | ts | tsx）”
],
testURL:'http://localhost/'
}

除了@FrancescoMussi的解决方案外，如果它仍然不适用于您，请确保您的Babel配置按照

---

我已将Babel配置移动到

package.json

，由于Vue CLI安装了Babel 7，Babel没有检测到该配置。将Babel config移回

Babel.config.js

为我解决了这个问题。

除了@FrancescoMussi的答案，在编辑了我的jest.config.js之后，如果您遇到错误：找不到jest transform stub，只需安装它。在我的例子中，我没有安装jest转换存根和jest序列化程序vue。安装了这些之后，我的测试开始工作

npm install --save-dev jest-serializer-vue

及

---

我遇到了完全相同的问题，但使用

transformIgnorePatterns

似乎没有任何作用。你能分享一下你的笑话和巴别塔的配置吗？@AndyPattenden当然。我已经编辑了答案。如果您在jest中编译节点模块时遇到问题，那么您应该能够使用

transformIgnorePatterns

解决该问题。注意正则表达式必须精确，否则它将无法工作。我试了几次。在我的配置中，您可以看到我如何为多个节点模块或仅一个节点模块执行此操作。谢谢。这与我的配置文件相同，但仍然不起作用。我在

package.json

中有我的Babel配置，Jest似乎没有检测到。当我把它移到

babel.config.js

中时，一切都正常了。