v0.41.0 Update tests

Added DOMPurify module for sanitizing user input for forms.

Update vscode launch.json for debugging.

Update `.gitignore` to ignore files prefixed with a single underscore
for files that I do not want added to the repository.

Update test script to fix error adding the `--detectOpenHandles`
argument.
testing-library/dom-testing-library#524

Update tests
- Added mocks for the app setup for the theme, routing, and state store.
- Created `commonSetup.js` module that re-exports multiple mocks for a
single import instead of multiple lines of mock imports.
- Refactor `Home.test.tsx` to use the new `commonSetup.js` for importing
the mocks.

.gitignore

@@ -9,8 +9,8 @@ coverage
 # production
 build
 
-# regexp to ignore specific files
-**/__*
+# ignore specific files prefixed with a single underscore
+**/_[!_]*
 
 # eslintcache for the lint-staged pre-commit
 .eslintcache

.vscode/launch.json

@@ -5,7 +5,7 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "type": "chrome",
+      "type": "pwa-chrome",
       "request": "launch",
       "name": "Launch Chrome against localhost",
       "url": "http://localhost:3000",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "whitelist",
-  "version": "0.40.0",
+  "version": "0.41.0",
   "private": true,
   "engines": {
     "node": "^17.x"
@@ -35,6 +35,7 @@
     "bfj": "^7.0.2",
     "browserslist": "^4.20.0",
     "camelcase": "^6.2.1",
+    "dompurify": "^2.3.6",
     "dotenv": "^14.2.0",
     "dotenv-expand": "^8.0.3",
     "fs-extra": "^10.0.1",
@@ -132,6 +133,7 @@
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^14.0.0",
     "@types/aos": "^3.0.4",
+    "@types/dompurify": "^2.3.3",
     "@types/jest": "^27.4.1",
     "@types/node": "^17.0.23",
     "@types/react": "^17.0.43",

scripts/test.js

@@ -48,4 +48,6 @@ if (
    argv.push(hasSourceControl ? '--watch' : '--watchAll')
 }
 
+argv.push('--detectOpenHandles')
+
 jest.run(argv)

src/__tests__/commonSetup.js

@@ -0,0 +1,7 @@
+/**
+ * This file is used to easily export more than two mock implementations
+ * through a single import file instead of multiple lines.
+ */
+export { default as StoreMock } from './mocks/StoreMock'
+export { default as RoutingMock } from './mocks/RoutingMock'
+export { default as ThemeMock } from './mocks/ThemeMock'

src/__tests__/mocks/RoutingMock.tsx

@@ -0,0 +1,6 @@
+import { BrowserRouter } from 'react-router-dom'
+import type { ReactNode } from 'react'
+
+export default ({ children }: { children: ReactNode }) => (
+   <BrowserRouter>{children}</BrowserRouter>
+)

src/__tests__/mocks/StoreMock.tsx

@@ -0,0 +1,7 @@
+import { Provider } from 'react-redux'
+import store from 'app/store'
+import type { ReactNode } from 'react'
+
+export default ({ children }: { children: ReactNode }) => (
+   <Provider store={store}>{children}</Provider>
+)

src/__tests__/mocks/ThemeMock.tsx

@@ -0,0 +1,11 @@
+import { ThemeProvider } from '@mui/material/styles'
+import type { ReactNode } from 'react'
+import { StyleTheme, ComponentTheme } from 'assets/theme'
+
+const ThemeMock = ({ children }: { children: ReactNode }) => (
+   <ThemeProvider theme={StyleTheme('dark')}>
+      <ThemeProvider theme={ComponentTheme}>{children}</ThemeProvider>
+   </ThemeProvider>
+)
+
+export default ThemeMock

src/__tests__/pages/Home.test.tsx

@@ -1,26 +1,21 @@
-import * as React from 'react'
-import { BrowserRouter } from 'react-router-dom'
-import { ThemeProvider } from '@mui/material/styles'
 import { render, screen } from '@testing-library/react'
-import { Provider } from 'react-redux'
+import { StoreMock, RoutingMock, ThemeMock } from '../commonSetup'
 import Home from 'pages/Home'
-import store from 'app/store'
-import { StyleTheme } from 'assets/theme'
 
 // Need to import it manually because it has to set the window
 // property, whereas jest.mock() simply imports the module
 // eslint-disable-next-line jest/no-mocks-import
-import './__mocks__/intersectionObserverMock'
+import '../mocks/intersectionObserverMock'
 
 test('renders home page without crashing', () => {
    render(
-      <Provider store={store}>
-         <BrowserRouter>
-            <ThemeProvider theme={StyleTheme('dark')}>
+      <StoreMock>
+         <RoutingMock>
+            <ThemeMock>
                <Home />
-            </ThemeProvider>
-         </BrowserRouter>
-      </Provider>
+            </ThemeMock>
+         </RoutingMock>
+      </StoreMock>
    )
    expect(screen.getByText(/your go-to helium center/i)).toBeInTheDocument()
 })