vue2单元测试
如果说得更具体一点的话,就是业务页面不做测试,因为需求变更比较频繁。只有工具函数和公共组件还有比较稳定的业务页面才做测试。为什么需要测试,因为如果修改了js模块功能,其他模块也会受到影响,不方便迭代,代码无法重构。需要用到@vue/test-utils测试工具,自带的。npm run test:unit 运行测试。只有长期项目才做单元测试,短期项目不做。是测试中最小的单元(一个方法,组件)2.添加
·
这里写目录标题
测试基础概念
分为单元测试,组件测试,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 运行测试
语法
it()
//用于创建一个用例
describe('',()=>{
it('',()=>{
expect().to.be.xxx()
})
})
1.测试函数
1.创建函数
2.添加测试xxx.spec.js
describe('测试方法', () => {
it('相等关系', () => {
expect(1 + 1).to.be.deep.equal(2)
expect([1,2,3]).to.be.lengthOf(3)
})
})
2.测试组件
需要用到@vue/test-utils测试工具,自带的
test-utils官网
点击数字+1
//TestView.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
props: {
msg: String,
},};
</script>
import NextView from '@/components/NextView.vue'
import Vue from 'vue'
import { expect } from 'chai'
import { mount } from '@vue/test-utils' //测试工具
// describe('NextView.vue原生', () => {
// it('传递属性后能否显示结果', () => {
// //原生自己测试vue
// //extend方法可以根据实例创建一个类
// let baseExtend = Vue.extend(NextView)
// //把组件进行挂载
// //vm.$el mocha测试的时候集成了jsdom
// let vm = new baseExtend({
// propsData: {
// msg: 'hello'
// }
// }).$mount()
// expect(vm.$el.querySelector('h1').innerHTML).to.be.contain('hello') //判断标签内是否有hello
// })
// })
describe('NextView.vue工具', () => {
it('传递属性后能否显示结果', async () => {
//使用测试工具
let wrapper = mount(NextView)//获取实例
await wrapper.setProps({//更新实例上的msg
msg: 'hello'
})
expect(wrapper.find('h1').text()).to.be.include('hello')
})
})
判断数组的长度
//判断数组是否
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的一下方法
项目 | Value |
---|---|
let wrapper = mount(NextView) | 创建实例 |
wrapper.setProps({ msg: ‘hello’ }) | //更新实例上的msg |
wrapper.find(‘h1’) | 找到某个元素 |
wrapper.find(‘h1’).text() | 内部文字 |
.attributes(‘id’) | 属性 |
.classes(‘bar’) | class返回数组 |
wrapper.find(‘does-not-exist’).exists() | 是否存在元素 |
wrapper.find(‘.is-not-visible’).isVisible() | 是否消失隐藏 |
wrapper.text() | 文本内容 |
wrapper.trigger(‘click’) | 触发事件 |
wrapper.vm.name | 获取data里面的name数据 |
更多推荐
已为社区贡献3条内容
所有评论(0)