使用Vue Test Utils測試簡易計算器
最近在學習vue 測試，發(fā)現(xiàn)網(wǎng)上的資料不是特別多，摸索了一下jest框架看了看官方文檔進行一下總結。
啟動vue cli
vue create demo
? Please pick a preset:
learn (less, babel, router, vuex)
default (babel, eslint)
> Manually select features
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
( ) CSS Pre-processors
( ) Linter / Formatter
>(*) Unit Testing
( ) E2E Testing
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y
? Pick a unit testing solution:
Mocha + Chai
> Jest
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
之后可以在jest.config.js中進行個性化配置，在test/unit里可以創(chuàng)建xxxx.spec.js的測試文件。
寫一個有錯誤的計算器組件Counter.vue
<template>
<div>
<input type="text" v-model='firstValue' />
<select v-model="oper">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model='secondValue' />
<input type="button" value='計算' @click="compute" />
<input type="text" v-model='result' />
</div>
</template>
<script>
export default {
name: 'Counter',
data() {
return {
firstValue: null,
secondValue: null,
oper: '+',
result: null,
}
},
methods: {
compute() {
switch (this.oper) {
case '+':
this.result = this.firstValue + this.secondValue;
break;
case '-':
this.result = this.firstValue - this.secondValue;
break;
case '*':
this.result = this.firstValue * this.secondValue;
break;
case '/':
this.result = this.firstValue / this.secondValue;
break;
}
// console.log(this.firstValue, this.secondValue, this.oper, this.result)
// console.log(typeof this.firstValue, typeof this.secondValue, typeof this.oper, typeof this.result)
}
}
}
</script>
mount()和shallowMount()的區(qū)別
mount()是組件完全的掛載剪侮，shallowMount是淺掛載，子組件并沒有完全渲染洛退，測試通常只關注輸出輸入瓣俯，而子組件內(nèi)部處理的細節(jié)一般并不關注。
編寫測試
import {
shallowMount
} from '@vue/test-utils'
import Counter from '@/components/Counter.vue'
describe('計算器', () => {
it('加法', () => {
const wrapper = shallowMount(Counter)
let button = wrapper.findAll('input[type="button"]')
let inputs = wrapper.findAll('input[type="text"]')
wrapper.vm.$data.oper = '+'
inputs.at(0).setValue(1)
inputs.at(1).setValue(1)
button.at(0).trigger('click')
expect(wrapper.vm.$data.result).toEqual(2)
})
it('減法', () => {
const wrapper = shallowMount(Counter)
let button = wrapper.findAll('input[type="button"]')
let inputs = wrapper.findAll('input[type="text"]')
wrapper.vm.$data.oper = '-'
inputs.at(0).setValue(1)
inputs.at(1).setValue(1)
button.at(0).trigger('click')
expect(wrapper.vm.$data.result).toEqual(0)
})
it('乘法', () => {
const wrapper = shallowMount(Counter)
let button = wrapper.findAll('input[type="button"]')
let inputs = wrapper.findAll('input[type="text"]')
wrapper.vm.$data.oper = '*'
inputs.at(0).setValue(1)
inputs.at(1).setValue(1)
button.at(0).trigger('click')
expect(wrapper.vm.$data.result).toEqual(1)
})
it('除法', () => {
const wrapper = shallowMount(Counter)
let button = wrapper.findAll('input[type="button"]')
let inputs = wrapper.findAll('input[type="text"]')
wrapper.vm.$data.oper = '/'
inputs.at(0).setValue(1)
inputs.at(1).setValue(1)
button.at(0).trigger('click')
expect(wrapper.vm.$data.result).toEqual(1 )
})
})
將加減乘除進行測試
在package.json添加
"test:cov": "vue-cli-service test:unit --coverage"
運行 test:cov會發(fā)現(xiàn)coverage文件夾兵怯，文件夾內(nèi)的html‘文件打開如圖所示
測試.PNG
