51Testing软件测试论坛

标题: vue2单元测试大佬带你学习 [打印本页]
作者: lsekfe    时间: 2023-2-6 13:41
标题: vue2单元测试大佬带你学习
测试基础概念
　　分为单元测试，组件测试，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的一下方法






欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/) Powered by Discuz! X3.2