Vue-test-utils | Jest：如何处理依赖关系？答案

【问题标题】：Vue-test-utils | Jest: How to handle dependencies?Vue-test-utils | Jest：如何处理依赖关系？
【发布时间】：2019-03-17 14:14:56
【问题描述】：

情况：

我正在我的 Vue 应用程序中实现单元测试，使用带有 Jest 配置的 vue-test-utils。

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

配置：

Vue 版本：2.5.17
@vue/test-utils: 1.0.0-beta.20
cli-plugin-unit-jest: 3.0.3
babel-jest：23.0.1

错误信息：

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

例如epic-spinners 的错误是：

SyntaxError: Unexpected token import

vue-radial-progress 的错误是：

SyntaxError: Unexpected token <

如何复制：

全新安装 vue（使用 Jest 作为单元测试套件）
运行示例测试，应该可以通过
安装依赖项（例如：npm install --save epic-spinners）
在 HelloWorld 组件中导入依赖
再次运行测试（不做任何更改）

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

问题：

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

【问题讨论】：

标签： unit-testing vue.js vuejs2 jestjs vue-test-utils

【解决方案1】：

问题是某些模块可能无法正确编译。

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

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

就我而言，这就是我解决问题的方法：

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/'
}

【讨论】：

我遇到了完全相同的问题，但使用 transformIgnorePatterns 似乎没有做任何事情。你能分享你的 Jest 和 Babel 配置吗？
@AndyPattenden 当然。我已经编辑了答案。如果你有一个由 jest 编译节点模块引起的问题，那么你应该可以使用transformIgnorePatterns 解决它。请注意，正则表达式必须精确，否则它将不起作用。我做了一些尝试。在我的配置中，您可以看到我如何为多个节点模块或一个节点模块执行此操作。
谢谢。这与我的配置文件相同，但仍然无法正常工作。我在package.json 中有我的 Babel 配置，Jest 似乎没有检测到。一旦我把它移到babel.config.js，它就一切正常了。

【解决方案2】：

除了@FrancescoMussi 的解决方案，如果它仍然不适合您，请确保您的 Babel 配置按照Jest docs 位于正确的位置

我已将我的 Babel 配置移至 package.json，由于 Vue CLI 安装 Babel 7，Babel 未检测到该配置。将 Babel 配置移回 babel.config.js 为我解决了这个问题。

【讨论】：

【解决方案3】：

除了@FrancescoMussi 的回答，在编辑完我的 jest.config.js 之后，如果你得到错误：jest-transform-stub not found，只需安装它。就我而言，我没有安装 jest-transform-stub 和 jest-serializer-vue。安装这些之后，我的测试开始工作了。

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

https://www.npmjs.com/package/jest-serializer-vue

和

npm install --save-dev jest-transform-stub

https://www.npmjs.com/package/jest-transform-stub

【讨论】：