Plugin for snapshot tests in Cypress.io.
npm i cypress-plugin-snapshots -S
describe('data test', () => {
it('toMatchSnapshot - JSON', () => {
return cy.request('data.json')
.its('body')
.toMatchSnapshot();
});
it('toMatchSnapshot - JSON with options', () => {
return cy.request('data.json')
.its('body')
.toMatchSnapshot({
ignoreExtraFields: true,
});
});
it('toMatchSnapshot - HTML', () => {
cy.visit('page.html')
.then(() => {
cy.get('div').toMatchSnapshot();
});
});
});
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).
Add this to your cypress.json
configuration file:
"ignoreTestFiles": [
"**/*.snap",
"**/__snapshot__/*"
]
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;
};
Find your cypress/support/index.js
file and add the following line:
import 'cypress-plugin-snapshots/commands';
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
"prettier": true, // Enable `prettier` for formatting HTML before comparison
"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
}
}
Below is a list of functionality that is under consideration for implementing in a next version.
- 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
In lieu of a formal styleguide, take care to maintain the existing coding style.
This plugin is released under the MIT license.