Typescript

Cypress plugin

Import and initialise the Cypress image diff plugin:

// cypress.config.ts
import { defineConfig } from 'cypress';
import getCompareSnapshotsPlugin from 'cypress-image-diff-js/plugin';

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      return getCompareSnapshotsPlugin(on, config);
    },
  },
});

Cypress support

Import compareSnapshotCommand command:

// cypress/support/{scheme}.ts, where {scheme} defaults to e2e
import compareSnapshotCommand from 'cypress-image-diff-js/command';
// for Cypress v12.17.3 and older
import compareSnapshotCommand from 'cypress-image-diff-js';
compareSnapshotCommand();

Troubleshooting

1. >(0, command_1.default) is not a function

Extend your tsconfig.json compilerOptions with:

"esModuleInterop": true,

in this case your tsconfig.json should look like this:

{
    "compilerOptions": {
      "target": "es5",
      "lib": ["es5", "dom"],
      "types": ["cypress", "node"],
      "esModuleInterop": true,
    },
    "include": ["**/*.ts"]
  }

Note: You have to restart the Cypress application to reload the changes