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

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 the 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 })
}

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 - e.g 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.