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

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"
      });
  })
})