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

Question

I have a Vue Single File Component that I'm trying to snapshot test with Cypress end-to-end testing and @cypress/snapshot.

An issue could arise if a component's html gets dynamically generated data or attributes. For example, a single file component with scoped CSS styles adds 'data-v-[some hash]' attribute to elements, and if the hash changes the test would fail too.

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

After rebuild

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

Is there any option to safely ignore parts of snapshot comparison, such as "data-v-*", so tests would still pass? Is snapshot testing not the way to go here, and/or are there better options?

Answer 1

It seems like it is early days for this plugin, "version": "0.0.0-development" .

There does not seems to be an option for customising the compare function, looking at thesource 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 })
}

But it is possible to add a wrapper around the compare function.

You will need to make a local copy of the plugin and modify it to reference a custom compare function.

This means you will not be able to directly upgrade to the next official version of the plugin, but need to repeat these steps for each release

In my React app, I wanted to remove css module hashes from the snapshot before comparing.
The steps I took are as follows:

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

• copy the installed folder node_modules\\@cypress\\snapshot to cypress\\support\\snapshot

• changed the compare import in cypress\\support\\snapshot\\src\\index.js to point to a custom comparer, as follows:

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

• added my-compare.js to the folder cypress\\support\\snapshot\\src\\ with the following code:

   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

The trickiest bit is getting the regex right. You can probably use the following, check it on regex101 .

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

You can test is crudely by editing the first saved snapshot.js before running the second time - eg change data-v- to datav- , and watch the test fail since the regex doesn't pick up the mod.

Note that snapshot.js has the full text not the filtered text, the regex is only applied for comparison purposes.