学习 Vue 2 的单元测试

一、单元测试基础认知

1.1 什么是单元测试？

就像手机出厂前的质检员，单元测试专门检查代码中每个独立单元（函数、组件等）是否正常工作。想象你开发了一个计算器功能，单元测试就是自动验证 1+1 是否等于 2 的机器人。

1.2 为什么要测试？

• 防止改 A 坏 B（回归测试）
• 提升代码质量（测试覆盖率）
• 方便重构代码（测试就是安全网）

---

二、Vue 为什么选择 Karma + Jasmine

2.1 工具定位

• Karma：测试启动器（Test Runner）
  • 在真实浏览器中运行测试
  • 支持多浏览器并行测试
  • 自动监听文件变化
• Jasmine：测试框架
  • 提供测试语法（describe/it）
  • 内置断言库（expect().toBe()）
  • 直观的测试报告

2.2 组合优势

graph LR
  A[编写测试用例] --> B[Jasmine组织测试]
  B --> C[Karma启动浏览器]
  C --> D[真实环境执行]
  D --> E[生成测试报告]

---

三、从源码看测试实例

我们来看 Vue 2 源码中 src/core/observer/index.js 的响应式系统测试（对应测试文件 test/unit/specs/observer.spec.js）：

3.1 测试场景示例

// 测试对象响应式
describe('Observer', () => {
  it('should convert the value', () => {
    const obj = { a: 1 }
    const vm = new Vue({ data: obj })
    
    // 验证属性被转为响应式
    expect(obj.a).toBe(1)
    expect(vm.a).toBe(1)
  })
  
  it('should notify when set', done => {
    const obj = { a: 1 }
    new Vue({ 
      data: obj,
      watch: {
        a() { done() } // 期待触发回调
      }
    })
    obj.a = 2 // 触发更新
  })
})

3.2 关键断言解析

断言方法	作用
expect(x).toBe(y)	严格相等（===）
expect(x).toEqual(y)	深度对象比较
expect(x).toHaveBeenCalled()	验证函数被调用

---

四、Karma 配置揭秘

查看 test/unit/karma.base.config.js 核心配置：

4.1 核心配置项

module.exports = {
  frameworks: ['jasmine'], // 使用Jasmine
  browsers: ['PhantomJS'], // 无头浏览器
  reporters: ['spec'],     // 报告格式
  preprocessors: {
    '**/*.js': ['babel']   // ES6转换
  },
  files: [
    'test/unit/index.js'   // 测试入口文件
  ]
}

4.2 执行流程

# 测试执行过程
npm run test:unit 
→ 启动Karma 
→ 加载PhantomJS 
→ 编译测试文件 
→ 运行Jasmine测试 
→ 输出结果

---

五、手把手写第一个测试

5.1 创建测试文件

// test/unit/specs/demo.spec.js
describe('加法函数测试', () => {
  it('1 + 1 应该等于 2', () => {
    const result = 1 + 1
    expect(result).toBe(2)
  })
  
  it('Vue实例化测试', () => {
    const vm = new Vue({ data: { msg: 'Hello' } })
    expect(vm.msg).toEqual('Hello')
  })
})

5.2 运行测试

npm run test:unit -- --grep "加法函数测试"
# 只会运行包含"加法函数测试"的测试用例

---

六、最佳实践建议

1. 测试重点：

   • 核心工具函数（如编译器）
   • 响应式系统
   • 虚拟DOM算法
   • 生命周期钩子

2. 测试技巧：

   // 异步测试示例
   it('异步更新测试', done => {
     const vm = new Vue({ data: { a: 1 } })
     vm.a = 2
     Vue.nextTick(() => {
       expect(dom.textContent).toBe('2')
       done()
     })
   })
   

3. 调试技巧：

   // 在测试中添加调试语句
   it('调试示例', () => {
     console.log('当前环境:', navigator.userAgent)
     debugger // 浏览器中触发断点
   })
   

---

七、为什么这样设计？

1. 浏览器环境真实性：Karma 使用真实浏览器执行，能捕捉到 IE 等环境的特殊问题
2. 渐进式测试：Jasmine 的 BDD 语法更接近自然语言，适合逐步完善测试用例
3. 与 Vue 的配合：Vue 的响应式系统需要测试 DOM 更新，真实浏览器环境更可靠

通过这样的测试体系，Vue 2 才能保持每次发布版本的稳定性。现在你可以尝试在 test/unit/specs/ 目录下添加自己的测试用例，感受自动化测试的魅力！