用 jest 测试 vue 组件的核心是三步：装对依赖、配好环境、写准断言；需安装 jest、@vue/test-utils、vue-jest 等，配置 jest.config.js 支持 .vue 文件和别名，并用 shallowmount/mount 编写覆盖 props、事件、状态的可维护测试。
用 Jest 测试 Vue 组件，核心是三步：装对依赖、配好环境、写准断言。重点不在跑通，而在让测试真实反映组件行为——比如 props 是否生效、事件是否触发、状态变化是否更新视图。
安装与基础配置
确保项目已初始化（如通过 vue create 或已有 webpack/Babel 环境）。执行以下命令安装必需依赖：
npm install --save-dev jest @vue/test-utils vue-jest babel-jest @vue/compiler-sfc- 若使用 Vue CLI，更推荐直接运行：
vue add unit-jest，它会自动完成依赖安装、配置生成和脚本注册 - 在
package.json中添加测试脚本："test:unit": "jest"
配置 Jest 支持 .vue 文件
Jest 默认不识别 Vue 单文件组件，需通过 jest.config.js 显式声明处理规则：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 设置
moduleFileExtensions包含'vue' - 在
transform中指定.vue文件由vue-jest处理 - 如有 webpack 别名（如
@指向src），需在moduleNameMapper中同步映射：^@/(.*)$→<rootdir>/src/$1</rootdir> - 建议启用
testMatch精确匹配测试文件路径，例如：['**/tests/**/*.spec.[jt]s?(x)']
编写可维护的组件测试
使用 @vue/test-utils 的 shallowMount（推荐初测）或 mount（需验证子组件渲染时）挂载组件：
- 测试 props 渲染：
const wrapper = shallowMount(MyComponent, { props: { msg: 'hello' } }); expect(wrapper.text()).toContain('hello'); - 测试用户交互：
const button = wrapper.find('button'); await button.trigger('click'); expect(wrapper.emitted('submit')).toBeTruthy(); - 测试响应式状态：
await wrapper.setData({ username: 'a'.repeat(8) }); expect(wrapper.find('.error').exists()).toBe(false); - 异步操作需
await等待 Vue 更新周期，如await wrapper.vm.$nextTick()或直接await方法调用
常见问题与避坑提示
实际测试中容易卡在几个典型环节：
-
Cannot find module '*.vue'：检查transform正则是否匹配（Windows 用户注意反斜杠转义） - 样式或自定义块报错：
vue-jest不支持<style scoped></style>外部处理及<custom-blocks></custom-blocks>，测试中可忽略样式逻辑，专注行为 - Babel 7+ 报错：需额外安装
babel-core@^7.0.0-bridge.0 - 测试中
console.warn过多干扰？可在setupFiles中加console.warn = jest.fn()临时屏蔽
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
