vue2单元测试大佬带你学习

lsekfe

测试基础概念
　　分为单元测试，组件测试，e2e。
　　为什么需要测试，因为如果修改了js模块功能，其他模块也会受到影响，不方便迭代，代码无法重构。
　　只有长期项目才做单元测试，短期项目不做。
　　如果说得更具体一点的话，就是业务页面不做测试，因为需求变更比较频繁。只有工具函数和公共组件还有比较稳定的业务页面才做测试。
　　单元测试
　　是测试中最小的单元：（一个方法，组件）
　　·TDD：测试驱动开发。先编写测试用例代码
　　· BDD：行为驱动开发。
　　测试工具 mocha测试框架
　　chai断言库

describe('测试方法', () => {
　　    it('相等关系', () => {
　　      expect(1 + 1).to.be.equal(2) //判断1+1是否等于2
　　        expect(1 + 1).to.be.deep.equal(2) //判断1+1是否等于2
　　        expect([1, 2, 3]).to.be.lengthOf(3) //判断数组长度
　　        expect(true).to.be.true //当前true是不是个true
　　    })
　　    it('包含', () => {
　　        expect('abcded').to.be.include('ab') //是否包含ab
　　        expect('abcded').to.be.contain('ab') //是否包含ab
　　        expect('abcded').to.be.match(/ab/) //正则写法
　　    })
　　    it('大于小于', () => {
　　        expect(5).to.be.greaterThan(3) //5是否大于3
　　        expect(3).to.be.lessThan(5) //3是否小于5
　　        expect(3).to.be.not.greaterThan(10) //3是不是不大于5
　　    })
　　})

jest 测试框架
　　下载v2+mocha 测试

　　然后选择mocha测试。
　　npm run test:unit 运行测试：

　语法

1. 　it()
   
2. 　　//用于创建一个用例
   
3. 　　describe('',()=>{
   
4. 　　it('',()=>{
   
5. 　　expect().to.be.xxx()
   
6. 　　})
   
7. 　　})

复制代码

1、测试函数
　　1.创建函数

　　2.添加测试xxx.spec.js

1. describe('测试方法', () => {
   
2. 　　    it('相等关系', () => {
   
3. 　　        expect(1 + 1).to.be.deep.equal(2)
   
4. 　　        expect([1,2,3]).to.be.lengthOf(3)
   
5. 　　    })
   
6. 　　})

复制代码

2、测试组件
　　需要用到@vue/test-utils测试工具，自带的。
　　点击数字+1

　//TestView.vue
　　<template>
　　  <div class="hello">
　　    <h1>{{ msg }}</h1>
　　  </div>
　　</template>
　　<script>
　　export default {
　　  props: {
　　    msg: String,
　　  },};
　　</script>

1. 　import NextView from '@/components/NextView.vue'
   
2. 　　import Vue from 'vue'
   
3. 　　import {  expect } from 'chai'
   
4. 　　import {  mount } from '@vue/test-utils' //测试工具
   
5. 　　// describe('NextView.vue原生', () => {
   
6. 　　//     it('传递属性后能否显示结果', () => {
   
7. 　　//         //原生自己测试vue
   
8. 　　//         //extend方法可以根据实例创建一个类
   
9. 　　//         let baseExtend = Vue.extend(NextView)
   
10. 　　//         //把组件进行挂载
    
11. 　　//         //vm.$el mocha测试的时候集成了jsdom
    
12. 　　//         let vm = new baseExtend({
    
13. 　　//             propsData: {
    
14. 　　//                 msg: 'hello'
    
15. 　　//             }
    
16. 　　//         }).$mount()
    
17. 　　//         expect(vm.$el.querySelector('h1').innerHTML).to.be.contain('hello') //判断标签内是否有hello
    
18. 　　//     })
    
19. 　　// })
    
20. 　　describe('NextView.vue工具', () => {
    
21. 　　    it('传递属性后能否显示结果', async () => {
    
22. 　　        //使用测试工具
    
23. 　　        let wrapper = mount(NextView)//获取实例
    
24. 　　        await wrapper.setProps({//更新实例上的msg
    
25. 　　            msg: 'hello'
    
26. 　　        })
    
27. 　　        expect(wrapper.find('h1').text()).to.be.include('hello')
    
28. 　　    })
    
29. 　　})

复制代码

判断数组的长度

//判断数组是否
　　expect(wrapper.vm.list.length).to.be.equal(2)

按下回车键数组增加

it('检查增加', async () => {
　　        //使用测试工具
　　        let wrapper = mount(NextView)//获取实例
　　        await wrapper.setDate({
　　            newTodo: 'hello'//input框
　　        })
　　        await wrapper.find('button').trigger('keyup.enter') expect(wrapper.vm.list[2].text()).to.be.queal('hello')})

删除数组

  it('检查删除', async () => {
　　        //使用测试工具
　　        let wrapper = mount(NextView)//获取实例
　　      const delbtn=wrapper.find('.destory')
　　      delbtn.trigger('click') expect(wrapper.vm.list.length).to.be.queal(1)})

双击修改class样式

it('检查修改', async () => {
　　        //使用测试工具
　　        let wrapper = mount(NextView)//获取实例
　　      const li=wrapper.find('li')
　　     const label= li.find('label')
　　     label.trigger('dbclick)
　　     li.classes()
　　     expect(li.classes()).to.be.include('edting')})

@vue/test-utils的一下方法