[英]How to test Vue Single File Components with Cypress End To End snapshot testing
我有一个 Vue 单文件组件,我正在尝试使用 Cypress 端到端测试和 @cypress/snapshot 进行快照测试。
如果组件的 html 获取动态生成的数据或属性,则可能会出现问题。 例如,具有作用域 CSS 样式的单个文件组件向元素添加“data-v-[some hash]”属性,如果散列更改,测试也会失败。
<label class="label" data-v-0ee42ab8="">
重建后
<label class="label" data-v-ca809ab3="">
是否有任何选项可以安全地忽略部分快照比较,例如“data-v-*”,因此测试仍然会通过? 快照测试不适合这里,和/或有更好的选择吗?
这个插件似乎还"version": "0.0.0-development"
早期, "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
函数。
这意味着您将无法直接升级到插件的下一个正式版本,而是需要为每个版本重复这些步骤
在我的 React 应用程序中,我想在比较之前从快照中删除 css 模块哈希。
我采取的步骤如下:
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
具有全文而不是过滤后的文本,正则表达式仅用于比较目的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.