vue项目单元测试

1 vue 项目搭建之后
看目录结构

image.png

2.搭建一个简单的测试demo
待测试文件 MyComponent.vue

image.png

<template>
  <div>
    {{ count }}
    <button @click="increment">自增</button>
  </div>
</template>
<script>
export default {
data () {
  return {
    count: 0
  }
},
methods: {
  increment () {
    this.count++
  }
}
}
</script>

在路由表中注册一下

import Vue from 'vue'
import Router from 'vue-router'
import MyComponent from '@/components/MyComponent'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/my-component',
      name: 'MyComponent',
      component: MyComponent
    }
  ]
})

准备开始测试改组件找到在test/unit/specs目录下面创建一个MyComponent.spec.js文件

import Vue from 'vue'
import MyComponent from '@/components/MyComponent.vue'

describe('MyComponent.vue', () => {
  it('计数器在点击按钮时自增', () => {
    const vmComponent = new Vue(MyComponent).$mount(); // 获取mount中的组件实例
    console.log('计数器点击之前的值：' + vmComponent.count);   // 点击之前
    vmComponent.increment();     // 调用实例中的increment方法，点击计数器
    console.log('计数器点击之后的值：' + vmComponent.count);     // 点击之后
    expect(vmComponent.count).toBe(1);     // 判断最后的count是否为最后对应的值
  })
})