[指南] Vue 結合 Jest + TypeScript 導入單元測試 – 1

章節連結

Vue 2.X 版本若要結合 TypeScript 的模式導入單元測試,其中要繞掉的坑比想像中複雜許多。因此,這一篇是筆記下相關的設定值,來減少日後要再度研究的煩惱。當然,你也可以使用 Sinon, Mocha 或是 Chai…等,但如此一來,你就得花時間研究「測試環境專用的編譯工具、打包工具……等」,那花費的工夫實在太大了些。
vue.js logo vue


準備步驟

1.  package.json 設定檔

新增以下指令和檔案,如果有漏掉的,請自行看 Terminal 來除錯。
npm i -D <套件 1> <套件 2> …….

2.  jest.config 設定檔

新增在根目錄下

3. tsconfig 設定檔

基本概念

1. 用 Vue-Test-Utils 所提供的 shallowMount ,來模擬一個 Vue 檔讀取
2. 承上,讀取進來的 .vue 檔,可以用 .vm 來獲取該 Instance 裡的值,例如 $data
3. 若你要對讀取的生成的 Vue Instance 作操作,那你得參照 Vue Test Utils Wrapper 所提供的說明進行


範例程式碼

Github:Demo Spec.ts


參考資料

1. [vue]使用jest和官方的vue test utils來寫單元測試(vue單元測試系列-5)
2. Vue Test Utils Wrapper

按讚加入粉絲團

延伸閱讀