使用Vue Test Utils测试简易计算器

使用Vue Test Utils测试简易计算器

最近在学习vue 测试，发现网上的资料不是特别多，摸索了一下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里可以创建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()的区别

mount()是组件完全的挂载，shallowMount是浅挂载，子组件并没有完全渲染，测试通常只关注输出输入，而子组件内部处理的细节一般并不关注。

编写测试

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会发现coverage文件夹，文件夹内的html‘文件打开如图所示

测试.PNG