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