Vue 单元测试

起步

详细的单元测试文档可以参考 Vue Test Utils

对于 UI 组件来说，我们不推荐一味追求行级覆盖率，因为它会导致我们过分关注组件的内部实现细节，从而导致琐碎的测试。

取而代之的是，我们推荐把测试撰写为断言你的组件的公共接口，并在一个黑盒内部处理它。一个简单的测试用例将会断言一些输入 (用户的交互或 prop 的改变) 提供给某组件之后是否导致预期结果 (渲染结果或触发自定义事件)。

项目结构

.
└─ tests
   └─ coverage
   └─ unit
      └─ __snapshots__
         └─ index.spec.js.snap
         └─ index.spec.js

如何编写测试代码

待测试的组件

export default {
  template: `
    <div>
      <span class="count">{{ count }}</span>
      <button @click="increment">Increment</button>
    </div>
  `,

  data() {
    return {
      count: 0
    }
  },

  methods: {
    increment() {
      this.count++
    }
  }
}

测试代码

import { mount } from '@vue/test-utils'
import Counter from './counter'

describe('测试该组件', () => {
  // 现在挂载组件，你便得到了这个包裹器
  const wrapper = mount(Counter)

  it('渲染正确的标记', () => {
    expect(wrapper.html()).toContain('<span class="count">0</span>')
  })

  // 也便于检查已存在的元素
  it('有一个按钮', () => {
    expect(wrapper.contains('button')).toBe(true)
  })
})

模拟用户交互行为

it('单击按钮 count 值为1', () => {
  expect(wrapper.vm.count).toBe(0)
  const button = wrapper.find('button')
  button.trigger('click')
  expect(wrapper.vm.count).toBe(1)
})

单元测试并不关注你的过程，只关注你的结果

高阶用法

例如对 Vuex 和 Vue-router 进行测试可以参照文档进行使用 配合 Vue Router 使用 和 在组件中测试 Vuex

如何使用

一条命令即可运行单元测试

yarn test:unit

运行后结果如图

查看测试 log

查看测试生成的本地文件目录，查看测试覆盖率，行，方法等

yarn test:coverage