vue 單元測試

vue cli 擁有開箱即用的通過 jest 或 mocha 進行單元測試的內建選項。我們還有官方的 vue test utils 提供更多詳細的指引和自定義設定。

}

// 匯入 vue test utils 內的 `shallowmount` 和待測試的元件

import  from '@vue/test-utils'
import mycomponent from './mycomponent.vue'
// 掛載這個元件
// 這裡是一些 jest 的測試，你也可以使用你喜歡的任何斷言庫或測試
describe('mycomponent', () => )
// 評估原始元件選項中的函式的結果
it('sets the correct default data', () => )
// 檢查 mount 中的元件例項
it('correctly sets the message when created', () => )
// 建立乙個例項並檢查渲染輸出
it('renders the correct message', () => )
})

}

import  from '@vue/test-utils'

import mycomponent from './mycomponent.vue'
// 掛載元素並返回已渲染的元件的工具函式
function getmountedcomponent(component, propsdata) )
}describe('mycomponent', () => ).text()
).tobe('hello')
expect(
getmountedcomponent(mycomponent, ).text()
).tobe('bye')
})})

// 在狀態更新後檢查生成的 html

// 在狀態改變後和斷言 dom 更新前等待一刻
})

VUE 單元測試

官網上推薦的是karma和jasmine,這裡我寫的是我們自己的手動單元測試.我們都知道,乙個專案在完成之後會進入後期的更新迭代和維護.而單元測試雖然在前期寫起來會相對麻煩,但是在後期的維護過程中會簡單很多,可以明顯的看出是後台埠的問題還是前端自己的問題.我們現在工程目錄裡建立乙個測試的資料夾 這裡...

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...