如何使用 Cypress 端到端快照测试来测试 Vue 单文件组件

Question

我有一个 Vue 单文件组件，我正在尝试使用 Cypress 端到端测试和@cypress/snapshot.

进行快照测试

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

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

重建后

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

是否有任何选项可以安全地忽略部分快照比较，例如 "data-v-*"，这样测试仍然可以通过？快照测试不是解决问题的方法吗，and/or 有更好的选择吗？

Answer 1

这个插件似乎还处于早期阶段，"version": "0.0.0-development"。

似乎没有自定义比较功能的选项，查看 source it is currently limited to snap-shot-compare

cypress-io/snapshot/src/index.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 })
}

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

您需要制作插件的本地副本，并mod将其修改为引用自定义 compare 函数。

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

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

npm install --save-dev @cypress/snapshot
复制安装文件夹node_modules\@cypress\snapshot到cypress\support\snapshot
更改了 cypress\support\snapshot\src\index.js 中的 compare 导入以指向自定义比较器，如下所示：
```
// const compare = require('snap-shot-compare')
const compare = require('./my-compare')
```

已将 my-compare.js 添加到文件夹 cypress\support\snapshot\src\，代码如下：

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

最棘手的一点是让正则表达式正确。您可能可以使用以下内容，在 regex101.

上查看

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

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

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

如何使用 Cypress 端到端快照测试来测试 Vue 单文件组件

How to test Vue Single File Components with Cypress End To End snapshot testing

vue.js

e2e-testing

cypress