【譯】Vue 的小奇技（第九篇）：快照測試的威力

• 原文地址：The power of Snapshot Testing

• 原文做者：Alex Jover

• 譯者：程序猿何大叔

特別聲明：本文是做者 Alex Jover 發佈在 VueDose 上的一個系列。

版權歸做者全部。

譯者在翻譯前已經和做者溝通獲得了翻譯整個系列的受權。

爲了避免影響你們閱讀，得到受權的記錄會放在本文的最後。

正文

若是你進入了測試階段，你可能已經開始時候用了 Jest：Facebook 建立的一體化測試框架。如今它是最流行的測試框架之一，並且我從一開始就使用至今。

你也可能在使用由 Edd Yerburg 開發的 vue-test-utils，它是官方的單元測試實用工具庫，能讓咱們的測試工做變得更方便。

下面給出同時使用了 Jest 和 vue-test-utils 的測試案例：

it('has a message list of 3 elements', () => {
  const cmp = createCmp({ messages: ['msg-1', 'msg-2', 'msg-3'] })
  expect(cmp.is('ul')).toBe(true)
  expect(cmp.find('.message-list').isEmpty()).toBe(false)
  expect(cmp.find('.message-list').length).toBe(3)
})

it('has a message prop rendered as a data-message attribute', () => {
  const cmp = createCmp({ message: 'Cat' })
  expect(cmp.contains('.message')).toBe(true)
  expect(cmp.find('.message').props('message').toBe('Cat')
  expect(cmp.find('.message').attributes('data-message').toBe('Cat')

  // Change the prop message
  cmp.setProps({ message: 'Dog' })
  expect(cmp.find('.message').props('message').toBe('Dog')
  expect(cmp.find('.message').attributes('data-message').toBe('Dog')
})
複製代碼

正如上面所示，vue-test-utils 給咱們提供了不少方法來檢查 props、classes、content、search 等等。另外，它還給咱們提供了能改變屬性的方法，像 setProps，這個很贊。

這個測試案例有着很是明確的斷言：「找到帶有 ‘message’ 樣式名的元素，並檢查它是否有設置爲 ‘cat’ 的 ‘data-message’ 屬性」。

但若是我告訴你，有了快照測試，你不再須要作以上的工做。

基本上，你能夠利用 snapshots 重寫之前的測試案例，以下：

it("has a message list of 4 elements", () => {
  const cmp = createCmp({ messages: ["msg-1", "msg-2", "msg-3"] });
  expect(cmp.element).toMatchSnapshot();
});

it("has a message prop rendered as a data-message attribute", () => {
  const cmp = createCmp({ message: "Cat" });
  expect(cmp.element).toMatchSnapshot();

  cmp.setProps({ message: "Dog" });
  expect(cmp.element).toMatchSnapshot();
});
複製代碼

測試的結果仍是同樣的，有時候你還能在快照中找到更多的內容。

注意到在這個測試案例中，我就僅僅在斷言表達式中使用了 toMatchSnapshot 方法，沒有其餘了。這能讓單元測試變得更簡單和更快速，由於咱們再也不須要單獨檢查特定的屬性了。

隨之而來的是，單元測試的動態性也改變了，咱們再也不寫專門的斷言表達式，而是能夠將組件設置成任何你想要的狀態，而後給它拍個快照。

快照意味着斷言渲染狀態：它們描述了組件被賦予一個狀態時是如何被渲染的，而後拍攝快照，並在比較中校驗其有效性。

記着不要經過給單元測試「拍攝快照」來決定你想要的東西，而是取決於你想要去測試什麼，以免本末倒置。

有這麼一個方法進行單元測試，我已經受益不淺了。可是若是你須要去閱讀、瞭解、學習更多，你能夠購買個人書本 Testing Vue.js Components with Jest。上週我在其中加入了全新的一個章節，專門用來說述快照測試，包括以下：

• 從新思考快照
• 爲何、如何、何時使用快照
• 何時不使用
• 示例代碼

請與我交流你的思考，你能夠在推特上找到 我。

你能夠在線閱讀這篇 原文，裏面有可供複製粘貼的源代碼。若是你喜歡這個系列的話，請分享給你的同事們！

結語

此係列的其餘文章，會同步系列官網的發佈狀況，及時地翻譯發佈到掘金。請持續關注「程序猿何大叔」，相信我會給你們帶來更多優質的內容，不要忘了點贊~

若是想要了解譯者的更多，請查閱以下：

• 我的博客：blog.hadesz.com
• 我的 github 倉庫：github.com/hadeshe93
• 我的微信公衆號：搜索「程序猿何大叔」

請求翻譯受權記錄

---

以爲本文不錯的話，分享一下給小夥伴吧~