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

  首先，為什么要單元測試組件？

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

  單元測試不僅限于腳本�？梢元毩y試的任何東西都是可單元測試的，只要你遵循一些好的做法。這些實例包括單一責任、可預測性和松散耦合。

  作為我們應用程序的可重用實體，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數據屬性發生的變化。我們可以重命名這些，但這不應該破壞我們的測試。