基於vue-cli的單元測試案例

時間 2019-11-09

標籤基於 vue cli 單元測試案例简体版

原文原文鏈接

vue-cli的單元測試

最近項目開發臨近結尾，反思以前作的不足的地方，想着應該引入測試類的作法，因而乎開始學習前端測試之類的文檔。由於項目是基於vue-cli的單頁面，因此想着在此基礎上拓展。html

測試框架類型

vue官方提供了幾種測試框架 jest,mocha 等這幾種測試框架，本次案例採用的是 karma + mocha + chai 這個配套來實現的。並且仍是結合了 vue-test-utils 這個官方的測試庫。特別說明，在安裝vue-cli時在選擇測試類型時，經過 上下鍵 來選擇對應的測試框架前端

具體案例說明

靜態文件加載測試vue

import Vue from 'vue'
import Test from '@/components/Test'
import {mount} from 'vue-test-utils'

describe('Test.vue',()=>{
    it('頁面加載成功',()=>{
        const wrapper = mount(Test);
        expect(wrapper.find('h1').text()).to.equal('My First UnitTest');
    })
})

首頁引入要測試的文件以及vue-test-utils提供的方法mount,經過這個方法掛載頁面，能夠輕鬆獲取頁面的Dom元素。describe以及it就是mocha的語法，二者分別接受兩個參數。前者是要測試的頁面，後者是測試時的提示語，而後都接受一個函數，在it裏面的函數則是要斷言出你要的結果，即expect()的內容是否等於你想要的結果。git

事件操做測試github

import Vue from "vue"
import Event from '@/components/Event'
import { mount } from 'vue-test-utils'

describe('Event.vue',()=>{
    it('事件方法測試',()=>{
        const wrapper = mount(Event);
        const clickButton = wrapper.find('button');
        clickButton.trigger('click');
        const number = Number(wrapper.find('input').element.value);
        expect(number).to.equal(2);
    })
})

總體格式差很少，主要是就是用到vue-test-utils的trigger方法模擬點擊操做vuex

異步操做測試vue-cli

import Vue from 'vue'
import {mount,shallow} from 'vue-test-utils'
import AsyncEvent from '@/components/AsyncEvent'

describe('AsyncEvent.vue',()=>{
    it('異步行爲測試',(done)=>{
        const wrapper = mount(AsyncEvent);
        wrapper.find('button').trigger('click');
        setTimeout(()=> {
            expect( Number(wrapper.find('span').text()) ).to.equal(2);
            done();
        }, 1000)
    })
})

這裏使用setTimeout來作異步測試，注意的是這裏要使用 done 這個方法來肯定何時執行測試結束segmentfault

VUEX測試api

import { shallow, createLocalVue } from 'vue-test-utils'
import Vuex from 'vuex'
import VuexTest from '@/components/VuexTest'
import myModule from '@/store/index'

const localVue = createLocalVue();
localVue.use(Vuex);

describe('VuexTest.vue',()=>{
    let getters = myModule.getters;
    let state;
    let store;
    let mutations;

    beforeEach(()=>{
        state = {
            count: 0
        }
        mutations = {
            increment(state) {
                state.count++;
            }
        }
        store = new Vuex.Store({
              modules: {
                state,
                mutations,
                getters,                
              }
        })
    })

    it('Vuex 渲染監測',()=>{
        const wrapper = shallow(VuexTest,{store,localVue});
        const span = wrapper.find('span');
        expect( Number(span.text()) ).to.equal(state.count)
    })

    it('Vuex 事件監測',()=>{
           mutations.increment(state)
          expect(state.count).to.equal(1);
    })
})

在使用vue時固然也要考慮vuex的測試，這是使用createLocalVue方法構造一個局部獨立做用於的vue環境，避免影響到全局的Vue環境，而 shallow 建立一個包含被掛載和渲染的 Vue 組件的 Wrapper,不一樣的是被存根的是子組件，基本和 mount 差很少，可是官方demo 使用的是shallowmount，可是實際測試中就是報錯，而後換成了shallow。接着測試裏面也要構建一個 vuex 的store倉庫，這裏還引入了項目裏面的store，並將其getters賦值給測試裏的getters,這樣就能夠確保斷言的結果是咱們項目中設定的。app