如何對第一個Vue.js組件進行單元測試 （上） 原

首先，爲什麼要單元測試組件？

       單元測試是持續集成的關鍵。通過專注於小的、獨立的實體，確保單元測試始終按預期運行，使代碼更加可靠，你可以放心地迭代你的項目而不必擔壞事兒。

       單元測試不僅限於腳本。可以獨立測試的任何東西都是可單元測試的，只要你遵循一些好的做法。這些實例包括單一責任、可預測性和鬆散耦合。

       作爲我們應用程序的可重用實體，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函數調用包含了我們即將編寫的所有測試- 它描述了我們的測試套件。它有自己的地域，可以自己包裝其他嵌套套件。

       好了，讓我們開始編寫測試。

確定測試方案

       當我們從外部看評級時，我們可以看到它在執行以下操作：

1. 它呈現的stars列表等於用戶傳遞的maxStars道具的屬性；

2. 它爲每個star添加一個活動類，其索引值小於或等於用戶傳遞的stars屬性；

3. 當用戶點擊它時，它會切換star上的活動類別，並在下一個stars上移除它；

4. 當用戶點擊一個star時，它會切換圖標star和star-o；

5. 如果用戶將hasCounter prop設置爲true，則呈現計數器，如果將其設置爲false，則隱藏它，並顯示錶示當前活動的最大stars數量的文本；

6. 請注意，我們只關注組件從外部執行的操作。我們不關心點擊star執行率的方法，還是內部stars數據屬性發生的變化。我們可以重命名這些，但這不應該破壞我們的測試。

    可閱讀原文鏈接：https://www.bdgstore.com.cn/portal/article/index/id/205.html