vue单元化测试（vue-cli3）

chai

equal(4+5).to.be.equal(9);
equal(4+5).to.be.not.equal(10);//判断4+5不等于10
equal({foo:'bar'}).to.be.deep.equal({foo:'bar'});
//判断类型
equal(true).to.be.ok;//判断是true
equal(false).to.not.be.ok;//判断false
expect('test').to.be.a('string');
expect({foo:'bar'}).to.be.an('object');
//判断包含
expect([1,2,3]).to.include(2);

• vue单元化测试代码

import { expect } from 'chai'
import Vue from 'vue'
import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  // 测试用例,用来显示不同方法与内容
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    })
    expect(wrapper.text()).to.include(msg)
  })

  // 只针对于data里面进行测试
  it('should render correct contents', () => {
    // 通过vue渲染HelloWorld
    const Constructor = Vue.extend(HelloWorld)
    const vm = new Constructor().$mount()
    // 判断页面中是否有msg所渲染出来的内容
    expect(vm.$el.querySelector('.hello h2').textContent).to.equal('123')
  })
})

• chai参考 https://blog.csdn.net/fly_home_ysc/article/details/76082302
• Home.vue

<template>
  <div class="home">
    <div class="add">
      <input type="text" class="form-control" placeholder="添加" v-model="val">
      <button type="button" class="btn btn-primary" @click="adds">添加</button>
    </div>
    <div class="panel panel-primary" v-for="(item,index) in arr" :key="index">
      <div class="panel-heading">
        {{item.txt}}
        <i class="glyphicon glyphicon-remove" @click="removes(index)"></i>
      </div>
      <div class="panel-body">
        {{item.txt}}
        <input type="text" class="form-control" v-model="item.txt" placeholder="Recipient's username" aria-describedby="basic-addon2">
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'home',
  data () {
    return {
      arr: [
        { id: Math.floor(Math.random() * 1000), txt: 'css' },
        { id: Math.floor(Math.random() * 1000), txt: 'js' }
      ],
      val: 'test'
    }
  },
  methods: {
    removes (idx) {
      this.arr.splice(idx, 1)
    },
    adds () {
      this.arr.push({ id: Math.floor(Math.random() * 1000), txt: this.val })
      this.val = ''
    }
  }
}
</script>
<style scoped>
  *{
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
  }
  .home{
    padding-left: 30px;
    padding-right: 30px;
  }
  .panel{
    height: 160px;
    margin-top: 50px;
    text-align: left;
  }
  .panel-heading{
    padding-left: 20px;
    height: 50px;
    line-height: 50px;
  }
  .panel-body{
    padding-left: 20px;
    height: 60px;
    float: left;
    line-height: 60px;
  }
  input{
    float: left;
    padding-left: 10px;
  }
  .glyphicon{
    float: right;
    margin-right: 20px;
    margin-top: 15px;
    cursor: pointer;
  }
  .add{
    width: 100%;
    height: 50px;
  }
  .add button{
    float: left;
    height: 30px;
    line-height: 30px;
    width: 70px;
    text-align: center;
  }
  .add input{
    float: left;
    width: 300px;
    margin-right: 20px;
  }
</style>

• home.spec.js

import { expect } from 'chai'
import { mount } from '@vue/test-utils'
import Home from '../../src/views/Home'

// 创建测试套件
describe('测试套件', () => {
  // 查看功能
  it('测试功能查看', () => {
    const wapper = mount(Home)
    // 寻找指定DOM元素
    // console.log(wapper.find('.add'))
    // 打印Home.vue里面的data数据
    // console.log(wapper.vm.arr)
    // 断言
    expect(wapper.vm.arr.length).to.be.equal(2)
  })
  // 测试增加
  it('测试增加功能', () => {
    const wapper = mount(Home)
    // 添加click测试
    wapper.find('.btn-primary').trigger('click')
    expect(wapper.vm.arr[2].txt).to.be.equal('test')
  })
  // 测试删除
  it('测试删除功能', () => {
    const wapper = mount(Home)
    wapper.find('.glyphicon').trigger('click')
    expect(wapper.vm.arr.length).to.be.equal(1)
  })
})