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

似乎该插件尚处于初期"version": "0.0.0-development"。

虽然目前没有似乎是定制的比较函数，看着一个选项源是目前仅限于快照-比较

cypress-io /快照/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 })
}

但是可以在compare函数周围添加包装器。

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

这意味着您将无法直接升级到该插件的下一个正式版本，但是需要针对每个发行版重复这些步骤。

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

• npm install --save-dev @ cypress /快照

• 将安装的文件夹复制node_modules\@cypress\snapshot到cypress\support\snapshot

• 将compare导入更改cypress\support\snapshot\src\index.js为指向自定义比较器，如下所示：

  // 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由于全文不包含过滤后的文本，因此正则表达式仅用于比较目的。