如何使用赛普拉斯端到端快照测试测试 Vue 单个文件组件

Question

我有一个 Vue 单文件组件，我正在尝试使用 Cypress 端到端测试和 @cypress/快照进行快照测试。

如果组件的 html 获取动态生成的数据或属性，则可能会出现问题。例如，具有作用域 CSS 样式的单个文件组件将"data-v-[some hash]"属性添加到元素中，如果哈希更改，测试也会失败。

<label class="label" data-v-0ee42ab8="">

重建后

<label class="label" data-v-ca809ab3="">

是否有任何选项可以安全地忽略快照比较的某些部分，例如"data-v-*"，以便测试仍然通过？快照测试不是这里的方式，和/或有更好的选择吗？

Answer 1

这个插件似乎还为时尚早，"version": "0.0.0-development".

似乎没有自定义比较功能的选项，查看源，它目前仅限于快照比较

赛普拉斯-io/快照/src/索引.js

'use strict'
/* global cy, Cypress */
...
const compare = require('snap-shot-compare')
...
function compareValues ({ expected, value }) {
const noColor = true
const json = true
return compare({ expected, value, noColor, json })
}

但是可以在比较函数周围添加一个包装器。

您需要创建插件的本地副本并对其进行修改以引用自定义compare函数。

这意味着您将无法直接升级到插件的下一个正式版本，而是需要为每个版本重复这些步骤

在我的 React 应用程序中，我想在比较之前从快照中删除 css 模块哈希。
我采取的步骤如下：

• npm install --save-dev @cypress/snapshot

• 将已安装的文件夹node_modules@cypresssnapshot复制到cypresssupportsnapshot

• 将cypresssupportsnapshotsrcindex.js中的导入compare更改为指向自定义比较器，如下所示：

  // const compare = require('snap-shot-compare')
  const compare = require('./my-compare')
  

• 使用以下代码将my-compare.js添加到文件夹cypresssupportsnapshotsrc：

  const snapshotCompare = require('snap-shot-compare')
  function compare(data) {
  const filterRegex = /__[^"]+/gm;
  filtered = {
  ...data,
  expected: data.expected.replace(filterRegex, ''),
  value: data.value.replace(filterRegex, '')
  }
  return snapshotCompare(filtered)
  }
  module.exports = compare
  

最棘手的一点是正确使用正则表达式。您可能可以使用以下内容，在正则表达式101上检查它。

const filterRegex = /data-v-[^=]+=""/gm;

您可以通过在第二次运行之前编辑第一个保存的snapshot.js来粗略地进行测试 - 例如data-v-更改为datav-，并观察测试失败，因为正则表达式不会拾取 mod。

请注意，snapshot.js包含全文而不是过滤文本，则正则表达式仅用于比较目的。