Set up jest-puppeteer and jest-image-snapshot

.eslintrc.js

@@ -46,6 +46,8 @@ module.exports = {
   },
   globals: {
     alert: "readonly",
+    browser: true,
+    context: true,
     document: "readonly",
     fetch: "readonly",
     FormData: "readonly",
@@ -54,6 +56,7 @@ module.exports = {
     location: "readonly",
     navigator: "readonly",
     Notification: "readonly",
+    page: true,
     window: "readonly",
     __PATH_PREFIX__: true,
   },

gatsby-config.js

@@ -1,4 +1,4 @@
-if (process.env.LOCAL_BUILD || process.env.NODE_ENV === "development") {
+if (process.env.LOCAL_BUILD || process.env.NODE_ENV !== "production") {
   require("dotenv").config({ path: ".env.dev" })
 }
 
@@ -72,7 +72,7 @@ const plugins = [
       entities: ["events", "venues"],
     },
   },
-  "gatsby-plugin-netlify-cms"
+  "gatsby-plugin-netlify-cms",
 ]
 
 if (process.env.NODE_ENV === "production") {
@@ -106,7 +106,7 @@ const config = {
       "San Diego Tech Hub represents a movement aimed at changing the perception of the San Diego tech ecosystem. Our focus is to be a conduit for change connecting businesses, organizations, and individuals, leveraging their resources and talents to build a stronger San Diego tech community through collaboration.",
     author: "Claude Jones",
     twitterHandle: "@SanDiegoTechHub",
-    image: "https://www.SanDiegoTechHub.com/circle-logo.png"
+    image: "https://www.SanDiegoTechHub.com/circle-logo.png",
   },
   plugins,
 }

jest-puppeteer.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  server: {
+    command: "gatsby develop",
+    launchTimeout: 20000,
+    port: 8000,
+    debug: true,
+  },
+}

jest.visual.config.js

@@ -0,0 +1,39 @@
+module.exports = {
+  preset: "jest-puppeteer",
+  globals: {
+    __PATH_PREFIX__: "",
+  },
+  moduleFileExtensions: [
+    "js", "jsx", "json",
+  ],
+  moduleNameMapper: {
+    ".+\\.(css|styl|less|sass|scss)$": "identity-obj-proxy",
+    ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/file-mock.js",
+    "^Components/(.*)$": "<rootDir>/src/components/$1",
+    "^Common/(.*)$": "<rootDir>/src/components/common/$1",
+    "^Test/(.*)$": "<rootDir>/test-env/$1",
+    "^Utils/(.*)$": "<rootDir>/src/utils/$1",
+  },
+  setupFiles: [
+    "<rootDir>/test-env/loadershim.js",
+  ],
+  setupFilesAfterEnv: [
+    "<rootDir>/test-env/setup-test-env.js",
+  ],
+  testPathIgnorePatterns: [
+    "/node_modules/",
+    "<rootDir>/.cache/",
+    "<rootDir>/public/",
+  ],
+  testRegex: "(visualtest|visualspec)\\.[jt]sx?$",
+  testURL: "http://localhost",
+  transform: {
+    "^.+\\.jsx?$": "<rootDir>/test-env/jest-preprocess.js",
+  },
+  transformIgnorePatterns: ["node_modules/(?!(gatsby)/)"],
+  watchPathIgnorePatterns: [
+    "<rootDir>/node_modules/",
+    "<rootDir>/.cache/",
+    "<rootDir>/public/",
+  ],
+}

package.json

@@ -29,7 +29,8 @@
     "clearCache": "rm -rf ./.cache",
     "serve": "gatsby serve",
     "start": "gatsby develop",
-    "test": "jest --watchAll"
+    "test": "jest --watchAll",
+    "test:visual": "jest -c jest.visual.config.js --runInBand"
   },
   "husky": {
     "hooks": {
@@ -110,7 +111,10 @@
     "jest": "^24.3.1",
     "jest-dom": "^3.1.2",
     "jest-fetch-mock": "^2.1.1",
+    "jest-image-snapshot": "^2.8.1",
+    "jest-puppeteer": "^4.1.0",
     "lint-staged": "^8.1.4",
+    "puppeteer": "^1.14.0",
     "react-testing-library": "^6.0.0"
   },
   "license": "MIT"

src/__visualtests__/404.visualtest.js

@@ -0,0 +1,14 @@
+const { port } = require("../../jest-puppeteer.config").server
+
+const url = `http://localhost:${port}/404`
+
+describe("404 page", () => {
+  beforeAll(async () => {
+    await page.goto(`${url}`)
+  })
+
+  it("works", async () => {
+    const image = await page.screenshot()
+    await expect(image).toMatchImageSnapshot()
+  })
+})

src/__visualtests__/index.visualtest.js

@@ -0,0 +1,14 @@
+const { port } = require("../../jest-puppeteer.config").server
+
+const url = `http://localhost:${port}`
+
+describe("Home page", () => {
+  beforeAll(async () => {
+    await page.goto(`${url}`)
+  })
+
+  it("works", async () => {
+    const image = await page.screenshot()
+    await expect(image).toMatchImageSnapshot()
+  })
+})

test-env/setup-test-env.js

@@ -6,3 +6,10 @@ import "react-testing-library/cleanup-after-each"
 import MockFetch from "jest-fetch-mock"
 
 global.fetch = MockFetch
+
+// Setup for visual testing
+require("expect-puppeteer")
+const { toMatchImageSnapshot } = require("jest-image-snapshot")
+
+expect.extend({ toMatchImageSnapshot })
+jest.setTimeout(25000)