Merge pull request #106 from NYPL-Simplified/node-20-upgrade

Upgrade to Node 20 + TGR-36: package update

.github/workflows/main.yml

@@ -24,13 +24,13 @@ jobs:
       - name: Checkout repo
         uses: actions/checkout@v3
 
-      - name: Use Node 14
+      - name: Use Node 20
         uses: actions/setup-node@v3
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'
 
-      - name: Use NPM 8.x
+      - name: Use NPM 10.x
         run: npm i -g npm@8
 
       - name: Install Dependencies

.nvmrc

@@ -1 +1 @@
-v16.13.0
+v20

CHANGELOG.md

@@ -2,6 +2,26 @@
 
 ## UNRELEASED CHANGES
 
+## 2.1.0
+
+### Add
+
+- Adds the following `npm` packages:
+  `babel/preset-typescript`, `babel-jest`
+
+### Update
+
+- Upgrade to Node 20.
+- Uses `ts-jest` over `esbuild-jest`.
+- Updates the Reservoir DS to `3.1.7` and removes unnecessary stylesheet.
+- Updates the following `npm` packages:
+  `@nypl/design-system-react-components`, `@parcel/transformer-sass`, `@testing-library/jest-dom`, `@testing-library/react`, `@types/jest`, `@types/js-cookie`, `@types/node`, `@types/react`, `@types/react-dom`, `@types/react-test-renderer`, `@typescript-eslint/eslint-plugin`, `@typescript-eslint/parser`, `esbuild`, `eslint`, `eslint-config-prettier`, `eslint-plugin-import`, `eslint-plugin-jsx-a11y`, `eslint-plugin-prettier`, `eslint-plugin-react`, `eslint-plugin-react-hooks`, `husky`, `jest`, `jest-config`, `jest-environment-jsdom`, `js-cookie`, `lint-staged`, `os-browserify`, `parcel`, `path-browserify`, `process`, `react`, `react-dom`, `react-error-boundary`, `react-test-renderer`, `ts-jest`, `ts-node`
+
+### Remove
+
+- Removes the following `npm` packages:
+  `esbuild-jest`
+
 ## 2.0.2
 
 - Use /libraries/qa endpoint to fetch libraries on production

Dockerfile

@@ -1,4 +1,4 @@
-FROM --platform=linux/amd64 node:16.13.0-alpine
+FROM node:20-alpine
 RUN apk add --no-cache python3 make g++
 
 WORKDIR /app

README.md

@@ -8,7 +8,7 @@ To see screenshots, read in-depth documentation, and find out more about the pro
 
 ## Local Development & Installation
 
-This project is a React app bundled with parcel.
+This project is a React app bundled with [parcel](https://parceljs.org/).
 
 One the repo is cloned, change directory to `registry_admin` and then install the dependencies.
 
@@ -17,19 +17,13 @@ cd registry_admin
 npm install
 ```
 
-## Accessibility
-
-In order to develop user interfaces that are accessible to everyone, there are tools added to the workflow. Besides the Typescript `tslint-react-a11y` plugin, `react-axe` is also installed for local development. Using that module while running the app uses a lot of resources so it should be only when specifically testing for accessibility and not while actively developing new features or fixing bugs.
-
-In order to run the app with `react-axe`, run `npm run dev-test-axe`. This will add a local global variable `process.env.TEST_AXE` (through webpack) that will trigger `react-axe` in `/src/index.tsx`. The output will be seen in the _browser's_ console terminal.
-
 ## Tests
 
 Like the codebase, all the unit tests are written in Typescript. Tests are written for all React components as well as redux and utility functions, and all can be found in their respective `__tests__` folders.
 
 To run the tests, perform `npm test`.
 
-We use Travis CI for continuous integration. Any pull requests submitted must have tests and those tests must pass on Travis CI.
+We use Github Actions for continuous integration. Any pull requests submitted must have tests, whether new or updated, and those tests must pass on Github Actions.
 
 Manual tests and expectations for the Registry Admin's functionality can be found [here](https://docs.google.com/spreadsheets/d/1q9joHeNZpkTsZU-u1NwPBRUFYcxvRo23eP2vw79xPG4/edit#gid=0).
 

jest.config.js

@@ -3,12 +3,22 @@
 const { defaults } = require('jest-config');
 
 module.exports = {
-  preset: 'ts-jest',
   testEnvironment: 'jest-environment-jsdom',
   moduleFileExtensions: [...defaults.moduleFileExtensions, 'ts', 'tsx'],
+  transformIgnorePatterns: [
+    './node_modules/',
+    '^.+\\.module\\.(css|sass|scss)$',
+  ],
   transform: {
-    '^.+\\.tsx?$': 'esbuild-jest',
+    '^.+\\.(ts|tsx)$': 'ts-jest',
   },
   setupFilesAfterEnv: ['<rootDir>/testHelper/browser.ts'],
   clearMocks: true,
+  globals: {
+    'ts-jest': {
+      tsconfig: {
+        jsx: 'react',
+      },
+    },
+  },
 };