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

问题描述 投票:1回答:1

我有一个Vue单个文件组件,我正在尝试使用赛普拉斯端到端测试和@ cypress / snapshot进行快照测试。

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

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

重建后

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

是否可以选择安全地忽略快照比较的某些部分,例如“ data-v- *”,因此测试仍然可以通过?快照测试不是到这里去的方法吗,和/或有没有更好的选择?

vue.js e2e-testing cypress
1个回答
0
投票

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

[似乎没有用于自定义比较功能的选项,请查看source当前仅限于snap-shot-compare

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

  • 更改了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具有全文本,而不是过滤后的文本,正则表达式仅用于比较目的。

© www.soinside.com 2019 - 2024. All rights reserved.