Moving to Vite from Create-React-App and configuring ESLint and Jest (#317)

* Moving to Vite from Create-React-App and configuring ESLint and Jest

* Update dependencies that have minor or patch version available within the currently used major

* Finally can test with Jest

* Update Typescript and configure chunks for build

* Everything can be typescript

* Use ESLint to autofix and ignore png in Jest at the correct config location

* Use Cypress plugin for ESLint to help validating its use and reduce false positive issues

* ESLint should not lint everything, just the files under version control

* Use type imports to clarify usage

* ServiceWorker was not used

* Test in units, not the whole app

* Mention about the different test/spec files

* Run tests at GitHub Actions

* Node.js v16 marked

* Save library chunking for later, and use smaller and specific docker images

* Simplify Docker instructions plenty since the kids are asleep

* Reduce linter errors

* Cypress upgrade against the upgraded agent-cypress

* Prettier run separately

Author: paazmaya

.eslintrc.cjs

@@ -0,0 +1,31 @@
+module.exports = {
+  extends: [
+    // By extending from a plugin config, we can get recommended rules without having to add them manually.
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:import/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:cypress/recommended",
+    // This disables the formatting rules in ESLint that Prettier is going to be responsible for handling.
+    // Make sure it's always the last config, so it gets the chance to override other configs.
+    "eslint-config-prettier",
+  ],
+  settings: {
+    react: {
+      // Tells eslint-plugin-react to automatically detect the version of React to use.
+      version: "detect",
+    },
+    // Tells eslint how to resolve imports
+    "import/resolver": {
+      node: {
+        paths: ["src"],
+        extensions: [".js", ".jsx", ".ts", ".tsx"],
+      },
+    },
+  },
+  rules: {
+    // Add your own rules here to override ones from the extended configs.
+    "@typescript-eslint/no-non-null-assertion": "warn"
+  },
+};

.github/workflows/workflow.yml

@@ -13,6 +13,17 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Unit tests
+        run: npm test -- --coverage
+
       - id: get-branch-name
         run: echo "::set-output name=branch_name::$(git symbolic-ref --short HEAD)"
         shell: bash

Dockerfile

@@ -1,46 +1,35 @@
 ### STAGE 1: Build ###
-FROM node:12 AS builder
+# This image is around 50 megabytes
+FROM node:18-alpine3.18 AS builder
+
+# Environment variable generation script needs bash
+RUN apk add --no-cache bash
 
 # Create app directory
 WORKDIR /app
 
-# A wildcard is used to ensure both package.json AND package-lock.json are copied
-COPY package*.json ./
+# Copy all files from the repo to /app
+COPY . .
 
 # Install app dependencies
-RUN npm install
-
-COPY . .
+RUN npm ci --verbose
 
+# Build the ui
 RUN npm run build
 
-### STAGE 2: Run ###
-FROM nginx:alpine
+# Create environment variable js file
+RUN chmod +x env.sh && ./env.sh
 
-RUN apk add --no-cache bash
+### STAGE 2: Run ###
+# This image is around 5 megabytes
+FROM nginx:1.25-alpine3.17-slim
 
 COPY /nginx /etc/nginx/conf.d
-RUN chown -R nginx /etc/nginx /var/run /run
 
 EXPOSE 8080
 EXPOSE 443
 
 COPY --from=builder /app/build /usr/share/nginx/html
+COPY --from=builder /app/env-config.js /usr/share/nginx/html/
 
-# Copy .env file and shell script to container
-WORKDIR /usr/share/nginx/html
-COPY .env .
-COPY ./env.sh .
-RUN chmod +x env.sh
-
-RUN adduser -D app
-RUN chown -R app:app . && \
-    chown -R app:app /var/cache/nginx && \
-    chown -R app:app /var/log/nginx && \
-    chown -R app:app /etc/nginx/conf.d
-RUN touch /var/run/nginx.pid && \
-    chown -R app:app /var/run/nginx.pid
-USER app
-
-# Start Nginx server
-CMD ["/bin/bash", "-c", "/usr/share/nginx/html/env.sh && nginx -g \"daemon off;\""]
+# Nginx server will now start automatically.

README.md

@@ -9,6 +9,8 @@
 - Update `.env`
 - `npm run start`
 
+The testing related `.spec.tsx` files are used with Cypress for browser tests, and the `.test.tsx` files with Jest for unit tests.
+
 ## Image download
 
  - If you want to use image download feature in test runs, you have to have the files in backend imageUploads folder to a folder in this project under public/static/imageUploads. This can be achieved via manual copy, docker volume mapping to this project folder etc.

cypress.config.ts

@@ -0,0 +1,40 @@
+import {defineConfig} from "cypress";
+import viteConfig from "./vite.config";
+import {addVisualRegressionTrackerPlugin} from '@visual-regression-tracker/agent-cypress/dist/plugin';
+
+export function setupNodeEvents(on : Cypress.PluginEvents, config : Cypress.PluginConfigOptions) { // react component tests
+
+    addVisualRegressionTrackerPlugin(on, config);
+
+    on("before:browser:launch", (browser, launchOptions) => {
+        if (browser.name === "chrome" && browser.isHeadless) {
+            launchOptions.args.push(`--window-size=${
+                config.viewportWidth
+            },${
+                config.viewportHeight
+            }`);
+            return launchOptions;
+        }
+    });
+
+    return config;
+}
+
+export default defineConfig({
+    fixturesFolder: false,
+    screenshotOnRunFailure: false,
+    retries: 0,
+    viewportWidth: 1280,
+    viewportHeight: 800,
+    video: false,
+
+    component: {
+        setupNodeEvents,
+        specPattern: "**/*.spec.*",
+        devServer: {
+            framework: "react",
+            bundler: "vite",
+            viteConfig
+        }
+    }
+});

cypress.json

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

cypress/plugins/index.js

@@ -0,0 +1,33 @@
+// https://docs.cypress.io/guides/component-testing/react/api
+import {mount} from 'cypress/react';
+import {addVrtTrackCommand, addVrtStartCommand, addVrtStopCommand} from "@visual-regression-tracker/agent-cypress/dist/commands";
+
+addVrtStartCommand();
+addVrtStopCommand();
+addVrtTrackCommand();
+
+before(() => {
+    cy.vrtStart();
+});
+
+after(() => {
+    cy.vrtStop();
+});
+
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            mount: typeof mount
+        }
+    }
+}
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(<MyComponent />)

cypress/support/commands.js

@@ -1,4 +1,4 @@
-version: "3.7"
+version: "3.8"
 services:
   ui:
     build:
@@ -7,8 +7,8 @@ services:
     ports:
       - "${PORT}:8080"
       - "443:443"
-    volumes: 
+    volumes:
       - ./secrets:/etc/nginx/secrets
-    environment: 
+    environment:
       REACT_APP_API_URL: ${REACT_APP_API_URL}
       VRT_VERSION: ${VRT_VERSION}

cypress/support/component-index.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.png" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+
+    <title>Visual Regression Tracker</title>
+
+    <script src="/env-config.js"></script>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>