snapshot介紹

snapshot測試又稱快照測試，可以直觀地反映出組件UI是否發生了未預見到的變化。snapshot如字面上所示，直觀描述出組件的樣子。通過對比前后的快照，可以很快找出UI的變化之處。

第一次運行快照測試時會生成一個快照文件。之后每次執行測試的時候，會生成一個快照，然后對比最初生成的快照文件，如果沒有發生改變，則通過測試。否則測試不通過，同時會輸出結果，對比不匹配的地方。

jest中的快照文件以為snap拓展名結尾，格式如下（ps: 在沒有了解之前，我還以為是快照文件是截圖）。一個快照文件中可以包含多個快照，快照的格式其實是HTML字符串，對于UI組件，其HTML會反映出其內部的state。每次測試只需要對比字符串是否符合初始快照即可。

exports[`button 1`] = `"<div><span class=//"count//">1</span> <button>Increment</button> <button class=//"desc//">Descrement</button> <button class=//"custom//">not emitted</button></div>"`;

snapshot測試不通過的原因有兩個。一個原因是組件發生了未曾預見的變化，此時應檢查代碼。另一個原因是組件更新而快照文件并沒有更新，此時要運行jest -u更新快照。

› 1 snapshot failed from 1 test suite. Inspect your code changes or re-run jest with -u to update them.

結合Vue進行snapshot測試

生成快照時需要渲染并掛載組件，在Vue中可以使用官方的單元測試實用工具Vue Test Utils。

Vue Test Utils 提供了mount、shallowMount這兩個方法，用于創建一個包含被掛載和渲染的 Vue 組件的 Wrapper。component是一個vue組件，options是實例化Vue時的配置，包括掛載選項和其他選項(非掛載選項，會將它們通過extend覆寫到其組件選項)，結果返回一個包括了一個掛載組件或 vnode，以及測試該組件或 vnode 的方法的Wrapper實例。

mount(component:{Component}, options:{Object})

shallowMount與mount不同的是被存根的子組件，詳細請戳文檔。

Wrapper上的豐富的屬性和方法，足以應付本文中的測試需求。html()方法返回Wrapper DOM 節點的 HTML 字符串。find()和findAll()可以查找Wrapper里的DOM節點或Vue組件，可用于查找監聽事件的元素。trigger可以在DOM節點/組件上觸發一個事件。

結合上述的方法，我們可以完成一個模擬事件觸發的快照測試。

細心的讀者可能會發現，我們平時在使用Vue時，數據更新后視圖并不會立即更新，需要在nextTick回調中處理更新完成后的任務。但在 Vue Test Utils 中，為簡化用法，更新是同步的，所以無需在測試中使用 Vue.nextTick 來等待 DOM 更新。

demo演示