CDN模式引入Vue的项目如何搭建无npm的组件测试环境

首先明确两个事实：

• 完全脱离npm、零本地安装就能跑的Jest+@vue/test-utils原生配置不存在。Jest的核心执行能力完全基于Node.js生态，所有功能模块都通过npm包分发，没有可直接通过CDN引入、支撑完整测试流程的生产级构建版本
• 但你完全不需要把现有项目改造成重型前端工程，只需要做极少量的最小化配置，就能在不改动原有CDN开发流程的前提下跑通测试

这套方案不会改动你现有的index.php、独立组件、Vuex模块的开发和线上部署逻辑，全程和你原有的CDN加载流程隔离：

• 第一步：在项目根目录执行一次npm init -y，这步操作的唯一作用是生成一个可记录测试依赖的基础配置文件，不会破坏原有项目结构
• 第二步：仅安装测试场景必需的开发依赖，不需要把Vue、Vuex等业务依赖从CDN迁移成本地npm包，执行以下安装命令即可：

  npm i -D jest@29 vue@2.7.16 @vue/test-utils@1.3.6 vue-jest@3 babel-jest@29 @babel/core@7 @babel/preset-env
  

  这些依赖仅服务本地测试执行，和你线上走CDN加载的Vue、Vuex运行时完全不会产生冲突；其中@vue/test-utils@1.x是专门适配Vue2版本的测试工具库，和你当前使用的Vue版本匹配
• 第三步：在项目根目录新增仅几行的Jest配置文件jest.config.js，写入以下内容：

  module.exports = {
    // 模拟浏览器DOM执行环境，匹配组件的模板渲染逻辑
    testEnvironment: 'jsdom',
    moduleFileExtensions: ['js'],
    // 对独立JS组件做ES模块转译，匹配你现有组件用`export default`导出的代码结构
    transform: {
      '^.+\\.js$': 'babel-jest'
    }
  }
  

• 第四步：直接编写测试文件即可，不需要修改原有组件和Vuex模块的代码；测试涉及Vuex逻辑时，只需要在测试文件中引入本地对应的Vuex模块文件，通过createStore初始化实例即可完成测试

如果完全不想接触npm相关操作，可以放弃Jest，换用全CDN引入的浏览器端测试栈实现基础测试能力，全程不需要任何本地安装：

• 通过CDN引入Vue2运行时、适配Vue2版本的@vue/test-utils UMD构建包、Mocha测试框架、Chai断言库
• 新建一个独立的测试入口HTML页面，在页面中加载你编写的独立组件、Vuex模块文件，直接编写测试断言
• 在本地浏览器打开这个测试页面，即可查看测试执行结果
• 该方案的局限性是没有Jest的批量测试执行、代码覆盖率统计、文件变更自动监听等能力，仅适合组件数量少、逻辑简单的小型项目

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