成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

CoXie / 2670人閱讀

摘要：的單元測試最近項目開發(fā)臨近結(jié)尾，反思之前做的不足的地方，想著應(yīng)該引入測試類的做法，于是乎開始學(xué)習(xí)前端測試之類的文檔。本次主要提供可使用，可運行的單元測試代碼，不足之處，歡迎指出。

vue-cli的單元測試

最近項目開發(fā)臨近結(jié)尾，反思之前做的不足的地方，想著應(yīng)該引入測試類的做法，于是乎開始學(xué)習(xí)前端測試之類的文檔。因為項目是基于vue-cli的單頁面，所以想著在此基礎(chǔ)上拓展。

測試框架類型

vue官方提供了幾種測試框架 jest,mocha 等這幾種測試框架，本次案例采用的是 karma + mocha + chai 這個配套來實現(xiàn)的。而且還是結(jié)合了 vue-test-utils 這個官方的測試庫。特別說明，在安裝vue-cli時在選擇測試類型時，通過 上下鍵 來選擇對應(yīng)的測試框架

具體案例說明

靜態(tài)文件加載測試

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的語法，兩者分別接受兩個參數(shù)。前者是要測試的頁面，后者是測試時的提示語，然后都接受一個函數(shù)，在it里面的函數(shù)則是要斷言出你要的結(jié)果，即expect()的內(nèi)容是否等于你想要的結(jié)果。

事件操作測試

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方法模擬點擊操作

異步操作測試

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 這個方法來確定什么時候執(zhí)行測試結(jié)束

VUEX測試

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 渲染監(jiān)測",()=>{
        const wrapper = shallow(VuexTest,{store,localVue});
        const span = wrapper.find("span");
        expect( Number(span.text()) ).to.equal(state.count)
    })

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

在使用vue時當然也要考慮vuex的測試，這是使用createLocalVue方法構(gòu)造一個局部獨立作用于的vue環(huán)境，避免影響到全局的Vue環(huán)境，而 shallow 創(chuàng)建一個包含被掛載和渲染的 Vue 組件的 Wrapper,不同的是被存根的是子組件，基本和 mount 差不多，但是官方demo 使用的是shallowmount，但是實際測試中就是報錯，然后換成了shallow。接著測試里面也要構(gòu)建一個 vuex 的store倉庫，這里還引入了項目里面的store，并將其getters賦值給測試里的getters,這樣就可以確保斷言的結(jié)果是我們項目中設(shè)定的。

結(jié)語說明

畢竟第一次寫單元測試，了解的東西并不深入，具體感興趣的同學(xué)可以好好看看上述的測試框架及文檔，這幾個庫的api可謂豐富。本次主要提供可使用，可運行的單元測試代碼，不足之處，歡迎指出。后續(xù)會更新其他的測試場景。
git代碼地址 https://github.com/1533266567...

參考文章

https://segmentfault.com/a/11...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/110143.html

相關(guān)文章

  • 搭建自己的前端自動化測試腳手架（一）

    摘要：還可以自動完成單元測試的配置，工具選型為準備出發(fā)有了以上的初步了解，我們就可以準備著手搭建我們自己的測試環(huán)境了，讓我們短暫休息一下，下一章見下一篇搭建自己的前端自動化測試腳手架二 搭建自己的前端自動化測試腳手架（一） LancerComet at 17:55, 2016.07.17.歡迎轉(zhuǎn)載，轉(zhuǎn)載時還請保留作者署名。 隨著前端項目規(guī)模的日益膨脹，自動化測試越來越受到廣大前端與測試朋友關(guān)...

    luffyZh 評論0 收藏0

  • 基于 Node+express 爬蟲的數(shù)據(jù) API，爬一套自己的api數(shù)據(jù)(2)

    摘要：目前半島局勢緊張，朝鮮已進行了六次核試驗，被廣泛認為已經(jīng)擁有了核彈頭。另外朝鮮的導(dǎo)彈技術(shù)今年以來快速突破，成功試射了射程可覆蓋美國本土的洲際彈道導(dǎo)彈。這個版的內(nèi)容傳到互聯(lián)網(wǎng)上后，迅速刷屏，引起紛紛議論。 SplderApi2 Node-SplderApi2 第二版 基于Node 的網(wǎng)絡(luò)爬蟲 API接口 包括前端開發(fā)日報、kugou音樂、前端top框架排行、妹紙福利、搞笑視頻、段子笑話、...

    beanlam 評論0 收藏0

  • vue-cli “從入門到放棄”

    摘要：主要作用目錄結(jié)構(gòu)本地調(diào)試代碼部署熱加載單元測試在如今前端技術(shù)飛速發(fā)展的時代，和作為前端框架已經(jīng)呈現(xiàn)出了三國鼎立的局面。 主要作用：目錄結(jié)構(gòu)、本地調(diào)試、代碼部署、熱加載、單元測試 在如今前端技術(shù)飛速發(fā)展的時代，angular.js、vue.js 和 react.js 作為前端框架已經(jīng)呈現(xiàn)出了三國鼎立的局面。作為國人若你不知道 vue，小生表示可以理解，如果作為中國的前端猿不知道 vue，...

    DrizzleX 評論0 收藏0

  • vue-cli “從入門到放棄”

    摘要：主要作用目錄結(jié)構(gòu)本地調(diào)試代碼部署熱加載單元測試在如今前端技術(shù)飛速發(fā)展的時代，和作為前端框架已經(jīng)呈現(xiàn)出了三國鼎立的局面。 主要作用：目錄結(jié)構(gòu)、本地調(diào)試、代碼部署、熱加載、單元測試 在如今前端技術(shù)飛速發(fā)展的時代，angular.js、vue.js 和 react.js 作為前端框架已經(jīng)呈現(xiàn)出了三國鼎立的局面。作為國人若你不知道 vue，小生表示可以理解，如果作為中國的前端猿不知道 vue，...

    william 評論0 收藏0

發(fā)表評論

0條評論

CoXie

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<