這是jest教程的最後一篇文章了，也算對自己所學知識的回顧吧！
vue項目實戰git地址：https://github.com/foreverhot/jest-document
在實際項目中運用jest所具備知識點
- jest （測試框架）
- 匹配器matchers
https://blog.csdn.net/Jsoning/article/details/103898385 - 鉤子函數
https://blog.csdn.net/Jsoning/article/details/103984393 - 異步代碼測試
https://blog.csdn.net/Jsoning/article/details/103976195 - mock 函數
https://blog.csdn.net/Jsoning/article/details/103992103 - 定時器測試
https://blog.csdn.net/Jsoning/article/details/104014997 - snapshot快照測試
https://blog.csdn.net/Jsoning/article/details/104015027 - TDD、BDD、單元測試、集成測試（簡單瞭解）
https://blog.csdn.net/Jsoning/article/details/104015061
以上鍊接是對於各個知識點用法的個人總結，包括了大部分jest框架中的用法，當然也可以去查看jest的官方文檔
- Vue Test Utils （ Vue.js官方的單元測試實用工具庫）
- 想要在vue中更方便的使用jest進行測試的話，vue官方很貼心的提供了一個test-utils，可以更方便的對vue中的組件，DOM等進行測試
- 官網鏈接：https://vue-test-utils.vuejs.org/zh/
- vuejs
- 想要在vue中使用jest，對於vue框架的熟練使用是必備的
在vue中使用jest
前提已經瞭解以上3點基礎知識
這裏做了一個demo，大致先了解一下demo所具有的功能
這個demo涉及到的測試功能有：
- DOM的測試
- 異步代碼測試
- 定時器測試
- vuex測試
- 快照測試
- 單元測試
- 集成測試
- 等
克隆該項目，npm run test 即可查看該項目測試結果
下面我們開始分析項目demo
-
安裝jest
在通過vue-cli初始化項目的時候，選擇單元測試和jest測試框架即可 -
項目結構
- 這裏默認初始化完項目後，
tests是一個單獨的文件夾，如果將所有的測試文件都寫在一個文件中，當你找一個測試文件時候比較麻煩。這裏我將每個組件文件夾下都添加一個tests文件夾，這樣項目結構使用起來更方便 - 因爲修改了測試文件的目錄，因此需要重新在
jest.config.js配置一下jest檢查測試文件的查找路徑(更多配置可以查看官網：https://jestjs.io/docs/en/configuration)
- 腳手架默認是查找
xx.spec.js測試文件，剛纔修改路徑的時候我們保留了默認配置
-
項目檢查
運行npm run test，即可對代碼進行檢查，這裏添加了--watchAll，每次修改後會自動進行檢查
-
這裏對項目中 異步代碼測試 和 vuex進行測試 分析一下，其他的都較好理解
在Home.vue中在進入頁面的時候，會先去請求數據，將請求到的數據放入到vuex中，最後展示到頁面
- 在寫測試用例的時候，不會去真的請求是數據，因此需要模擬數據，因此
__mock__文件夾中就是模擬的數據
export default {
// get請求，這裏根據請求路徑，模擬返回值
get(url) {
switch (url) {
case '/ceshi':
return new Promise(resolve => {
resolve({
data: ['測試1', '測試2', '測試3']
})
})
default:
break;
}
}
}
- 在
home.spec.js中，這裏寫的是集成測試
// 部分代碼
it(`
1. 用戶進入界面請求數據
2. 將數據存儲在vuex中
3. 頁面展示數據
4. 點擊圖片刪除對應數據
`, (done) => {
// 這裏組件中使用到了vuex，因此將store和localVue，傳入組件中
const wrapper = mount(Home, { store, localVue })
// Home組件created中請求數據，這裏使用$nextTick和done等待異步代碼的完成後執行斷言
wrapper.vm.$nextTick(() => {
let items = wrapper.findAll('[data-test="item"]')
expect(items.length).toBe(3)
items.at(0).trigger('click')
items = wrapper.findAll('[data-test="item"]')
expect(items.length).toBe(2)
expect(items.at(0).text()).toBe('測試2')
done()
})
})
vue項目實戰git地址：https://github.com/foreverhot/jest-document
本人能力有限，文章可能會有不正確或者不恰當的部分，希望你可以指出
