官網上推薦的是karma和jasmine,這裡我寫的是我們自己的手動單元測試.
我們都知道,乙個專案在完成之後會進入後期的更新迭代和維護.而單元測試雖然在前期寫起來會相對麻煩,但是在後期的維護過程中會簡單很多,可以明顯的看出是後台埠的問題還是前端自己的問題.
我們現在工程目錄裡建立乙個測試的資料夾
這裡我們建立的是apitest測試資料夾,而使用者中心的測試每個人乙個模組是放在ucenter下的
這裡我簡單的舉個例子,org是組織機構的單元測試,我們在ucenter資料夾下面建立乙個org.vue.我們之前曾在api的資料夾下面根據不同的模組封裝了api介面,這裡我們需要直接呼叫方法.
我們需要在頁面上跑起來,所以需要創造乙個元件
這裡我們為了簡單化,所以每個p標籤裡面的內容是要測試的介面和測試這個介面成功之後返回的值.我們還需要把我們要測試的api引進來
引入api之後,重點就是如何讓我們的測試執行跑起來,我們現在data裡面宣告我們繫結的資料,初始狀態為false
接下來我們就要在methods裡面寫測試的方法.
在這裡我們寫請求介面方法的時候,封裝裡面的方法我們返回的是所有的資料(response),所以
orgadd.post(orgadd.inputvalue).then(function (rep)
}.bind(this));
then後面的req也是全部返回的資料.如果返回資料碼是200的話,我們之前定義的testorgaddparam就為true.後面的bind(this)必須寫,代表指向,如果不寫的話容易出現問題,當然大家也可以嘗試試驗一下,我這也只是按照我們的經驗而談的.最後我們需要讓這個方法執行起來才能看到是否有問題.所以需要在created裡面讓他們在頁面載入前執行起來.
你需要把你寫的這個檔案寫在主頁面和路徑當中,讓它可以在頁面展示出來,展示的效果如下
這樣效果就會直觀很多.
這是就其中乙個方法和介面的測試.當然如果你負責的模組有很多埠的話,你需要把所有的測試寫在這乙個檔案當中,簡單清晰.方便後期的維護.
vue 單元測試
vue cli 擁有開箱即用的通過 jest 或 mocha 進行單元測試的內建選項。我們還有官方的 vue test utils 提供更多詳細的指引和自定義設定。你不必為了可測性在元件中做任何特殊的操作，匯出原始設定就可以了 然後隨著 vue test utils 匯入元件，你可以使用許多常見的斷...
vue 單元測試
在 vscode 編輯器安裝乙個名為jest的外掛程式 建立專案 用此新建的專案可以不用安裝依賴 vue init webpack unit demo編寫 jest 配置檔案 需要在 jest.conf.js中加入此 否則會報錯 編寫乙個元件 unit testing demo src compon...
vue 單元測試
vue cli 擁有開箱即用的通過 jest 或 mocha 進行單元測試的內建選項。我們還有官方的 vue test utils 提供更多詳細的指引和自定義設定。你不必為了可測性在元件中做任何特殊的操作，匯出原始設定就可以了 然後隨著 vue test utils 匯入元件，你可以使用許多常見的斷...