Visual regression test

Author: osheinonen

.circleci/config.yml

@@ -46,14 +46,14 @@ jobs:
           command: cd build_path && npm run test:jest
       - store_artifacts:
           path: ~/project/build_path/jest/snapshots/diff_output
-          # destination: jest/diff_output
+          destination: jest/snapshots/diff_output
       - run:
           name: Update image snapshots when tests fails
           command: cd build_path && npm run test:jest:update
           when: on_fail
       - store_artifacts:
           path: ~/project/build_path/jest/snapshots/current_output
-          # destination: jest/image_snapshots
+          destination: jest/snapshots/current_output
   cypress:
     docker:
       - image: circleci/node:12.16.1-browsers
@@ -78,17 +78,17 @@ jobs:
           command: cd build_path && npm run test:cypress:run
       - store_artifacts:
           path: ~/project/build_path/cypress/screenshots
-          # destination: cypress/screenshots
+          destination: cypress/screenshots
       - store_artifacts:
           path: ~/project/build_path/cypress/snapshots/diff_output
-          # destination: cypress/diff_output
+          destination: cypress/snapshots/diff_output
       - run:
           name: Update image snapshots when tests fails
           command: cd build_path && npm run test:cypress:run:update
           when: on_fail
       - store_artifacts:
           path: ~/project/build_path/cypress/snapshots/current_output
-          # destination: cypress/image_snapshots
+          destination: cypress/snapshots/current_output
 
 workflows:
   version: 2

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();
+    });
   });
 });

cypress/snapshots/current_output/home-page.spec.ts/Home page -- should match current snapshot ('1024px' viewport width).snap.png

@@ -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",

cypress/snapshots/current_output/home-page.spec.ts/Home page -- should match current snapshot ('480px' viewport width).snap.png

@@ -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();
+  });
 });

cypress/snapshots/current_output/home-page.spec.ts/The Home Page -- successfully loads homepage.snap.png

@@ -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];

jest/jest.setup.ts

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