Vue 单元测试

[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来编写初始化代码。

  参考

  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

   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

   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