單元測(cè)試應(yīng)該：

• 可以快速運(yùn)行
• 易于理解
• 只測(cè)試一個(gè)獨(dú)立單元的工作
  

框架

因?yàn)閱卧獪y(cè)試的建議通常是框架無(wú)關(guān)的，所以下面只是當(dāng)你在評(píng)估應(yīng)用的單元測(cè)試工具時(shí)需要的一些基本指引。

一流的錯(cuò)誤報(bào)告

當(dāng)測(cè)試失敗時(shí)，提供有用的錯(cuò)誤信息對(duì)于單元測(cè)試框架來(lái)說(shuō)至關(guān)重要。這是斷言庫(kù)應(yīng)盡的職責(zé)。一個(gè)具有高質(zhì)量錯(cuò)誤信息的斷言能夠最小化調(diào)試問題所需的時(shí)間。除了簡(jiǎn)單地告訴你什么測(cè)試失敗了，斷言庫(kù)還應(yīng)額外提供上下文以及測(cè)試失敗的原因，例如預(yù)期結(jié)果 vs. 實(shí)際得到的結(jié)果。

一些諸如 Jest 這樣的單元測(cè)試框架會(huì)包含斷言庫(kù)。另一些諸如 Mocha 需要你單獨(dú)安裝斷言庫(kù) (通常會(huì)用 Chai)。

活躍的社區(qū)和團(tuán)隊(duì)

因?yàn)橹髁鞯膯卧獪y(cè)試框架都是開源的，所以對(duì)于一些旨在長(zhǎng)期維護(hù)其測(cè)試且確保項(xiàng)目本身保持活躍的團(tuán)隊(duì)來(lái)說(shuō)，擁有一個(gè)活躍的社區(qū)是至關(guān)重要的。額外的好處是，在任何時(shí)候遇到問題時(shí)，一個(gè)活躍的社區(qū)會(huì)為你提供更多的支持。 盡管生態(tài)系統(tǒng)里有很多工具，這里我們列出一些在 Vue 生態(tài)系統(tǒng)中常用的單元測(cè)試工具。

Jest

Jest 是一個(gè)專注于簡(jiǎn)易性的 JavaScript 測(cè)試框架。一個(gè)其獨(dú)特的功能是可以為測(cè)試生成快照 (snapshot)，以提供另一種驗(yàn)證應(yīng)用單元的方法。

Mocha

是一個(gè)專注于靈活性的 JavaScript 測(cè)試框架。因?yàn)槠潇`活性，它允許你選擇不同的庫(kù)來(lái)滿足諸如偵聽 (如 Sinon) 和斷言 (如 Chai) 等其它常見的功能。另一個(gè) Mocha 獨(dú)特的功能是它不止可以在 Node.js 里運(yùn)行測(cè)試，還可以在瀏覽器里運(yùn)行測(cè)試。

推薦插件

Vue Testing Library (@testing-library/vue)

Vue Testing Library 是一組專注于測(cè)試組件而不依賴實(shí)現(xiàn)細(xì)節(jié)的工具。由于在設(shè)計(jì)時(shí)就充分考慮了可訪問性，它采用的方案也使重構(gòu)變得輕而易舉。

它的指導(dǎo)原則是，與軟件使用方式相似的測(cè)試越多，它們提供的可信度就越高。

Vue Test Utils

Vue Test Utils 是官方的偏底層的組件測(cè)試庫(kù)，它是為用戶提供對(duì) Vue 特定 API 的訪問而編寫的。如果你對(duì)測(cè)試 Vue 應(yīng)用不熟悉，我們建議你使用 Vue Testing Library，它是 Vue Test Utils 的抽象。該庫(kù)有很詳盡的API文檔 Vue Test Utils

示例

<template>
  <div>
    <input v-model="username">
    <div
      v-if="error"
      class="error"
    >
      {{ error }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'Hello',
  data () {
    return {
      username: ''
    }
  },

  computed: {
    error () {
      return this.username.trim().length < 7
        ? 'Please enter a longer username'
        : ''
    }
  }
}
</script>

以上就是vue 單元測(cè)試的推薦插件和使用示例的詳細(xì)內(nèi)容，更多關(guān)于vue 單元測(cè)試的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！