Snapshot comparison never fails

I have been following the README step by step. Here is the state of my dummy project: Repo

I wrote this test: File

cy.visit("localhost:3000")
      .document()
      .toMatchImageSnapshot();

Running that test causes a screenshot to be saved. However, when I change what is rendered on the page, the tests still pass!

Expected result:

---

Actual result:

---

I do not understand why the tests pass, if what is rendered in cypress’ browser looks different than the screenshot that is saved.

I do not understand how toMatchImageSnapshot works. What is the base image that it uses? What is the current image?

Could someone please advise me how to get this test failing as expected?

[wolfi3b]

[NOTE: My first message (I deleted to remove confusion) was incorrect due to forgotten testing code]

So guys (FYI @meinaart) …It bothered me so I digged deep down to the code and found the issue 😃

The problem is simple… we are using it wrong.

In documentation is writen simply

You can pass the following options to toMatchImageSnapshot to override default behavior.

followed up by example

{
  "createDiffImage": true,       // Should a "diff image" be created, can be disabled for performance
  "threshold": 0.01,             // Amount in pixels or percentage before snapshot image is invalid
  "name": "custom image name",   // Naming resulting image file with a custom name rather than concatenating test titles
  "thresholdType": "percent",    // Can be either "pixel" or "percent"
}

so it evokes we should put it directly to “toMatchImageSnapshot” function. But that is not correct.

in config.js is code which expects

return Object.keys(DEFAULT_IMAGE_CONFIG)
    .filter((key) => options.imageConfig && options.imageConfig[key] !== undefined)
    .reduce(

so actually correct call to the method is:

cy.get('.class').toMatchImageSnapshot({imageConfig: {"threshold": 0})

and voala…it finally fails at not matching screenshots!

[StormPooper]

Nice find @wolfi3b, it also seems to fix it if there’s a value in your cypress.json file, like so:

{
  "env": {
    "cypress-plugin-snapshots": {
      "imageConfig": {
        "threshold": 0.01
      }
    }
  },
  "ignoreTestFiles": [
    "**/__snapshots__/*",
    "**/__image_snapshots__/*"
  ]
}

Side note, my instance would blow up unless I included cypress-plugin-snapshots in my config. I’m guessing the code for checking defaults isn’t quite right based on both of these issues.