Vue 单元测试使用mocha+jest

AnndyR

2019-10-31

关注关注

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来编写初始化代码。
参考
Mocha中文文档：https://segmentfault.com/a/1190000011362879
断言库 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

单元测试 ul vue