目錄

• 框架
  
• 一流的錯誤報告
  
• 活躍的社群和團隊
  
• Jest
  
• Mocha
  
• 推薦外掛
  
• vue Testing Library (@testinkaQRvmVHOLg-library/vue)
  
• Vue Test Utils
  
• 示例

單元測試應該：

• 可以快速執行
• 易於理解
• 只測試一個獨立單元的工作
  

框架

因為單元測試的建議通常是框架無關的，所以下面只是當你在評估應用的單元測試工具時需要的一些基本指引。

一流的錯誤報告

當測試失敗時，提供有用的錯誤資訊對於單元測試框架來說至關重要。這是斷言庫應盡的職責。一個具有高質量錯誤資訊的斷言能夠最小化除錯問題所需的時間。除了簡單地告訴你什麼測試失敗了，斷言庫還應額外提供上下文以及測試失敗的原因，例如預期結果 vs. 實際得到的結果。

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

活躍的社群和團隊

因為主流的單元測試框架都是開源的，所以對於一些旨程式設計客棧在長期維護其測試且確保專案本身保持活躍的團隊來說，擁有一個活躍的社群是至關重要的。額外的好處是，在任何時候遇到問題時，一個活躍的社群會為你提供更多的支援。 儘管生態系統裡有很多工具，這裡我們列出一些在 Vue 生態系統中常用的單元測試工具。

Jest

Jest 是一個專注於簡易性的 javascript 測試框架。一個其獨特的功能是可以為測試生成快照 (snapshot)，以提供另一種驗證應用單元的方法。

Mocha

是一個專注於靈活性的 javaScript 測試框架。因為其靈活性，它允許你選擇不同的庫來滿足諸如偵聽 (如 Sinon) 和斷言 (如 Chai) 等其它常見的功能。另一個 Mocha 獨特的功能是它不止可以在 Node.js 裡執行測試，還可以在瀏覽器裡執行測試。

推薦外掛

Vue Testing Library (@testing-library/vue)

Vue Testing Library 是一組專注於測試元件而不依賴實現細節的工具。由於在設計時就充分考程式設計客棧慮了可訪問性，它採用的方案也使重構變得輕而易舉。

它的指導原則是，與軟體使用方式相似的測試越多，它們提供的可信度就越高。

Vue TeskaQRvmVHOLt Utils

Vue Test Utils 是官方的偏底層的元件測試庫，它是為使用者提供對 Vue 特定 API 的訪問而編寫的。如果你對測試 Vue 應用不熟悉，我們建議你使用 Vue Testing Library，它是 Vue Test Utils 的抽象。該庫有很詳盡的API文件 Vue Test Utils

示例

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

<script>http://www.cppcns.com
export default {
  name: 'Hello',data () {
    return {
      username: ''
    }
  },computed: {
    error () {
      return this.username.trim().length < 7
        ? 'Please enter a longer username'
        : ''
    }
  }
}
</script>

以上就是vue 單元測試的推薦外掛和使用示例的詳細內容，更多關於vue 單元測試的資料請關注我們其它相關文章！