Skip to content

Latest commit

 

History

History
120 lines (98 loc) · 4.13 KB

README.md

File metadata and controls

120 lines (98 loc) · 4.13 KB

cypress-plugin-snapshots

Plugin for snapshot tests in Cypress.io.

NPM

Build status

cypress-plugin-snapshots

Installation

npm i cypress-plugin-snapshots -S

Usage

describe('data test', () => {
  it('test data', () => {
    return cy.request('data.json')
      .its('body')
      .toMatchSnapshot();
  });

  it('test data with options', () => {
    return cy.request('data.json')
      .its('body')
      .toMatchSnapshot({
        ignoreExtraFields: true,
      });
  });
});

You can pass the following options to toMatchSnapshot to override default behavior.

{
  "ignoreExtraFields": false,         // Ignore fields that are not in snapshot
  "ignoreExtraArrayItems": false,     // Ignore if there are extra array items in result
  "normalizeJson": true,              // Alphabetically sort keys in JSON
  "replace": {                        // Replace `${key}` in snapshot with `value`.
    "key": "value",
  }
}

replace Use replace with caution. Tests should be deterministic. It's often a better solution to influence your test result instead of your snapshot (by mocking data for example).

Config Cypress.io

Add this to your cypress.json configuration file:

"ignoreTestFiles": [
  "**/*.snap",
  "**/__snapshot__/*"
]

Plugin

Find your cypress/plugins/index.js file and change it to look like this:

const { initPlugin } = require('cypress-plugin-snapshots/plugin');

module.exports = (on, config) => {
  initPlugin(on, config);
  return config;
};

Command

Find your cypress/support/index.js file and add the following line:

import 'cypress-plugin-snapshots/commands';

Make changes to default configuration

You can customize the configuration in the cypress.json file in the root of your Cypress project.

Add the configuration below to your cypress.json file to make changes to the default values.

"env": {
  "cypress-plugin-snapshots": {
    "autoCleanUp": false,            // Automatically remove snapshots that are not used by test
    "autopassNewSnapshots": true,    // Automatically save & pass new/non-existing snapshots
    "diffLines": 3,                  // How many lines to include in the diff modal
    "excludeFields": [],             // Array of fieldnames that should be excluded from snapshot
    "ignoreExtraArrayItems": false,  // Ignore if there are extra array items in result
    "ignoreExtraFields": false,      // Ignore extra fields that are not in `snapshot`
    "normalizeJson": true,           // Alphabetically sort keys in JSON
    "serverEnabled": true,           // Enable "update snapshot" server and button in diff modal
    "serverHost": "localhost",       // Hostname for "update snapshot server"
    "serverPort": 2121,              // Port number for  "update snapshot server"
    "updateSnapshots": false,        // Automatically update snapshots, useful if you have lots of changes
  }
}

Roadmap

Below is a list of functionality that is under consideration for implementing in a next version.

  • Make toMatchSnapshot work for DOM elements
  • Show snapshot when clicking on "snapshot matches" in Cypress
  • Fix handling of update snapshot via UI that contains a replacable field
  • Disable "update snapshots" server in headless mode
  • Add more unit tests
  • Add JSDoc documentation
  • Consider code coverage tests with Coveralls and Istanbul
  • Consider implementing visual snapshots with jest-image-snapshot

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style.

License

This plugin is released under the MIT license.