Allow for 3rd party snapshot serializers

[TheJaredWilcurt]

Jest allows you to specify the location of a "snapshot serializer" file. This gives users the power to format the snapshots however they like.

  // jest.config.js
  snapshotSerializers: [
    '<rootDir>/node_modules/jest-serializer-vue-tjw'
  ],

For example, if I wanted to create a serializer that would reverse an html string (simple, contrived example), it would look like this:

module.exports = {
  test: function (received) {
    // if true, it runs the print function
    return typeof(received) === 'string' && received.startsWith('<');
  },
  print: function (received) {
    return received.split('').reverse().join('');
  }
}

The flow for this is:

1. A test has some type of expectation, like so: expect(INPUT).toMatchSnapshot();
2. The INPUT is passed to the serializer, as is, (number, object, string, whatever)
3. Run the serializer test function with the INPUT to see if it is a type of data it wants to serialize
4. If the serializer test returns truthy, then run the serializer print function passing in the INPUT
5. When the serializer finishes it returns a modified version of the INPUT
6. If another serializer was defined in the array in the config, repeat the process
7. @cypress/snapshot then either stores the modified value, or compares against the existing stored value.

With this, plugins can can made for specific frameworks (Vue, Angular, React, etc) to improve their snapshots.

PLEASE keep the api the same as what Jest uses, so I don't need to maintain two libraries to do the same thing.

• https://github.com/tjw-lint/jest-serializer-vue-tjw

In fact, if you make this work, I'll rename my repo to snapshot-serializer-vue since it will work in both Jest and Cypress.

[JessicaSachs]

@TheJaredWilcurt and I spoke on the Cypress Discord. Essentially, this is because he can't strip v-data* out, which is generated. The third party solution https://github.com/meinaart/cypress-plugin-snapshots is able to solve his issues.

As he's a library maintainer for a snapshot lib, @TheJaredWilcurt may be interested in contributing to Cypress's core snapshotting solution when time allows