Jest+vue：“找不到模块 ....vue”

Question

我真的只是想为我的库创建一个 jest+vue 的骨架，并很快得到这个错误。 我知道这个结构不是通常的笑话结构，我在这里尝试描述一个带有辅助控件的测试。

这是我的test 文件夹的内容：arrays.specs.ts 和arrays.vue

这里是配置：

module.exports = {
  moduleFileExtensions: [
    "js",
    "ts",
    "vue"
  ],
  roots: [
    "<rootDir>/test"
  ],
  testEnvironment: "jest-environment-jsdom",
  testMatch: [
    "**/?(*.)+(spec|test).[tj]s?(x)"
  ],
  transform: {
    ".*\\.(vue)$": "vue-jest",
    ".*\\.(ts)$": "ts-jest"
  },
};

我已经安装了这 3 个包：@vue/test-utils、ts-jest 和 vue-jest

现在，有了这个，我在运行 jest 时仍然会出现这个错误：

    test/arrays.spec.ts:4:20 - error TS2307: Cannot find module './arrays.vue'.

    import Arrays from './arrays.vue'

我真的看不出我错过了什么。

Answer 1

就我而言，问题在于文件shims-vue.d.ts 位于项目的根目录中。我必须将其移至 ./src 才能加载 .vue 模块。

Answer 2

您可能缺少“垫片”文件。把它放在你的“src”目录中：

shims-vue.d.ts

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

Answer 3

如果vue jest测试出现Cannot find module issue错误，请设置jest.config.js文件的preset属性如下.

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
  testEnvironment: 'node'
}

Answer 4

npm 包vue-jest 正在使用'babel-core'。如果您从 node_modules -> \node_modules\vue-jest\lib\compilers\babel-compiler.js 打开文件，您将看到下面的代码。

const babel = require('babel-core')
const loadBabelConfig = require('../load-babel-config.js')

module.exports = function compileBabel (scriptContent, inputSourceMap, inlineConfig, vueJestConfig, filePath) {
  ...

第一个常量是导入 npm 包babel-core。

如果你用@babel/core 改变它，你的问题应该得到解决。 修改后应该是这样的：

const babel = require('@babel/core')
const loadBabelConfig = require('../load-babel-config.js')

    module.exports = function compileBabel (scriptContent, inputSourceMap, inlineConfig, vueJestConfig, filePath) {
      ...`

我在网上看到过他们建议用 babe-core(7.0.0.0-bridge) 替换 babel-core（版本 6.）的解决方案。就我而言，它破坏了我的解决方案，我无法再发布，但 jest 在 npm 上运行良好。 对于已经设置了 webpack.config.js 并且他们也有 .babelrc 的人来说，这是一个解决方案。

安装 @babel/core : npm install --save-dev @babel/core babel-core 是 babel 的第 6 版，@babel/core 是 babel 的第 7 版。