use next/jest plugin to configure jest unit tests

packages/web/__tests__/pages/loginPageTests.tsx

@@ -1,4 +1,4 @@
-import { render } from '../testUtils'
+import { render } from '@testing-library/react'
 import Login from '../../pages/login'
 import { IntlProvider } from 'react-intl'
 import { englishTranslations } from './../../locales/en/messages'

packages/web/__tests__/testUtils.ts

@@ -1,17 +0,0 @@
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-
-const Providers = ({ children }: any) => {
-  return children
-}
-
-const customRender = (ui: any, options = {}) =>
-  render(ui, { wrapper: Providers, ...options })
-
-// re-export everything
-export * from '@testing-library/react'
-
-// override render method
-export { customRender as render }

packages/web/jest.config.js

@@ -1,21 +1,21 @@
-module.exports = {
-  roots: ['<rootDir>'],
-  testEnvironment: 'jsdom',
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'jsx'],
-  testPathIgnorePatterns: [
-    '<rootDir>[/\\\\](node_modules|.next)[/\\\\]',
-    'testUtils.ts'
-  ],
-  transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(ts|tsx)$'],
-  transform: {
-    '^.+\\.(ts|tsx)$': 'babel-jest'
-  },
-  watchPlugins: [
-    'jest-watch-typeahead/filename',
-    'jest-watch-typeahead/testname'
-  ],
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+})
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
   moduleNameMapper: {
-    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
-    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__mocks__/fileMock.js'
-  }
+    // Handle module aliases (this will be automatically configured for you soon)
+    '^@/components/(.*)$': '<rootDir>/components/$1',
+    '^@/pages/(.*)$': '<rootDir>/pages/$1',
+    '^@/lib/(.*)$': '<rootDir>/lib/$1',
+  },
+  testEnvironment: 'jest-environment-jsdom',
 }
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig)

packages/web/jest.setup.js

@@ -0,0 +1,6 @@
+// Optional: configure or set up a testing framework before each test.
+// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`
+
+// Used for __tests__/testing-library.js
+// Learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect'

packages/web/package.json

@@ -11,6 +11,8 @@
     "start": "next start",
     "lint": "next lint",
     "test": "jest",
+    "test:watch": "jest --watch",
+    "test:ci": "jest --ci",
     "upgrade-psdpdfkit": "cp -R '../../node_modules/pspdfkit/dist/pspdfkit-lib' public/pspdfkit-lib"
   },
   "dependencies": {
@@ -28,7 +30,7 @@
     "diff-match-patch": "^1.0.5",
     "graphql-request": "^3.6.1",
     "nanoid": "^3.1.29",
-    "next": "^12.0.7",
+    "next": "^12.1.0",
     "phosphor-react": "^1.4.0",
     "pspdfkit": "^2021.6.0",
     "react": "^17.0.2",
@@ -42,8 +44,9 @@
     "uuid": "^8.3.2"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "13.5.0",
     "@types/cookie": "^0.4.1",
     "@types/diff-match-patch": "^1.0.32",
     "@types/jest": "^27.0.2",
@@ -51,13 +54,12 @@
     "@types/react-dom": "^17.0.2",
     "@types/segment-analytics": "^0.0.34",
     "@types/uuid": "^8.3.1",
-    "babel-jest": "^27.2.5",
+    "babel-jest": "^27.4.5",
     "eslint-config-next": "12.0.7",
     "eslint-plugin-functional": "^4.0.2",
     "eslint-plugin-react": "^7.28.0",
     "graphql": "^15.6.1",
-    "jest": "^27.2.5",
-    "jest-watch-typeahead": "^1.0.0"
+    "jest": "^27.4.5"
   },
   "volta": {
     "node": "14.18.0",

packages/web/tsconfig.json

@@ -13,7 +13,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "types": ["jest", "node"],
+    "types": ["node", "jest", "@testing-library/jest-dom"],
     "incremental": true
   },
   "include": ["additional.d.ts", "next-env.d.ts", "**/*.ts", "**/*.tsx"],