Jest + Vue3 + @Vueform/slider “语法错误：不能在模块外使用导入语句”答案

【问题标题】：Jest + Vue3 + @Vueform/slider "SyntaxError: Cannot use import statement outside a module"Jest + Vue3 + @Vueform/slider “语法错误：不能在模块外使用导入语句”
【发布时间】：2021-12-07 08:17:31
【问题描述】：

我在一个使用@vueform 滑块插件的 Vue 3 项目中使用 Jest 作为测试运行器：

https://github.com/vueform/slider

@vueform/slider/dist/slider.js:1 中的代码触发“SyntaxError: Cannot use import statement outside a module”错误。

我尝试在 package.json 的 Jest 配置中添加“transformIgnorePatterns”条目：

"jest": {
  "testEnvironment": "jsdom",
  "moduleFileExtensions": [
    "js",
    "json",
    "vue"
  ],
  "transform": {
    "^.+\\.(js|jsx)$": "babel-jest",
    "^.+\\.(vue)$": "vue3-jest"
  },
  "transformIgnorePatterns": ["/node_modules/(?!@vueform/slider/)", "node_modules/(?!@vueform/)"]
}

我还在 package.json 中添加了 "type": "module"

并尝试改变

import SliderPrice from "@vueform/slider"

到

const SliderPrice = require("@vueform/slider")

还是出现同样的错误！

有什么想法可以解决这个问题吗？在解决此错误之前，我无法使用 Jest 测试任何内容。

编辑：

我忘了添加这个：最初，错误消息详细信息包括整个（最小化）slider.js 文件。将 "type": "module" 添加到 package.json 后，详细信息现在只包括这一行：

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { toRefs as t, ref as e, computed as r, reactive as n, onMounted as i, onUnmounted as o, watch as a, openBlock as s, createBlock as l, mergeProps as u } from "vue";

编辑 2：

我的 babel 配置在 .babelrc 文件中：

{
  "presets": ["@babel/preset-env"]
}

Vue 是 Laravel 应用程序中的前端设置，但 webpack.mix.js 配置文件不使用 babel。

编辑 3：

经过几个小时的设置，我相信这是与 Babel 相关的：如果我删除我的 .babelrc 文件，那么我开始为我自己的 .vue 文件收到“SyntaxError: Cannot use import statement outside a module”错误。这表明使用 .babelrc 文件，我的 ES6 javascript 文件正在转换为 ES5。

因此，即使在“transformIgnorePatterns”中定义了正确的路径，Babel 也不会将 Vue 插件，例如 @vueform/slider/ 转换为 ES5

【问题讨论】：

这可能不是一个解决方案，但我认为这是值得尝试的。您对transformIgnorePatterns 的使用似乎很危险。阅读this part of Jest docs：如果路径与提供的任何模式匹配，transformIgnorePatterns 将从转换中排除文件。因此，如果您不小心，拆分为多个模式可能会产生意想不到的结果。
我知道 cmets 不应该用于此，但您找到解决方案了吗？我现在遇到了同样的问题
@Nicole，我把它放了几天，然后又回来了，再试一次。我相信我已经确定了问题的根源，尽管我还没有找到解决方案。明天我会更新这个线程，希望有一个解决方案。不要担心它很快就会以一种或另一种方式排序:)

标签： vue.js jestjs vuejs3 babel-jest

【解决方案1】：

对于 vue3 和 2（我没有在 2 上测试过，但应该可以）

npm i -D @babel/preset-env babel-jest

babel.config.js

{
  "presets": ["@babel/preset-env"]
}

vue 文件也有问题。下面我的配置工作正常。

npm i -D @vue/vue3-jest # or 2 if you are on second version

jest.config.js

export default {
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.[t|j]sx?$': 'babel-jest',
    '^.+\\.vue$': '@vue/vue3-jest',
  },
}

【讨论】：