本篇內(nèi)容介紹了“Vue組件如何進(jìn)行單元測(cè)試”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)憑借專業(yè)的設(shè)計(jì)團(tuán)隊(duì)扎實(shí)的技術(shù)支持、優(yōu)質(zhì)高效的服務(wù)意識(shí)和豐厚的資源優(yōu)勢(shì)，提供專業(yè)的網(wǎng)站策劃、網(wǎng)站制作、成都網(wǎng)站建設(shè)、網(wǎng)站優(yōu)化、軟件開發(fā)、網(wǎng)站改版等服務(wù)，在成都十載的網(wǎng)站建設(shè)設(shè)計(jì)經(jīng)驗(yàn)，為成都近千家中小型企業(yè)策劃設(shè)計(jì)了網(wǎng)站。

我們先來(lái)簡(jiǎn)單解釋一下單元測(cè)試：就是對(duì)函數(shù)的輸入輸出進(jìn)行測(cè)試，使用斷言的方式，判斷我們輸入的用例的結(jié)果和我們實(shí)際輸入的結(jié)果是否相同

組件的單元測(cè)試就是使用單元測(cè)試工具，對(duì)組件的各種狀態(tài)和行為進(jìn)行測(cè)試

組件單元測(cè)試的好處

• 提供描述組件行為的文檔

• 節(jié)省手動(dòng)測(cè)試的時(shí)間

• 減少研發(fā)新特性時(shí)產(chǎn)生的bug

• 改進(jìn)設(shè)計(jì)

• 促進(jìn)重構(gòu)

準(zhǔn)備工作

在我們進(jìn)行單元測(cè)試模擬之前，我們需要對(duì)環(huán)境進(jìn)行一些配置

安裝依賴

• Vue Test Utils  （學(xué)習(xí)視頻分享：vuejs教程）

npm install --save-dev jsdom jsdom-global

• Jest

npm install --save-dev jest

• vue-jest

npm install --save-dev @vue/vue2-jest # (use the appropriate version)

• babel-jest

yarn add --dev babel-jest @babel/core

安裝測(cè)試依賴

yarn add jest @vue/test-utils vue-jest babel-jest -D -W

這里有點(diǎn)小問(wèn)題，如果使用下發(fā)的命令進(jìn)行安裝的話會(huì)出現(xiàn)一點(diǎn)點(diǎn)的小錯(cuò)誤

yarn add jest @vue/test-utils vue-jest babel-jest -D

報(bào)錯(cuò)截圖：

Jest 的配置

jest.config.js

module.exports = {
  "testMatch": ["**/__tests__/**/*.[jt]s?(x)"],
  "moduleFileExtensions": [
    "js",
    "json",
    // 告訴 Jest 處理 `*.vue` 文件
    "vue"
  ],
  "transform": {
    // 用 `vue-jest` 處理 `*.vue` 文件
    ".*\\.(vue)$": "vue-jest",
    // 用 `babel-jest` 處理 js
    ".*\\.(js)$": "babel-jest" 
  }
}

基于上面的測(cè)試文件的配置，我們會(huì)將每個(gè)測(cè)試文件的配置放置于__tests__下

創(chuàng)建測(cè)試用例：

我們使用：packages\input 的 input 組件進(jìn)行測(cè)試

在packages\input 文件夾下 創(chuàng)建 __tests__ 文件夾 后創(chuàng)建 input.test.js

這里先給大家普及一下幾個(gè)常用的API

測(cè)試用例1 判斷是否是文本框

import input from '../src/input.vue'
import { mount } from '@vue/test-utils' // 掛載

describe('lg-input', () => {
  test('input-text', () => {
    const wrapper = mount(input)
    expect(wrapper.html()).toContain('input type="text"')
  })
})

這里我們需要 使用@vue/test-utils提供的mount方法進(jìn)行掛載，注意，這里只是在內(nèi)存中進(jìn)行掛載，并且我們需要保存這個(gè)包裹器返回的內(nèi)容

const wrapper = mount(input)

這個(gè)用例很簡(jiǎn)單，就是想要知道我們生產(chǎn)的是否是一個(gè)文本框，這里一個(gè)簡(jiǎn)單的測(cè)試用例就寫完了，接著我們運(yùn)行一下：

yarn test

運(yùn)行結(jié)果

修改用例

expect(wrapper.html()).toContain('input type="tex123123123t"')

運(yùn)行結(jié)果

測(cè)試失敗，提示沒(méi)有找到input type="tex123123123t"的內(nèi)容，符合預(yù)期，沒(méi)有問(wèn)題。

測(cè)試用例2 判斷是否是密碼框

 test('input-password', () => {
    const wrapper = mount(input, {
      propsData: {
        type: 'password'
      }
    })
    expect(wrapper.html()).toContain('input type="password"')
  })

我們可以通過(guò)propsData來(lái)進(jìn)行設(shè)置組件的props屬性

運(yùn)行結(jié)果

測(cè)試用例3 組件接收值是否正確

  test('input-password', () => {
    const wrapper = mount(input, {
      propsData: {
        type: 'password',
        value: 'admin'
      }
    })
    expect(wrapper.props('value')).toBe('admin')
  })

這里我們通過(guò)wrapper.props獲取他的props屬性，拿到這個(gè)值之后，進(jìn)行判斷

運(yùn)行結(jié)果

測(cè)試用例4 快照的使用

  test('input-snapshot', () => {
    const wrapper = mount(input, {
      propsData: {
        type: 'text',
        value: 'admin'
      }
    })
    expect(wrapper.vm.$el).toMatchSnapshot()
  })

我們要把掛載的dom對(duì)象拍一個(gè)快照，我們第一次調(diào)用這個(gè)方法的時(shí)候，他會(huì)把這個(gè)內(nèi)容掛載到一個(gè)特殊的文本文件中，當(dāng)我們?cè)俅紊a(chǎn)測(cè)試的時(shí)候，會(huì)將我們剛剛存儲(chǔ)的文件進(jìn)行對(duì)比，如果發(fā)生了變化就會(huì)出現(xiàn)測(cè)試失敗的情況

文件結(jié)構(gòu)：

修改快照的propsData

propsData: {
    type: 'password',
    value: 'admin'
}

測(cè)試結(jié)果

刪除快照結(jié)果，重新生成

yarn test -u

“Vue組件如何進(jìn)行單元測(cè)試”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！