1. 安装yarn
2. 全局安装@vue/cli。
3. 用vue-cli创建个应用，选择手动模式，勾选Jest。
4. 为这个应用添加@vue/test-utils包。

然后在components目录下创建Counter.vue，代码如下：

<template>
  <div>
    <div>{{ computedCount }}</div>
    <button @click="inc">加</button>
    <button @click="dec">减</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script>
export default {
  props: {
    factor: { type: Number, default: 1 }
  },
  data() {
    return {
      count: 0
    };
  },
  methods: {
    inc() {
      this.count++;
    },
    dec() {
      this.count--;
    },
    reset() {
      this.count = 0;
    }
  },
  computed: {
    computedCount: function() {
      return this.count * this.factor;
    }
  }
};
</script>

在unit目录下创建Counter.spec.js，代码如下：

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

describe("Counter.vue", () => {
    it("渲染Counter组件", () => {
        const wrapper = mount(Counter)
        expect(wrapper.element).toMatchSnapshot()
    })

    it("初始化之为0", () => {
        const wrapper = mount(Counter)
        expect(wrapper.vm.count).toEqual(0)
    })

    it("加1", () => {
        const wrapper = mount(Counter)
        wrapper.vm.inc()
        expect(wrapper.vm.count).toEqual(1)
    })

    it("减1", () => {
        const wrapper = mount(Counter)
        wrapper.vm.dec()
        expect(wrapper.vm.count).toEqual(-1)
    })

    it("重置", () => {
        const wrapper = mount(Counter)
        wrapper.vm.reset()
        expect(wrapper.vm.count).toEqual(0)
    })

    it("因数为10加1操作", () => {
        const wrapper = mount(Counter, { propsData: { factor: 10 } })
        wrapper.vm.inc()
        expect(wrapper.vm.computedCount).toEqual(10)
    })
})

打开控制台，进入项目根目录，运行yarn test:unit，如图1所示：

图1

看代码很容易理解如何在unit test中初始化组件，初始化组件的属性，访问组件的数据，调用组件的方法等等。