如何為vue的項(xiàng)目添加單元測試
動機(jī)
- 單元測試能避免出現(xiàn)一些代碼運(yùn)行結(jié)果與預(yù)期不符的錯(cuò)誤，通常是一些比較低級但又難以發(fā)現(xiàn)的問題。
- 粗心且懶，在每次調(diào)整之后，需要不斷地檢查代碼，反復(fù)去走流程。擔(dān)心由于自己的改動而導(dǎo)致了邏輯上的錯(cuò)誤。而這里面的一大部分工作其實(shí)可以讓單元測試來完成。
- 有了單元測試之后，可以對代碼本身形成一種規(guī)范。如果在進(jìn)行單元測試過程中發(fā)現(xiàn)自己的一些代碼不方便進(jìn)行測試，那么你可能需要重新審視這些代碼，看是否有一些設(shè)計(jì)上不合理或者可以優(yōu)化的地方。
- 嵌入了單元測試的項(xiàng)目顯得更加的專業(yè)，也會更有逼格，測試本身是開發(fā)環(huán)節(jié)需要做的內(nèi)容。
工具選取對比（一個(gè)合適測試框架 -- Jest）
之前也沒有去接觸過前端的單元測試，也是這幾天開始了解，開始并沒有頭緒，所以就在網(wǎng)上以及github上去看了一些之前比較流行的測試框架。發(fā)現(xiàn)比較流行的是karma + mocha + Chrome的組合。當(dāng)我單獨(dú)一個(gè)個(gè)去看的時(shí)候，發(fā)現(xiàn)其內(nèi)容還是比較的多的。之后選取了jest也是經(jīng)過對比權(quán)衡的
優(yōu)點(diǎn)
1、一站式的解決方案，學(xué)習(xí)成本更低，上手更快（很適合現(xiàn)如今我的需求）
在使用 Jest 之前，我需要一個(gè)測試框架（mocha），需要一個(gè)測試運(yùn)行器（karma），需要一個(gè)斷言庫（chai），需要一個(gè)用來做 spies/stubs/mocks 的工具（sinon 以及 sinon-chai 插件），一個(gè)用于測試的瀏覽器環(huán)境（可以是 Chrome 瀏覽器，也可以用 PhantomJS）。 而使用 Jest 后，只要安裝它，全都搞定了。
2、全面的官方文檔，易于學(xué)習(xí)和使用
Jest 的官方文檔很完善，對著文檔很快就能上手。而在之前，我需要學(xué)習(xí)好幾個(gè)插件的用法，至少得知道 mocha 用處和原理吧 我得學(xué)會 karma 的配置和命令，chai 的各種斷言方法……，經(jīng)常得周旋于不同的文檔站之間，其實(shí)是件很煩也很低效的事
3、更直觀明確的測試信息提示
4、方便的命令行工具
缺點(diǎn)
jsdom 的一些局限性：因?yàn)?Jest 是基于 jsdom 的，jsdom 畢竟不是真實(shí)的瀏覽器環(huán)境，它在測試過程中其實(shí)并不真正的“渲染”組件。這會導(dǎo)致一些問題，例如，如果組件代碼中有一些根據(jù)實(shí)際渲染后的屬性值進(jìn)行計(jì)算（比如元素的 clientWidth）就可能出問題，因?yàn)?jsdom 中這些參數(shù)通常默認(rèn)是 0.
綜上所述，最終我確定下來的方案是使用成熟好用的測試工具庫 --- vue-test-utils 其前身是 avoriaz，avoriaz 也是一個(gè)不錯(cuò)的包，但其 README 中有說明，當(dāng) vue-test-utils 正式發(fā)布的時(shí)候， 它將會被廢棄。 vue-test-utils 能極大地簡化 Vue.js 單元測試。 例如：Vue 單元測試，一般是像下面這樣的（包括 vue-cli 提供的模板里默認(rèn)也是這樣）：
import Vue from 'vue'
import HelloWorld from '@/components/HelloWorld'
describe('HelloWorld.vue', () => {
it('should render correct contents', () => {
const Constructor = Vue.extend(HelloWorld)
const vm = new Constructor().$mount()
expect(vm.$el.querySelector('.hello h1').textContent)
.toEqual('Welcome to Your Vue.js App')
})
})
使用 vue-test-utils 后，你可以像下面這樣
import { shallow } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld'
describe('HelloWorld.vue', () => {
it('should render correct contents', () => {
const wrapper = shallow(HelloWorld, {
attachToDocument: ture
})
expect(wrapper.find('.hello h1').text()).to.equal('Welcome to Your Vue.js App')
})
})
可以看到代碼更加簡潔了。wrapper 內(nèi)含許多有用的方法，上面的例子中所使用的 find() 其中最簡單不過的一個(gè)。vue-test-utils 還有 createLocalVue() 等方法以及 stub 之類的功能，基本上可以完成絕大部分情況下的測試用例,這也是非常的實(shí)用的了。
安裝使用
安裝使用的方式很簡單，由于想引入到現(xiàn)有的項(xiàng)目中來，現(xiàn)有的項(xiàng)目大多是vue-cli創(chuàng)建的，所以一開始的時(shí)候基本上是已經(jīng)安裝并配置好了 webpack、vue-loader 和 Babel。如果是比較原始的項(xiàng)目，也是可以單獨(dú)安裝的。
我們要做的第一件事就是安裝 Jest 和 Vue Test Utils：
$ npm install --save-dev jest @vue/test-utils
然后我們需要在 package.json 中定義一個(gè)單元測試的腳本。
// package.json
{
"scripts": {
"test": "jest"
}
}
在 Jest 中處理單文件組件
npm install --save-dev vue-jest
接下來在 package.json 中創(chuàng)建一個(gè) jest 塊：
{
// ...
"jest": {
"moduleFileExtensions": [
"js",
"json",
// 告訴 Jest 處理 `*.vue` 文件
"vue"
],
"transform": {
// 用 `vue-jest` 處理 `*.vue` 文件
".*\\.(vue)$": "vue-jest"
}
}
}
具體的使用步驟
此處我根據(jù)自己的需求來進(jìn)行整理
對頁面內(nèi)容的測試
// viewTest.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>1212121</p>
</div>
</template>
<script>
export default {
name: 'viewTest',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
// viewTest.spec
import { mount } from '@vue/test-utils'
import Component from '../../../src/components/viewTest'
describe('頁面展示測試', () => {
test('檢查元素是否存在', () => {
const wrapper = mount(Component)
expect(wrapper.contains('.hello h1')).toBe(true)
console.log(wrapper.find('.hello h1').text())
expect(wrapper.text()).toContain('Welcome')
})
})
這個(gè)是最簡單的對頁面的dom節(jié)點(diǎn)的測試，以及可以對文案進(jìn)行一些測試，這些是比較基礎(chǔ)的
對事件處理的測試
// event.vue
<template>
<div>
<h1>My To Do event</h1>
<h2>wawawawawawa</h2>
<input v-model="newItem">
<button @click="addItemToList">Add</button>
</br>
<!--displays event -->
<ul>
<li v-for="item in listItems">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'event',
data () {
return {
listItems: ['buy food', 'play games', 'sleep'],
newItem: ''
}
},
methods: {
addItemToList() {
this.listItems.push(this.newItem);
this.newItem = '';
}
}
}
</script>
// event.spec.js
// 從測試實(shí)用工具集中導(dǎo)入 `mount()` 方法
// 同時(shí)導(dǎo)入你要測試的組件
import { mount } from '@vue/test-utils'
import Component from '../../../src/components/itemEvent'
describe('事件觸發(fā)測試', () => {
test('事件觸發(fā)測試', () => {
// 現(xiàn)在掛載組件，你便得到了這個(gè)包裹器
const wrapper = mount(Component)
const button = wrapper.find('button')
wrapper.setData({
newItem: '添加測試項(xiàng)',
})
button.trigger('click')
console.log(wrapper.text())
expect(wrapper.text()).toContain('添加測試項(xiàng)')
})
})
這里是在模擬用戶交互的一個(gè)測試，當(dāng)用戶點(diǎn)擊按鈕的時(shí)候會把數(shù)據(jù)插入到當(dāng)前的列表中來，所以最開始需要定位到這個(gè)按鈕，可以用find()，之后要去觸發(fā)這個(gè)事件， button.trigger('click')，然后把預(yù)期的結(jié)果，與按照流程的結(jié)果相比較，以達(dá)到測試的效果。這里模擬的是一個(gè)點(diǎn)擊事件，當(dāng)然，api也支持各種的鼠標(biāo)事件以及鍵盤事件。
測試異步行為 平時(shí)的業(yè)務(wù)場景中肯定是離不開異步操作的，當(dāng)發(fā)送一個(gè)接口請求的時(shí)候應(yīng)該怎么去才做。Jest 運(yùn)行測試用例同時(shí)可以模擬了 HTTP 庫 axios，對預(yù)期結(jié)果可以進(jìn)行設(shè)定和比較，比如：
// axios.js
export default {
get: () => Promise.resolve({ data: 'response' })
}
<template>
<div>
<button @click="fetchResults">發(fā)送請求</button>
{{value}}
</div>
</template>
<script>
import axios from '../axios.js'
export default {
data () {
return {
value: '初始值'
}
},
methods: {
async fetchResults () {
const response = await axios.get('mock/service')
this.value = response.data
console.log(this.value)
}
},
created (){
console.log(axios.get)
}
}
</script>
// async.spec.js
import { shallowMount } from '@vue/test-utils'
import async from '../../../src/components/async'
jest.mock('axios')
it('當(dāng)點(diǎn)擊按鈕發(fā)送請求時(shí)檢驗(yàn)返回值', () => {
const wrapper = shallowMount(async)
console.log(jest)
wrapper.find('button').trigger('click')
// expect(wrapper.value)
expect(wrapper.vm.value).toBe('response')
// console.log(wrapper.vm.value).toBe('初始值')
})
這個(gè)時(shí)候運(yùn)行的話會報(bào)錯(cuò)誤
因?yàn)閿嘌栽?fetchResults 中的 Promise 完成之前就被調(diào)用了，所以value的值還是最開始的初始值。大多數(shù)單元測試庫都提供一個(gè)回調(diào)來使得運(yùn)行期知道測試用例的完成時(shí)機(jī)。Jest 和 Mocha 都是用了 done。我們可以和 $nextTick 或 setTimeout 結(jié)合使用 done 來確保任何 Promise 都會在斷言之前完成。
- 測試 Vue Router 使用
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
利用Vue3實(shí)現(xiàn)一個(gè)可以用js調(diào)用的組件
最近遇到個(gè)功能要求,想要在全局中調(diào)用組件,而且要在某些js文件內(nèi)調(diào)用,所以這篇文章主要給大家介紹了關(guān)于如何利用Vue3實(shí)現(xiàn)一個(gè)可以用js調(diào)用的組件的相關(guān)資料,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了vue關(guān)于Promise的使用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue獲取token實(shí)現(xiàn)token登錄的示例代碼
最近新做了個(gè)vue項(xiàng)目，正好項(xiàng)目中有登錄部分，本文就詳細(xì)的介紹一下登錄部分的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要為大家詳細(xì)介紹了Vue和原生JS中如何使用自定義字體,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解下2024-01-01
Vue通過echarts實(shí)現(xiàn)數(shù)據(jù)圖表化顯示
Echarts，它是一個(gè)與框架無關(guān)的 JS 圖表庫，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計(jì)IONIC也能用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了Electron 如何調(diào)用本地模塊的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要為大家介紹了vue頁面狀態(tài)持久化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
Vue?Electron實(shí)現(xiàn)輸入法自動刷字?jǐn)?shù)功能詳解
這篇文章主要介紹了Vue?Electron實(shí)現(xiàn)輸入法自動刷字?jǐn)?shù)功能，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)C#有一定的幫助，感興趣的小伙伴可以跟隨小編一起了解一下2022-12-12
基于Vue3實(shí)現(xiàn)一個(gè)簡單的方位動畫
這篇文章主要為大家詳細(xì)介紹了如何基于Vue3實(shí)現(xiàn)一個(gè)簡單的方位動畫,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
詳解vue實(shí)現(xiàn)坐標(biāo)拾取器功能示例
這篇文章主要介紹了詳解vue實(shí)現(xiàn)坐標(biāo)拾取器功能示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11