TypeError: cy.matchImageSnapshot is not a function

[pedrotainha]

Any idea why this is happening?

I have followed this tutorial: https://medium.com/norwich-node-user-group/visual-regression-testing-with-cypress-io-and-cypress-image-snapshot-99c520ccc595

I'm using a dockerfile image where I have cypress installed globally

FROM cypress/browsers:node10.11.0-chrome75
RUN npm i -g [email protected] [email protected]
ENTRYPOINT [ "sh", "-c", "tail -f /dev/null" ]

Then locally I have these packages in package.json

{
  "name": "cypress",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cypress-image-snapshot": "^3.1.1",
    "extract-files": "^7.0.0",
    "graphql": "^14.6.0"
  }
}

And my test that is failing

describe("Page list: ", () => {
    it("List 0 projects", () => {
      login(() => {
        cy.get("#nav1").click();

        //this item is to create the project
        cy.get(".card.group").should("have.length", 1);

        cy.matchImageSnapshot();
      });
    });
...

[0xIslamTaha]

did u add this to support/command.js?

import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
addMatchImageSnapshotCommand();

[pedrotainha]

support/command.js

yes, I tried as simple like that in support/commands.js and with options like in the article I have posted

import { addMatchImageSnapshotCommand } from "cypress-image-snapshot/command";

addMatchImageSnapshotCommand({
  failureThreshold: 0.03, // threshold for entire image
  failureThresholdType: "percent", // percent of image or number of pixels
  customDiffConfig: { threshold: 0.1 }, // threshold for each pixel
  capture: "viewport" // capture viewport in screenshot
});

[0xIslamTaha]

did u install the package?

npm install --save-dev cypress-image-snapshot

[pedrotainha]

yes (i showed package.json on top), but not in dev dependencies, I installed in dependencies => npm install cypress-image-snapshot and I guess it doesn't make any difference

[francoismassart]

Same issue here, even without using docker

[francoismassart]

@pedrotainha I think the article from Medium omits the fact that you need to import your support/commands file inside your spec file...

I can get rid of the error by making sure your cypress/support/index.js contains: import './commands'

On my side, using Cypress 4, it does not work but I did get rid of the error.

[taylor-schneider]

@pedrotainha I think the article from Medium omits the fact that you need to import your support/commands file inside your spec file...

I can get rid of the error by making sure your cypress/support/index.js contains: import './commands'

On my side, using Cypress 4, it does not work but I did get rid of the error.

In my case, I am testing a component. The support/component.js does contain the import but the error persists. And yes, the support.commands.js has the fix reccomendes by @pedrotainha in my support/commands.js.

[EmilPi]

Same here. Adding import './commands'; to cypress/support/index.js does not help. package.json:

{
  "name": "app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 4207",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "e2e": "ng e2e",
    "cypress:open": "cypress open",
    "cy:open": "cypress open",
    "cypress:run": "cypress run"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.2.0",
    "@angular/cdk": "^14.2.7",
    "@angular/common": "^14.2.0",
    "@angular/compiler": "^14.2.0",
    "@angular/core": "^14.2.0",
    "@angular/forms": "^14.2.0",
    "@angular/material": "^14.2.7",
    "@angular/platform-browser": "^14.2.0",
    "@angular/platform-browser-dynamic": "^14.2.0",
    "@angular/router": "^14.2.0",
    "flag-icons": "^6.7.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.11",
    "@angular/cli": "~14.2.11",
    "@angular/compiler-cli": "^14.2.0",
    "@cypress/schematic": "^2.5.0",
    "@types/jasmine": "~4.0.0",
    "autoprefixer": "^10.4.14",
    "cypress": "^12.17.1",
    "cypress-image-snapshot": "^4.0.1",
    "jasmine-core": "~4.3.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "postcss": "^8.4.23",
    "tailwindcss": "^3.3.2",
    "typescript": "~4.7.2"
  }
}

My test spec is

  it('Visits the initial project page', () => {
    cy.visit('/')
    cy.contains('Welcome!')
    cy.matchImageSnapshot() // fails here
  })

[simonsmith]

You could try this maintained fork - https://github.com/simonsmith/cypress-image-snapshot

[kuldea-paulo]

Same error here @simonsmith same with the maintained fork you mentioned

[simonsmith]

Your best bet is to ensure you have included the command and types correctly in your project.

[kuldea-paulo]

found my issue. In case someone makes the same mistake, the issue was that I had supportFile: false in my cypress.config.ts file. With it, my support/e2e.ts wasn't being used

@simonsmith Thanks for the feedback.