refactor: use better(?) plugin for snapshots

cypress/integration/parallax.spec.js

@@ -2,14 +2,19 @@ const ANIMATION_WAIT = 4000
 
 describe('Parallax - vertical', () => {
   const HEIGHT = Cypress.config('viewportHeight')
+  const WIDTH = Cypress.config('viewportWidth')
 
   beforeEach(() => {
     cy.visit('/vertical')
   })
 
   it('should translate layers as expected', () => {
     // intial snapshot
-    cy.findByTestId('container').toMatchSnapshot()
+    console.log(HEIGHT, WIDTH)
+
+    cy.findByTestId('container').matchImageSnapshot('vertical #1', {
+      clip: { x: 0, y: 0, width: WIDTH, height: HEIGHT },
+    })
 
     // initial layer positions
     cy.findByTestId('default-layer')
@@ -37,7 +42,9 @@ describe('Parallax - vertical', () => {
     cy.wait(ANIMATION_WAIT)
 
     // halfway snapshot
-    cy.findByTestId('container').toMatchSnapshot()
+    cy.findByTestId('container').matchImageSnapshot('vertical #2', {
+      clip: { x: 0, y: 0, width: WIDTH, height: HEIGHT },
+    })
 
     // halfway layer positions
     cy.findByTestId('default-layer')
@@ -65,7 +72,9 @@ describe('Parallax - vertical', () => {
     cy.wait(ANIMATION_WAIT)
 
     // final snapshot
-    cy.findByTestId('container').toMatchSnapshot()
+    cy.findByTestId('container').matchImageSnapshot('vertical #3', {
+      clip: { x: 0, y: 0, width: WIDTH, height: HEIGHT },
+    })
 
     // final layer positions
     cy.findAllByTestId(/-layer/).each(layer =>
@@ -83,6 +92,7 @@ describe('Parallax - vertical', () => {
 })
 
 describe('Parallax - horizontal', () => {
+  const HEIGHT = Cypress.config('viewportHeight')
   const WIDTH = Cypress.config('viewportWidth')
 
   beforeEach(() => {
@@ -91,7 +101,9 @@ describe('Parallax - horizontal', () => {
 
   it('should translate layers as expected', () => {
     // intial snapshot
-    cy.findByTestId('container').toMatchSnapshot()
+    cy.findByTestId('container').matchImageSnapshot('horizontal #1', {
+      clip: { x: 0, y: 0, width: WIDTH, height: HEIGHT },
+    })
 
     // initial layer positions
     cy.findByTestId('default-layer')
@@ -119,7 +131,9 @@ describe('Parallax - horizontal', () => {
     cy.wait(ANIMATION_WAIT)
 
     // halfway snapshot
-    cy.findByTestId('container').toMatchSnapshot()
+    cy.findByTestId('container').matchImageSnapshot('horizontal #2', {
+      clip: { x: 0, y: 0, width: WIDTH, height: HEIGHT },
+    })
 
     // halfway layer positions
     cy.findByTestId('default-layer')
@@ -148,7 +162,9 @@ describe('Parallax - horizontal', () => {
     cy.wait(ANIMATION_WAIT)
 
     // final snapshot
-    cy.findByTestId('container').toMatchSnapshot()
+    cy.findByTestId('container').matchImageSnapshot('horizontal #3', {
+      clip: { x: 0, y: 0, width: WIDTH, height: HEIGHT },
+    })
 
     // final layer positions
     cy.findAllByTestId(/-layer/).each(layer =>

cypress/plugins/index.js

@@ -1,6 +1,6 @@
-const { initPlugin } = require('cypress-plugin-snapshots/plugin')
+const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin')
 
 module.exports = (on, config) => {
-  initPlugin(on, config)
+  addMatchImageSnapshotPlugin(on, config)
   return config
 }

cypress/support/commands.js

@@ -1 +1,4 @@
 import '@testing-library/cypress/add-commands'
+import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command'
+
+addMatchImageSnapshotCommand()

cypress/support/index.js

@@ -15,7 +15,6 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
-import 'cypress-plugin-snapshots/commands'
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

package.json

@@ -49,7 +49,7 @@
     "test:unit": "jest",
     "test:cov": "jest --coverage",
     "test:ts": "tsc --noEmit",
-    "test:e2e": "start-server-and-test 'yarn vite serve packages/parallax/test' http-get://localhost:3000 'yarn cypress run'",
+    "test:e2e": "start-server-and-test 'yarn vite serve packages/parallax/test --host' http-get://localhost:3000 'yarn cypress run'",
     "test": "yarn test:ts && yarn test:unit && yarn test:e2e",
     "release": "yarn test:ts && yarn test:unit && yarn build && yarn changeset publish && yarn",
     "vers": "yarn changeset version"
@@ -88,8 +88,8 @@
     "@types/styled-components": "^5.1.22",
     "@types/three": "^0.137.0",
     "@vitejs/plugin-react-refresh": "^1.3.6",
-    "cypress": "^9.4.1",
-    "cypress-plugin-snapshots": "^1.4.4",
+    "cypress": "^9.6.0",
+    "cypress-image-snapshot": "^4.0.1",
     "flush-microtasks": "^1.0.1",
     "husky": "^7.0.4",
     "jest": "^27.5.1",