Vue 单元测试 使用mocha+jest
程序员文章站
2022-05-22 17:01:38
[toc] Vue 单元测试 "官网:https://vue test utils.vuejs.org/zh" 定义: 单元测试是用来对一个模块、一个函数或者一个类来进行正确性检验的测试工作。 指令: package.json文件 "test:unit": "vue cli service test ......
目录
vue 单元测试
定义:
单元测试是用来对一个模块、一个函数或者一个类来进行正确性检验的测试工作。
指令:
package.json文件
- "test:unit": "vue-cli-service test:unit"
测试驱动开发(tdd:test-driven development)
mocha+jest
-
测试框架 mocha
mocha官网:https://mochajs.org/使用expect断言语句
是javascript的一种单元测试框架。
mocha的特点主要有:既可以测试简单的javascript函数,又可以测试异步代码,因为异步是javascript的特性之一;
可以自动运行所有测试,也可以只运行特定的测试;
可以支持before、after、beforeeach和aftereach来编写初始化代码。
参考
断言库 jest
jest
实例 mocha expect方法断言
-
格式模板
describe 套件
describe('名称',()=>{ <!-- 用例 --> it('方法描述',()=>{ /* 使用expect 断言语句 */ /* 方法举例 */ expcect(/* 需要检测的方法 */).to.be.equal(/* 检测结果 */) }) })
-
描述
it()
测试异步代码 通过将回调(通常称为done)添加到it()
.to.be.equal 是否相等 .to.be.deep.equal 是否严格相等
示例代码
tests\unit\parser.spec.ts
-
测试各类断言语句执行成功或者失败
/* 编写测试用例 */ import {parser,stringify} from '@/code/parser'; /* 使用mocha(测试工具) +chai(断言库) */ import { expect } from 'chai'; /* 套件 */ describe('mytest1', () => { /* 用例 */ // 常见的关系 相等 大于/小于 包含和不包含 it('测试parser方法是否可用',()=>{ // deep.equal 表示两个对象是否完全相等(引用空间无所谓) // .to.be.equal 表示两个对象相等(引用空间无所谓) expect(parser('name=zfpx')).to.be.deep.equal({name:'zfpx'}) }) it('测试stringify方法是否可用',()=>{ expect(stringify({name:'3px'})).to.be.equal('name=3px') }) }) /* 断言语句各类 */ describe('测试方法',()=>{ it('相等关系',()=>{ expect(1+1).to.be.equal(2);//相加的值 expect([1,2,3]).to.be.lengthof(3);//长度 expect(true).to.be.true;//布尔值 }) it('包含',()=>{ expect('zfpx').to.be.contain('zf');//是否包含指定字符 expect('zfpx').to.be.match(/zf/);//是否匹配正则 }) it('大于,小于',()=>{ expect(5).to.be.greaterthan(3) expect(3).to.be.lessthan(6) expect(3).to.be.not.greaterthan(5)//不大于3 }) })
-
测试模块是否正确渲染值
src\components\unittest\demo1.vue
<!-- 单元测试:是否能成功显示渲染的组件元素 --> <template> <div class="demo1"> <h1>{{ datas }}</h1> </div> </template> <script> export default { name:'demo1', props:['datas'], data () { return { }; } } </script> <style lang='less' scoped> </style>
tests\unit\unit1.spec.ts
import unitdemo1 from '@/components/unittest/demo1.vue'; import vue from 'vue'; import {expect} from 'chai'; import {mount} from '@vue/test-utils'; /* 写法1 产地属性后能否正常显示结果*/ describe('unitdemo1',()=>{ it('1.传递属性后能否正常显示结果',()=>{ // 原生自己测试vue // extend 方法可以根据实例创建一个类 let constructor = vue.extend(unitdemo1); // 对组件进行挂载 // vm.$el mocha 测试的时候集成了 jsdom let vm:any = new constructor({ propsdata:{datas:'hello'} }).$mount(); /* 检测h1标签内是否包含hello */ expect(vm.$el.queryselector('h1').innerhtml).to.be.contain('hello'); }) }) /* 写法2 使用mount */ describe('unitdemo1',()=>{ it('2.传递属性后能否正常显示结果',()=>{ let wrapper = mount(unitdemo1); /* 设置 wrapper vm 的 prop 并强制更新。 https://vue-test-utils.vuejs.org/zh/api/wrapper/setprops.html */ wrapper.setprops({datas:'hello'});//设定传递的值为hello expect(wrapper.find('h1').text()).to.be.contain('hello'); }) })
-
测试模块内的加法是否执行
src\components\unittest\demo2.vue
<!-- --> <template> <div> <span id="count">{{count}}</span> <button @click = "increment">+</button> </div> </template> <script> //这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等) //例如:import 《组件名称》 from '《组件路径》'; export default { //import引入的组件需要注入到对象中才能使用 components: {}, data() { //这里存放数据 return { count:10 }; }, //监听属性 类似于data概念 computed: {}, //监控data中的数据变化 watch: {}, //方法集合 methods: { increment(){ this.count++ } }, //生命周期 - 创建完成(可以访问当前this实例) created() {}, //生命周期 - 挂载完成(可以访问dom元素) mounted() {}, beforecreate() {}, //生命周期 - 创建之前 beforemount() {}, //生命周期 - 挂载之前 beforeupdate() {}, //生命周期 - 更新之前 updated() {}, //生命周期 - 更新之后 beforedestroy() {}, //生命周期 - 销毁之前 destroyed() {}, //生命周期 - 销毁完成 activated() {} //如果页面有keep-alive缓存功能,这个函数会触发 }; </script> <style lang='lesss' scoped> /* //@import url(); 引入公共css类 */ </style>
tests\unit\unit2.spec.ts
import unitdemo2 from '@/components/unittest/demo2.vue'; import vue from 'vue'; import {expect} from 'chai'; import {mount} from '@vue/test-utils'; /* 写法2 使用mount */ describe('测试demo2组件',()=>{ it('单机能否+1',()=>{ let wrapper = mount(unitdemo2); expect(wrapper.find('#count').text()).to.be.equal('10'); wrapper.find('button').trigger('click'); expect(wrapper.find('#count').text()).to.be.equal('11'); }) })
测试代码执行:npm run test:unit
测试结果
done compiled successfully in 3577ms [=========================] 100% (completed) webpack compiled successfully in 3577ms mocha testing... { name: 'zfpx' } name=zfpx mytest1 √ 测试parser方法是否可用 √ 测试stringify方法是否可用 测试方法 √ 相等关系 √ 包含 √ 大于,小于 unitdemo1 √ 1.传递属性后能否正常显示结果 unitdemo1 √ 2.传递属性后能否正常显示结果 测试demo2组件 √ 单机能否+1 8 passing (111ms) mocha tests completed successfully
下一篇: 成都竹叶青爱喝茶的你了解它吗?