如何對第一個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