[筆記] Vue3 Element UI 撰寫單元測試實作 – 以 el-form 為例

對 Element-Plus 的套件進行二次封裝後,撰寫 Unit Test 來讓元件的可靠性提昇是個不錯的作法。這邊筆記下撰寫封裝第三方套件的 Unit Test 時,所需的注意事項。

vue.js logo vue


內容

重點

1. Element Plus 的套件 (第三方),需要用 global 的 plugins 引入 ( 可用 array )
2. 由於 Jest 在執行時並不會觸發 vite 或是 vue-cli 的 AutoImport 載入 vue,所以原始碼中要記得引入 vue 的服務像是 computed, ref …等
3. 撰寫測試時,有時會遇上需要不只有一次 nextTick 的情況。這時可以用一個函式包裝起來,傳入對應的次數即可
4. <input>, <select> … 等方法一旦 trigger focus 後,是沒有內建的辦法消除的
5. 將 VueInstance mount 出來後,可以用 vm.<key> 的方法取得裡面的值和方法
6. 若要測試 emit 的內容,可以先印出 emitted() 看對應的方法有沒有值
7. 若要測試有無 console.log, console.warn 之類的,可以用如 jest.spyOn(console, “warn”) .mockImplementation(() => {}),然後去檢測其有沒有被呼叫


程式碼


參考資料

1. wrapper.setValue() cannot be called on EL-INPUT
2. How to solve ElementUI unknown element warning in unit tests?
3. Use the Element-Plus unit test to prompt Vue Warn

按讚加入粉絲團

延伸閱讀