Vue-CLI3现有项目如何移除插件及配置？替换Mocha为Jest方法

好问题！Vue CLI 3+ 确实没有提供一键移除插件的官方命令，不过咱们可以通过手动清理相关依赖、配置和文件，再替换成目标插件的方式来完成。下面是把Mocha换成Jest的具体步骤：

第一步：移除Mocha相关的所有内容 #

• 卸载依赖包：在项目根目录执行命令，卸载Mocha相关的插件和依赖：

  # npm 方式
  npm uninstall @vue/cli-plugin-unit-mocha mocha chai
  # yarn 方式
  yarn remove @vue/cli-plugin-unit-mocha mocha chai
  

• 删除测试文件与目录：删除默认的Mocha测试目录 tests/unit（如果里面全是Mocha风格的测试用例），或者保留目录但替换其中的测试文件为Jest语法。
• 清理配置文件：
  • 打开 vue.config.js，删除所有和Mocha相关的配置项（比如 pluginOptions 里的测试配置）；
  • 编辑 package.json：
    • 删除 scripts 中的 test:unit 旧命令（对应Mocha的那条）；
    • 检查 devDependencies，确保没有残留的Mocha相关包；
    • 移除 eslintConfig.env 中的 mocha: true 配置；
  • 如果 babel.config.js 中有针对Mocha的特殊配置，也一并清理。

第二步：添加并配置Jest插件 #

• 安装Jest插件：通过Vue CLI一键添加Jest单元测试插件，它会自动配置好基础环境：

  vue add @vue/cli-plugin-unit-jest
  

• 迁移测试用例：把原来的Mocha测试代码转换成Jest兼容的语法：
  • 替换Chai断言为Jest原生断言（比如把 expect(val).to.equal(1) 改成 expect(val).toBe(1)）；
  • 调整测试文件的结构，Jest的语法和Mocha大部分兼容，但注意一些细节（比如异步测试的处理）。
• 补充ESLint支持：如果项目用了ESLint，建议安装 eslint-plugin-jest 并在配置中启用，避免语法检查报错：

  npm install eslint-plugin-jest --save-dev
  

  然后在 .eslintrc.js 中添加：

  module.exports = {
    plugins: ['jest'],
    env: {
      'jest/globals': true
    }
  }
  

额外注意事项 #

• 如果项目有自定义的Webpack配置，要确保它不会和Jest的测试打包逻辑冲突；
• 执行 npm run test:unit 验证Jest是否正常运行，检查是否有遗漏的Mocha相关代码导致报错。

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