vue 单元测试

定义：

单元测试是用来对一个模块、一个函数或者一个类来进行正确性检验的测试工作。

指令：

package.json文件

"test:unit": "vue-cli-service test:unit"

测试驱动开发(tdd：test-driven development)

mocha+jest

使用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

export default {

name:'demo1',

props:['datas'],

data () {

return {

};

}

}

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

//这里可以导入其他文件(比如：组件，工具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缓存功能，这个函数会触发

};

/* //@import url(); 引入公共css类 */

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

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！