Vue 單元測試 vue-test-utils

課程介紹

購課人數
0 人
課程單元
40 個
授課語言
javascript

若你是寫過 Vue 但沒有寫過單元測試的工程師，這堂課程你將會學習到使用 vue-test-utils 更有效率地完成 Vue 的單元測試！因此課程將建立在已熟悉 Javascript、Vue3 的同學來學習，比較不適合尚未寫過 Vue 或沒用過 Vue-cli、Vite 的同學上課唷！

從事工程師工作的你，是否經常遇到以下狀況

在針對 UI 與使用者在交互操作的時候，是否有如你預期的呈現 UI？
很常被前輩同儕說你寫的 code 很難被測試，但是不懂是什麼意思？
是否在開發的過程中，常常改同事的 code 結果導致其他地方也跟者壞掉？

以上可能只是我們日常面臨問題的冰山一角，你可能會發現，常常在工程師的求職 JD 上，不時會看到條件上會出現一個叫做「需要有寫測試的經驗」，如此就足以看出會不會寫測試用的 code 對一位工程師來說有多重要了！

為何要學寫測試

許多工程師最常遇到的問題就是改 A 壞 B，或線上案子遇到多種不同的條件判斷時，會出現難以預期的錯誤，可你在前期作業時，根本沒出現過這樣的問題，所以… 寫測試就變成一種為了讓團隊軟體開發可以順利，並更加的穩定地存在技能之一。

vue-test-utils 的優勢

Vue 官方出的測試框架
搭配 Jest 使用更簡單方便
更好的整合方式去測試組件
業界廣泛使用

這堂課預計分成八大章節，從基礎環境設定到語法建立，並透過課程一步步把實務面知識落實到現有工作中。

第一章｜單元測試基本介紹

1. 什麼是單元測試？為什麼要做單元測試？
2. Jest 與 Vue-test-utils
3. 安裝 Jest 與 Vue-test-utils
4. 基本語法介紹 describe & it & test
5. expect 與斷言

第二章｜常用的 Vue-test-utils 語法

1. mount 與 shallowMount 的差異
2. get 與 find 的差異
3. find 與 findAll
4. .text() 與 .html()
5. findComponent 與 findAllComponents
6. classes 與 attributes
7. isVisible & exists 檢查元件是否可見

第三章｜測試內部資料的更新

1. data & props
2. 手動設定資料： setData
3. trigger 事件 click 
4. 手動設定 props：setProps
5. 手動設定表單value：setValue
6. emitted 的觸發

第四章｜常見的斷言語法

1. .toBe
2. .toMatch
3. .toContain
4. .toContainEqual

第五章｜非同步處理

1. jest.spyOn
2. jest.mock
3. jest.mock 其他函式

第六章｜測試 Vuex

1. 偽造一個 Store
2. 單獨測試 Store
3. How to setting test Store default value

第七章｜測試 Vue Router

1. stubs 掛載 router-link & router-view
2. 綁架 useRoute 和 useRouter
3. mockImplementation
4. flushPromises
5. toHaveBeenCalledWith

第八章｜其他常見的 API

1. slots
2. watchAll
3. collectCoverage

第九章｜課堂總結

1. JEST文件
2. 最後的最後

這堂課適合對於撰寫測試 Code 有興趣的工程師學習者
寫 Vue 但是尚未寫過單元測試的工程師
建議具有基礎的相關領域知識，如：Javascript、Vue3

上課前的注意事項

本課程使用 VScode 授課
本課程使用 Node v14.7.x 以上的版本

NT$ 2,200

你可以學到：

完整的 vue 單元測試
了解如何撰寫適合測試的 code
不藏私分享一些測試 vue 組件的細節

課程包含：

精美好理解的講義
完整範例的 code

前往購買

Vue 單元測試 vue-test-utils｜入門