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

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

• 在針對 UI 與使用者在交互操作的時候，是否有如你預期的呈現 UI？

• 很常被前輩同儕說你寫的 code 很難被測試，但是不懂是什麼意思？

• 是否在開發的過程中，常常改同事的 code 結果導致其他地方也跟者壞掉？

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

為何要學寫測試

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

vue-test-utils 的優勢

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

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

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

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

上課前的注意事項

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