Vue-test-utils / Jest:如何处理依赖项？

Question

的情况：

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

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

CONFIGURATION:

Vue版本：2.5.17

@vue/test-utils：1.0.0-beta.20

cli-plugin-unit-jest：3.0.3

babel-jest：23.0.1

错误消息：

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

例如，对于史诗式纺纱机，错误是：

SyntaxError: Unexpected token import

​

​

对于vue-径向进展，错误是：

SyntaxError: Unexpected token <

​

​

如何复制：

• 重新安装vue (使用Jest作为单元测试套件)
• 运行示例测试，它应该会通过
• 安装依赖项(例如：npm install --save epic-spinners)
• 导入HelloWorld组件中的依赖项
• 再次运行测试(不更改任何内容)

如果我执行这些步骤，测试就会失败，并使用上面的错误消息。

问题：

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

Answer 1

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

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

转换前与所有源文件路径匹配的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/'
}

Answer 2

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

Answer 3

除了@FrancescoMussi的解决方案之外，如果它仍然不适合您，请确保您的Babel配置按照开玩笑的医生的正确位置。

我已经将我的Babel配置移动到了package.json，因为Vue CLI安装了Babel 7，所以Babel没有检测到。