Skip to content
This repository was archived by the owner on Apr 28, 2023. It is now read-only.

Allow for 3rd party snapshot serializers #117

Open
TheJaredWilcurt opened this issue Oct 20, 2020 · 1 comment
Open

Allow for 3rd party snapshot serializers #117

TheJaredWilcurt opened this issue Oct 20, 2020 · 1 comment

Comments

@TheJaredWilcurt
Copy link

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.

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
Copy link

@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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants