首先，為什麼要單元測試元件？
單元測試是持續整合的關鍵。通過專注於小的、獨立的實體，確保單元測試始終按預期執行，使程式碼更加可靠，你可以放心地迭代你的專案而不必擔壞事兒。
單元測試不僅限於指令碼。可以獨立測試的任何東西都是可單元測試的，只要你遵循一些好的做法。這些例項包括單一責任、可預測性和鬆散耦合。
作為我們應用程式的可重用實體，Vue.js元件是單元測試的理想選擇。我們將用不同的輸入和互動測試做好的單個單元，並確保它始終按照我們的預期執行。
在開始之前
Vue CLI 3釋出了。Vue Test Utils-官方的Vue.js單元測試實用程式庫-已經成長為beta版。在第一篇教程中，我們使用了webpack-simple，一個不包含測試功能的原型模板。出於這些原因，最簡單的方法是“擦乾淨黑板”並將專案從教程遷移到更新後的Vue.js安裝。
我從第一個教程重新建立了專案，因此您可以直接從GitHub下載它。然後導航到解壓縮的目錄並安裝依賴項。
注意：確保在繼續之前安裝Node.js：
執行專案：
Vue Test Utils和Jest
在本教程中，我們將使用Vue Test Utils——官方Vue.js測試工具包，以及Jest，一個由Facebook支援的JavaScript測試執行器。
Vue Test Utils允許您單獨安裝Vue元件並模擬使用者互動。它有測試單個檔案元件所需的所有實用程式，包括使用Vue Router或Vuex的實用程式。
Jest是一個功能齊全的測試執行器，幾乎不需要配置。它還提供了一個內建的斷言庫。
Vue CLI 3（我用它來生成樣板檔案）允許您選擇自己喜歡的測試執行器，並設定好它。如果要使用其他測試執行器（如Mocha），請安裝Vue CLI 3並生成自己的啟動專案。然後，您可以從我的樣板中直接遷移原始檔。
我們應該測試什麼？
單元測試的一種常見方法是僅關注公共API（也稱為黑盒測試）。通過忽略實現細節，您可以在不必調整測試的情況下進行內部更改。畢竟，您要做的是確保您的公共API不會中斷。在“引擎蓋”下發生的事情是被間接測試的，但重要的是公共API保持可靠。
這也是Vue Test Utils指南的官方建議。因此，我們只測試我們可以從元件外部訪問的內容：
互動
道具變化
我們不會直接測試計算屬性、方法或鉤子（hooks）。這些將通過測試公共介面進行隱性測試。
設定spec檔案
與常規測試一樣，每個元件都有一個spec檔案，用於描述我們要執行的所有測試。
規範是JavaScript檔案。按照慣例，JavaScript與它們正在測試的元件具有相同的名稱，加上.spec字尾。
繼續建立一個test/unit/Rating.spec.js檔案：
我們已經匯入了Rating元件和shallowMount。後者是Vue Test Utils的一個功能，它允許我們掛載我們的元件而不掛載它的子元件。
describe函式呼叫包含了我們即將編寫的所有測試-它描述了我們的測試套件。它有自己的地域，可以自己包裝其他巢狀套件。
好了，讓我們開始編寫測試。
確定測試方案
當我們從外部看評級時，我們可以看到它在執行以下操作：
它呈現的stars列表等於使用者傳遞的maxStars道具的屬性；
它為每個star新增一個活動類，其索引值小於或等於使用者傳遞的stars屬性；
當使用者點選它時，它會切換star上的活動類別，並在下一個stars上移除它；
當使用者點選一個star時，它會切換圖示star和star-o；
如果使用者將hasCounter prop設定為true，則呈現計數器，如果將其設定為false，則隱藏它，並顯示錶示當前活動的最大stars數量的文字；
請注意，我們只關注元件從外部執行的操作。我們不關心點選star執行率的方法，還是內部stars資料屬性發生的變化。我們可以重新命名這些，但這不應該破壞我們的測試。