Vue-测试工具 | Jest：如何处理依赖关系？

Question

情况：

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

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

配置：

Vue 版本：2.5.17
@vue/test-utils: 1.0.0-beta.20
cli-plugin-unit-jest: 3.0.3
巴贝尔玩笑：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 中的依赖项导入？

Answer 1

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

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

An array of regexp pattern strings that are matched against all source file paths before transformation. If the test path matches any of the patterns, it will not be transformed.

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

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/'
  },
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  testURL: 'http://localhost/'
}

Answer 2

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

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

Answer 3

除了@FrancescoMussi 的回答，在编辑我的 jest.config.js 之后，如果您遇到错误：未找到 jest-transform-stub，只需安装它。在我的例子中，我没有安装 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

Vue-测试工具 | Jest：如何处理依赖关系？

Vue-test-utils | Jest: How to handle dependencies?

unit-testing

vue.js

jestjs

vuejs2

vue-test-utils