From 031fc890e94fa307e13697162b69b98bca373c3f Mon Sep 17 00:00:00 2001 From: Joseph Huynh Date: Sat, 6 Apr 2019 22:00:34 -0700 Subject: [PATCH] Set up jest-puppeteer and jest-image-snapshot --- .eslintrc.js | 3 ++ gatsby-config.js | 6 ++-- jest-puppeteer.config.js | 8 +++++ jest.visual.config.js | 39 +++++++++++++++++++++++++ package.json | 6 +++- src/__visualtests__/404.visualtest.js | 14 +++++++++ src/__visualtests__/index.visualtest.js | 14 +++++++++ test-env/setup-test-env.js | 7 +++++ 8 files changed, 93 insertions(+), 4 deletions(-) create mode 100644 jest-puppeteer.config.js create mode 100644 jest.visual.config.js create mode 100644 src/__visualtests__/404.visualtest.js create mode 100644 src/__visualtests__/index.visualtest.js diff --git a/.eslintrc.js b/.eslintrc.js index 08c036e..fc39501 100644 --- a/.eslintrc.js +++ b/.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, }, diff --git a/gatsby-config.js b/gatsby-config.js index 1eac613..43b6eba 100644 --- a/gatsby-config.js +++ b/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, } diff --git a/jest-puppeteer.config.js b/jest-puppeteer.config.js new file mode 100644 index 0000000..526f3cd --- /dev/null +++ b/jest-puppeteer.config.js @@ -0,0 +1,8 @@ +module.exports = { + server: { + command: "gatsby develop", + launchTimeout: 25000, + port: 8000, + debug: true, + }, +} diff --git a/jest.visual.config.js b/jest.visual.config.js new file mode 100644 index 0000000..49a1911 --- /dev/null +++ b/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)$": "/__mocks__/file-mock.js", + "^Components/(.*)$": "/src/components/$1", + "^Common/(.*)$": "/src/components/common/$1", + "^Test/(.*)$": "/test-env/$1", + "^Utils/(.*)$": "/src/utils/$1", + }, + setupFiles: [ + "/test-env/loadershim.js", + ], + setupFilesAfterEnv: [ + "/test-env/setup-test-env.js", + ], + testPathIgnorePatterns: [ + "/node_modules/", + "/.cache/", + "/public/", + ], + testRegex: "(visualtest|visualspec)\\.[jt]sx?$", + testURL: "http://localhost", + transform: { + "^.+\\.jsx?$": "/test-env/jest-preprocess.js", + }, + transformIgnorePatterns: ["node_modules/(?!(gatsby)/)"], + watchPathIgnorePatterns: [ + "/node_modules/", + "/.cache/", + "/public/", + ], +} diff --git a/package.json b/package.json index 974cf13..725ab21 100644 --- a/package.json +++ b/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" diff --git a/src/__visualtests__/404.visualtest.js b/src/__visualtests__/404.visualtest.js new file mode 100644 index 0000000..1896c17 --- /dev/null +++ b/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() + expect(image).toMatchImageSnapshot() + }) +}) diff --git a/src/__visualtests__/index.visualtest.js b/src/__visualtests__/index.visualtest.js new file mode 100644 index 0000000..c992132 --- /dev/null +++ b/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() + expect(image).toMatchImageSnapshot() + }) +}) diff --git a/test-env/setup-test-env.js b/test-env/setup-test-env.js index dfb50fc..16ba175 100644 --- a/test-env/setup-test-env.js +++ b/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)