Visual regression test

cypress/integration/home-page.spec.ts

@@ -1,12 +1,15 @@
-import {
-  smallBreakpoint,
-  mediumBreakpoint,
-  largeBreakpoint,
-} from "@/utils/constants";
+import { breakpointList } from "@/utils/constants";
 
-describe("The Home Page", () => {
-  it("successfully loads homepage", () => {
+describe("Home page", () => {
+  it("should successfully load", () => {
     cy.visit("/");
-    cy.matchImageSnapshot();
+  });
+
+  breakpointList.forEach((width) => {
+    it(`should match current snapshot ('${width}px' viewport width)`, () => {
+      cy.viewport(width, 1080);
+      cy.visit(`/`);
+      cy.matchImageSnapshot();
+    });
   });
 });

jest/jest.setup.ts

@@ -1,6 +1,11 @@
 import { expect } from "@jest/globals";
 import "@testing-library/jest-dom";
 import { configureToMatchImageSnapshot } from "jest-image-snapshot";
+import { setDefaultOptions } from "jsdom-screenshot";
+
+setDefaultOptions({
+  launch: {},
+});
 
 const toMatchImageSnapshot = configureToMatchImageSnapshot({
   customSnapshotsDir: "jest/snapshots/current_output",

src/components/welcome/welcome.test.tsx

@@ -3,14 +3,16 @@ import { render } from "@testing-library/react";
 import { generateImage } from "jsdom-screenshot";
 import Welcome from "@/components/welcome/welcome";
 
-test("should render text", () => {
-  const { rerender, getByText } = render(<Welcome />);
-  expect(getByText("Welcome to Next.js!")).toBeInTheDocument();
-  rerender(<Welcome showCarrot={true} />);
-  expect(getByText("Welcome to Next.js! 🥕")).toBeInTheDocument();
-});
+describe("Welcome component", () => {
+  it("should render text", () => {
+    const { rerender, getByText } = render(<Welcome />);
+    expect(getByText("Welcome to Next.js!")).toBeInTheDocument();
+    rerender(<Welcome showCarrot={true} />);
+    expect(getByText("Welcome to Next.js! 🥕")).toBeInTheDocument();
+  });
 
-test("should match image snapshot", async () => {
-  render(<Welcome />);
-  expect(await generateImage()).toMatchImageSnapshot();
+  it("should match current snapshot", async () => {
+    render(<Welcome />);
+    expect(await generateImage()).toMatchImageSnapshot();
+  });
 });

src/utils/constants.ts

@@ -1,3 +1,3 @@
-export const smallBreakpoint = 640;
-export const mediumBreakpoint = 768;
+export const smallBreakpoint = 480;
 export const largeBreakpoint = 1024;
+export const breakpointList = [smallBreakpoint, largeBreakpoint];

tsconfig.json

@@ -30,7 +30,5 @@
   ],
   "exclude": [
     "node_modules",
-    "**/*.test.ts",
-    "**/*.test.tsx"
   ]
 }