Vue 单元测试 使用mocha+jest

目录

• Vue 单元测试
  • mocha+jest
  • jest
  • 实例 mocha expect方法断言
  • 示例代码

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

1. 测试各类断言语句执行成功或者失败

   /* 编写测试用例 */
   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
       })
   })
   
   

2. 测试模块是否正确渲染值

   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');
       })
   })
   

3. 测试模块内的加法是否执行

   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