cypress-plugin-snapshots
Version:
Cypress snapshot functionality for data
103 lines (86 loc) • 3.59 kB
Markdown
Plugin for snapshot tests in [Cypress.io](https://www.cypress.io/).
`npm i cypress-plugin-snapshots -S`
```javascript
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({
minimalMatch: true,
});
});
});
```
You can pass the following options to `toMatchSnapshot` to override default behavior.
```javascript
{
"minimalMatch": false, // Should at least contain fields defined in snapshot, additional content is ignored.
}
```
Add this to your `cypress.json` configuration file:
```json
"ignoreTestFiles": [
"**/*.snap",
"**/__snapshot__/*"
]
```
Find your `cypress/plugins/index.js` file and change it to look like this:
```javascript
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:
```javascript
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.
```javascript
"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
"minimalMatch": false, // Enable minimal match (see description above) for all tests
"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
}
}
```
Below is a list of functionality that is under consideration for implementing in a next version.
- Add basic Cypress test for demonstration
- Add screenshots to README
- Make `toMatchSnapshot` work for DOM elements
- Disable "update snapshots" server in headless mode
- Contact Cypress team to be included in [official plugin list on Cypress.io](https://docs.cypress.io/plugins/index.html)
- Add unit tests
- Consider moving configuration to `initPlugin`.
- Extract CSS and javascript to separate files
- Add [JSDoc](http://usejsdoc.org/) documentation
- Add [Travis](https://travis-ci.org/) integration based on [Cypress Travis example](https://github.com/cypress-io/cypress-example-kitchensink/blob/master/.travis.yml)
- Investigate code coverage tests with [Coveralls](https://coveralls.io/) and [Istanbul](http://gotwarlost.github.io/istanbul/)
- Consider implementing visual snapshots with [jest-image-snapshot](https://github.com/americanexpress/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.