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

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

    新年早鳥優惠
    2022-01-31
    $1,500
    預購中
    2022-02-10
    $1,800
    正式價格
    2022-04-30
    $2,200
    前端工程師全家桶組合包 完整的 JS 到 Vue3 開發網站的規劃學習路線,讓你完整的帶走
    三堂開泰課程優惠組合包 (部分課程為預售課程,請購買前務必詳讀課程開課日期)

    課程介紹

    • 購課人數

      174 人
    • 授課語言

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

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

    • 在針對 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 以上的版本


    NT$ 2,200

    你可以學到:

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

    課程包含:

    • 精美好理解的講義
    • 所有的完成範例檔案
    • 所有的練習範例檔案
    • 各種學習資料整理
    • 專屬的 FB 學習社團
    • 專屬的 Discord 群組
    • 老師的 Line 官方帳號

    現在就加入課程 !

    常見問題

    若您的問題沒有獲得解答,歡迎與我們聯繫喔

    關於發票

    為響應環保,僅提供電子發票,免費課程則不開立發票。
    ※提醒您發票一經開出恕不接受換開,若有報帳需求請務必於購買時選擇統編發票,並請確認您所輸入的資訊為正確資訊。

    海外人士可以購買課程嗎?

    若您的所在地不是台灣地區,您可以選擇「信用卡付清」、「信用卡分期」或「網絡ATM」進行付款,如果信用卡刷卡不成功,可能是尚未開通「海外線上支付」功能,請聯繫您的信用卡公司協助開通。

    退費規範

    為尊重您自己的時間,以及課程的著作權,看過試閱章節以外的內容就不能退費。

    合作 & 聯繫管道

    客服信箱:1208966@gmail.com

    LINE官方帳號:@mike_cheng