Cypress: Is cypress-plugin-snapshots supported in Cypress 10? - cypress

Question

I am getting this error when I am trying to run any of my specs file. It was working before. Am I missing a step here? How do I mark the path as external?
I removed parts of images that contain sensitive information.
e2e.js
require('cypress-plugin-tab')
import './commands'
const dayjs = require('dayjs')
Cypress.dayjs = dayjs
import 'cypress-plugin-snapshots/commands';
(Edited)
I tried to reinstall the package again but I am now currently getting this error. When I tried to npm install --force crypto I am back with this error plus I have to do npm install path also. It's like an endless loop.
Edited againThis is the view from the terminal. How do I use "platform: 'node'" ??
(Edited again)

Answer 1

I took the default Cypress project, installed and ran cypress-plugin-snapshots but sadly it worked ok.
Here are the files
cypress.config.js
const { defineConfig } = require("cypress");
const { initPlugin } = require('cypress-plugin-snapshots/plugin');
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
initPlugin(on, config); // this is cypress/plugins/index.js in Cypress v9
return config;
},
excludeSpecPattern: [ // this is "ignoreTestFiles" in Cypress v9
"**/__snapshots__/*",
"**/__image_snapshots__/*"
],
"env": { // just pasted everything from the docs here
"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
"imageConfig": {
"createDiffImage": true, // Should a "diff image" be created, can be disabled for performance
"resizeDevicePixelRatio": true,// Resize image to base resolution when Cypress is running on high DPI screen, `cypress run` always runs on base resolution
"threshold": 0.01, // Amount in pixels or percentage before snapshot image is invalid
"thresholdType": "percent" // Can be either "pixels" or "percent"
},
"screenshotConfig": { // See https://docs.cypress.io/api/commands/screenshot.html#Arguments
"blackout": [],
"capture": "fullPage",
"clip": null,
"disableTimersAndAnimations": true,
"log": false,
"scale": false,
"timeout": 30000
},
"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
"backgroundBlend": "difference" // background-blend-mode for diff image, useful to switch to "overlay"
}
}
},
});
cypress/support/e2e/js
import './commands'
import 'cypress-plugin-snapshots/commands';
Test
describe('empty spec', () => {
it('passes', () => {
cy.visit('https://example.cypress.io')
.then(() => {
cy.get('div').toMatchSnapshot(); // 1st run - logs "update snapshot"
// 2nd run - logs "snapshots match"
});
})
})