[toc]
Vue 单元测试
官网：https://vue-test-utils.vuejs.org/zh
定义：
单元测试是用来对一个模块、一个函数或者一个类来进行正确性检验的测试工作。
指令：
package.json文件
- "test:unit": "vue-cli-service test:unit"
测试驱动开发（TDD：Test-Driven Development）
mocha+jest
-
测试框架 mocha
Mocha官网：https://mochajs.org/使用expect断言语句
chia官网：https://www.chaijs.com/
chia部分方法文档：https://www.chaijs.com/api/assert/
是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
