課程介紹
-
購課人數
174 人 -
授課語言
javascript
從事工程師工作的你,是否經常遇到以下狀況
- 在針對 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 以上的版本
你可以學到:
- 完整的 vue 單元測試
- 了解如何撰寫適合測試的 code
- 不藏私分享一些測試 vue 組件的細節
課程包含:
- 精美好理解的講義
- 所有的完成範例檔案
- 所有的練習範例檔案
- 各種學習資料整理
- 專屬的 FB 學習社團
- 專屬的 Discord 群組
- 老師的 Line 官方帳號