近期因開發需要，開始替自行封裝的套件撰寫單元測試。由於 Vue3 的相關內容較少，這邊筆記下一些撰寫時要有的重點和常見誤區。
![[筆記] Vue3 + Jest 的 Unit Test 單元測試重點整理](https://smlpoints.com/wp-content/uploads/notes-vue-2-with-typescript-1.png "[筆記] Vue3 + Jest 的 Unit Test 單元測試重點整理")
內容
開發環境準備
請根據 Vue Jest 所提供的版本清單，安裝對應的 vue, jest 並撰寫對應的 jest config
每個 test 的初始化
1. 每一個 test 都建議是一個獨立的 Instance，避免不同的 Test 之間的交互影響。不過要小心無論是 shallowMount 還是 mount，其 config 若放在 global 的區塊，並不會每次都重新生成，進而導致如 setValue 的結果被共用。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
// wrong const mountConfig = { props: { name: "unit-test-table", border: true, highlightCurrentRow: true, defaultSort: { prop: "email", order: "descending" }, columns: [], list: [ { userId: "userId3", username: "demo user3", }, { userId: "userId4", username: "demo user4", }, ], }, } beforeEach(async () => { mountInstance = mount(Table, mountConfig) }) // correct beforeEach(async () => { const mountConfig = { props: { name: "unit-test-table", border: true, highlightCurrentRow: true, defaultSort: { prop: "email", order: "descending" }, columns: [], list: [ { userId: "userId3", username: "demo user3", }, { userId: "userId4", username: "demo user4", }, ], }, } mountInstance = mount(Table, mountConfig) jest.useFakeTimers() }) afterEach(()=>{ mountInstance.unmount() jest.clearAllTimers() }) |
2. Jest 所提供的 jest.useFakeTimers() 和 jest.clearAllTimers() 會分別放在 beforeEach 和 afterEach 內。另外 shallowMount 和 mount 在生成後，也要在 afterEach 內進行 unmount()
如何呼叫 Vue Instance 的方法或是取得其內的值
用 vm?.<Vue 元件內的變數>，如 vm?.userName 或是 vm?.triggerStatus(true)
NextTick 和 FlushPromises
由於 Vue test-utils 並沒有辦法得知元件內的 Promise 狀態( 如獲取 API，表單驗證結果 … 等)，你可以使用 FlushPromises 方法來快轉這些 Promise，讓測試工具得以判別 Promise 後的狀態
一般的情況下，使用 nextTick() 就可以了
AAA 原則
Arrange – 初始化物件和參數：可在 beforeEach 的週期內完成
Act – 呼叫測試方法：可以是測試工具提供，或是元件內的方法
Assert 驗證測試結果 – 撰寫斷言，看 Act 的結果正不正確
參考資料
1. flushPromises from vue-test-utils must be called multiple times
2. jestのuseFakeTimersがasync/awaitのあるコードでうまく動作しない
3. [jest] Guides – Timer Mocks
4. Unit Testing Notes
5. [Unit Test]AAA原則
