vue:单元测试 jest

vue add @vue/cli-plugin-unit-jest // vue项目添加单元测试

测试文件1 tests/unit/example.spec.js

import { shallowMount } from '@vue/test-utils'
// 引用测试用例
import ZPage from '@/components/ZPage.vue'
// 一般一个组件写一个测试套件（即一个.spec.js就一个套件）


let a
let b
// 钩子函数 beforeAll可以放公共代码(会影响测试性能)
beforeAll(() => {
  a = 2
  b = 3
})
// 1. 第一种 使用describe it 
describe('测试ZPage.vue', () => {
  // 测试用例：用来测试不同的方法，和页面显示的内容
  it('测试是否显示title', () => { // 测试用例名称
    const title = 'new message'
    const wrapper = shallowMount(ZPage, { // wrapper相当于ZPage整个组件
      propsData: { title }
    })
    // 断言
    expect(wrapper.text()).toMatch(title)
    // 一些api
    // .toBeUndefined()
    // .toBeCalled()
    // .toBeCalledTimes()
  })

  it('计算结果', () => {
    // 测试 .toBe(4);判断结果匹配    .not.toBe(0);判断结果不匹配
    expect(2 + 2).toBe(4);
  })

  it('精准匹配', () => {
    // 精准匹配
    // toBeNull只匹配null
    // toBeUndefined只匹配undefined
    // toBeDefined与 相反toBeUndefined
    // toBeTruthy匹配任何 语句为真if
    // toBeFalsy匹配任何 语句为假if
    const n = null;
    expect(n).toBeNull();
    expect(n).toBeDefined();
    expect(n).not.toBeUndefined();
    expect(n).not.toBeTruthy();
    expect(n).toBeFalsy();
  })
})


// // 2 第2种
// test('描述文字', () => { })

测试文件2 tests/unit/zInput.spec.js

import { shallowMount } from '@vue/test-utils'
import ZInput from '@/components/ZInput.vue'

describe('测试ZInput.vue', () => {
  it('测试查看功能', () => {
    const wrapper = shallowMount(ZInput)
    // 1. 查看功能： 寻找指定的DOM元素-通过vm获取对应的值
    // console.log(wrapper.find('.z-left_ifsdco')) // 1)寻找指定的DOM元素
    // 通过VM找到data中的数据
    // console.log(wrapper.vm.iptvalue)
    // 断员判断是不是对的
    expect(wrapper.vm.iptvalue).toBe('123');
  })

  it('测试增加功能', () => {
    // const wrapper = shallowMount(ZInput)
    // 2. 增加功能：对属性赋值 - 触发newtodo的回车事件-验证是否有数据增加
    // wrapper.setData({ // 2)对属性赋值
    //   iptvalue: '456'
    // })
    // expect(wrapper.vm.todos[2].text).toBe('456')
    // wrapper.find('.newtodo').trigger('keyup.enter') // 3)触发回车事件
    // console.log(wrapper.vm.iptvalue)
  })
  it('测试删除功能', () => {
    // const wrapper = shallowMount(ZInput)
    // 3. 删除功能：找到删除按钮-删除按钮点击-验证todo中有数据被删除
    // const delBtn = wrapper.find('.destory')
    // delBtn.trigger('click')
    // expect(wrapper.vm.todos.length).toBe(2)
  })
  it('测试修改功能', () => {
    const wrapper = shallowMount(ZInput)
    // 4. 修改功能(点击li标签修改样式的修改):找到li内的label标签-给label加双击事件-查看label标签是否含有editing类名
    // const li = wrapper.find('li')
    // const label = li.find('label')
    // label.trigger('delclick')
    // li.classes()
    // expect(li.classes()).toBe.include('editing') // .include('')判断是否含有样式
  })
})

下载是要测试的功能组件 /src/components/ZInput.vue

<template >
  <div class="z-cell-wrapper">
    <div class="z-cell">
      <div class="z-left_icon">
        <i class="iconfont icon-qiehuanjiaose"></i>
      </div>
      <div class="z-cell_title" v-if="false">
        <span>文本</span>
      </div>
      <div class="z-cell_value">
        <input
          type="text"
          :placeholder="placeholderData"
          class="z-field_control"
          v-model="iptvalue"
          @input="inputFn"
          @clear="inputFn('')"
          @blur="blurFn"
          @click="scrollIntoView"
          ref="ipt"
        />
        <div class="z-field-right_icon" v-if="false">
          <i class="iconfont icon-qiehuanjiaose"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {

  props: {
    placeholder: {
      type: String
    },
    value: {
      type: String
    }
  },
  data () {
    return {
      iptvalue: '123',
      placeholderData: ''
    }
  },

  methods: {
    inputFn (val) {
      this.$emit('value', this.iptvalue)
    },
    blurFn () {
      // 防止ios设备上收起键盘，页面不回弹
      window.scrollTo(
        0,
        Math.max(
          document.body.clientHeight,
          document.documentElement.clientHeight
        )
      )
    },
    scrollIntoView () {
      // 将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域
      setTimeout(() => {
        this.$refs.ipt.scrollIntoViewIfNeeded()
      }, 500)
    }
  },
  created () {
    this.placeholderData = this.placeholder
  }
}
</script>

<style lang='less' scoped>
.z-cell-wrapper {
  margin-bottom: 0.12rem;
  padding: 0 0.1rem;
  .z-cell {
    border-bottom: 1px solid #d9d9d9;
    padding-bottom: 0.05rem;
    display: flex;
    position: relative;
    font-size: 0.16rem;
    color: #323233;
    line-height: 0.24rem;
    .z-left_icon {
      margin-right: 0.25rem;
      i {
        font-size: 0.18rem;
      }
    }
    .z-cell_title {
      margin-right: 0.12rem;
      span {
        color: #646566;
        text-align: left;
      }
    }
    .z-cell_value {
      display: flex;
      .z-field_control {
        display: block;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        color: #323233;
        line-height: inherit;
        text-align: left;
        background-color: transparent;
        border: 0;
        resize: none;
        font-size: 14px;
        &::-webkit-scrollbar {
          width: 0;
          background: transparent;
        }
        outline: none;
      }
    }
  }
}
</style>