vuedose.tips（翻译系列二十二）

Quick Content Testing using Snapshots in Vue.js

Today’s tip comes from no one else than Eduardo San Martín! You probably know him already since he’s one of the main core Vue.js team members.

We’re meeting today in Alicante and in a few days we’ll be speaking at the Vue Day. And surprise… We’ll have streaming! Make sure to follow @VueDay to get the link to the streaming and the recorded talks as soon as we publish them.

image

您是否听说过快照是邪恶的？ 关于它们有多脆弱以及如何避免它们？ 这是真的！ 您应该非常小心，因为它们会将内容作为文本进行精确比较，也就是说，如果您正在快照组件，实际上是在快照其HTML内容，那么任何更改HTML的操作都会破坏快照，并且如果重复的次数太频繁 ，您可能最终不小心接受了快照更新，并在应用程序中缺少了回归功能

但是您不必快照整个HTML！您甚至可以提供提示以识别快照，这可以非常方便地用于在飞行中生成测试装置，特别是对于非常大的内容集

假设您有一个很大的表，并且要测试给定一些 props，该表将显示正确的内容：

<table>
  <thead>
    <tr>
      <th v-for="column in columns">{{ column.name }}</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in items">
      <td v-for="column in columns">
        <span class="label">{{ colum.name }}: </span>
        <span class="value">{{ item[colum.key] }}</span>
      </td>
    </tr>
  </tbody>
</table>

在这里，columns是表中所有列的数组，而项目是显示的所有行的数组中的项。您可以说两者都是道具。如果您要测试具有这些道具的表的内容，则必须测试每一行：

test('contains the right information', () => {
  // columns and items are defined above
  const wrapper = shallowMount(MyTable { props: { columns, items }})
  // first cell in the header
  expect(wrapper.find('thead th:nth-of-type(1)').text()).toBe('Product')
  // first row in the tbody
  expect(wrapper.find('tbody tr:nth-of-type(1) .value').text()).toBe('Dinner plates set of 8')
  // repeat for EVERY row 🤯
})

有多种方法可以选择表格单元格，例如使用数据测试属性，但这并不是问题所在。 编写这种测试时，我们可以更快吗？ 如果我们编写了该组件，手动进行检查，然后添加一个可以快照当前状态的测试该怎么办？

test('contains the right information', () => {
  // columns and items are defined above
  const wrapper = shallowMount(MyTable { props: { columns, items }})

  const cells = wrapper.findAll("td");
  for (let i = 0; i < cells.length; ++i) {
    const cell = cells.at(i);
    // use label as the hint for the snapshot
    const label = cell.find(".label");
    if (!label.exists()) continue;    // filter out cells that do not have a label
    expect(cell.find(".value").text()).toMatchSnapshot(label.text());
  }
})

编写此测试将在第一次运行时生成快照：

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`MyTable contains the right information: Product Name 1`] = `"Dinner plates set of 8"`;

exports[`MyTable contains the right information: Sells 1`] = `"23"`;

exports[`MyTable contains the right information: Stock 1`] = `"3"`;

// more and more cells

此解决方案的优点是，添加新列将创建一个新快照而不会使其他快照无效，而删除现有列将使某些快照过时，更改任何单元格。value内容将使快照测试失败。

如果您不喜欢这样创建多个快照的想法，则可以创建一些自定义文本值并创建一个快照：

test('contains the right information', () => {
  // columns and items are defined above
  const wrapper = shallowMount(MyTable { props: { columns, items }})

  const cells = wrapper.findAll("td");
  let content = ''
  for (let i = 0; i < cells.length; ++i) {
    const cell = cells.at(i);
    // use label as the hint for the snapshot
    const label = cell.find(".label");
    if (!label.exists()) continue; // filter out cells that do not have a label
    content += `${label.text()}: ${cell.find(".value").text()} \n`
  }

  expect(content).toMatchSnapshot()
})

您将获得一个快照：

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`MyTable contains the right information 1`] = `
Product Name: Dinner plates set of 8
Sells: 23
Stock: 3
etc.
`;

因此请记住：快照也可以用于生成带有文本的测试装置！