Vue3+Jest项目使用@vueform/slider报import语法错误如何解决

核心问题原因 #

报错根源是.babelrc格式的Babel配置默认不会对node_modules目录下的依赖生效，哪怕在Jest中配置了transformIgnorePatterns豁免@vueform/slider的转译忽略规则，Babel也不会处理该依赖的ES模块语法。

分步操作 #

1. 替换Babel配置文件格式 #

将项目根目录下的.babelrc文件重命名为babel.config.json（如果是JS格式的配置就命名为babel.config.js）。

Babel的babel.config.*是项目全局级配置，会对所有匹配路径的文件生效，包括node_modules下的依赖；而.babelrc是目录级配置，默认仅处理配置文件所在目录下的自有代码。

修改后babel.config.json的内容调整为：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      },
      "modules": "auto"
    }]
  ]
}

2. 调整Jest配置 #

修改package.json中的Jest配置，清理重复的transformIgnorePatterns规则，同时删掉之前添加的"type": "module"配置（该配置会和Jest默认的CommonJS运行环境冲突）：

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

3. 可选兜底方案 #

如果上述配置后仍报错，可以直接在Jest配置中添加依赖映射，直接调用@vueform/slider已编译好的UMD兼容版本，无需转译：

"jest": {
  // 其余原有配置保留
  "moduleNameMapper": {
    "^@vueform/slider$": "@vueform/slider/dist/slider.umd.js"
  }
}

4. 验证生效 #

执行以下命令清理Jest缓存后重新运行测试即可：

npx jest --clearCache

内容的提问来源于stack exchange，提问作者Liam Arbel