chore: Upgrade jest and testing-library dependencies

.eslintrc

@@ -74,6 +74,7 @@
     "react/no-unsafe": 2,
     "react/no-unused-prop-types": 2,
     "react/no-unused-state": 2,
+    "react/prop-types": 1,
     "react/self-closing-comp": 2,
     "react/sort-comp": 2,
     "react/style-prop-object": 2,
@@ -92,13 +93,16 @@
       "plugins": ["@typescript-eslint"],
       "rules": {
         "prettier/prettier": [
-          1,
+          "warn",
           {
             "parser": "typescript"
           }
         ],
-        "@typescript-eslint/no-unused-vars": 2,
-        "@typescript-eslint/no-non-null-assertion": 0
+        "@typescript-eslint/no-explicit-any": "warn",
+        "@typescript-eslint/no-invalid-void-type": "warn",
+        "@typescript-eslint/no-non-null-assertion": "warn",
+        "@typescript-eslint/no-unused-expressions": "warn",
+        "@typescript-eslint/no-unused-vars": "warn"
       },
       // Weird behavior with no-unused-vars
       // See https://stackoverflow.com/a/58513127

app/scripts/components/common/cookie-consent/cookieConsent.spec.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@testing-library/jest-dom';
 
 import { render, screen, fireEvent } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom'; // For testing

app/scripts/components/common/google-form.tsx

@@ -6,7 +6,11 @@ const StyledGoogleForm = styled.iframe`
   width: 100%;
 `;
 
-const GoogleForm: React.FC<{ src: string, isRevealed: boolean, hide: () => void }> = (props) => {
+const GoogleForm = (props: {
+  src: string;
+  isRevealed: boolean;
+  hide: () => void;
+}) => {
   const { src, isRevealed, hide } = props;
 
   return (

app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx

@@ -29,11 +29,7 @@ export const createDynamicNavMenuList = (
         );
 
       case NavItemType.INTERNAL_LINK:
-        return (
-          linkProperties && (
-            <NavItemInternalLink {...{ item, linkProperties }} />
-          )
-        );
+        return <NavItemInternalLink {...{ item, linkProperties }} />;
 
       case NavItemType.EXTERNAL_LINK:
         return <NavItemExternalLink item={item} />;

app/scripts/components/common/page-header/nav/nav-item-cta.tsx

@@ -7,9 +7,7 @@ interface NavItemCTAProps {
   item: ActionNavItem;
 }
 
-export const NavItemCTA: React.FC<NavItemCTAProps> = ({
-  item
-}): JSX.Element => {
+export const NavItemCTA = ({ item }: NavItemCTAProps) => {
   const { isRevealed, show, hide } = useFeedbackModal();
   return (
     <React.Fragment key={item.id}>
@@ -21,7 +19,7 @@ export const NavItemCTA: React.FC<NavItemCTAProps> = ({
             tabIndex={0}
             id={item.id}
             onClick={show}
-            style={{background: 'none', border: 'none', cursor: 'pointer'}}
+            style={{ background: 'none', border: 'none', cursor: 'pointer' }}
           >
             {item.title}
           </button>

app/scripts/components/common/page-header/nav/nav-item-links.tsx

@@ -11,9 +11,7 @@ interface NavItemInternalLinkProps {
   linkProperties: LinkProperties;
 }
 
-export const NavItemExternalLink: React.FC<NavItemExternalLinkProps> = ({
-  item
-}): JSX.Element => {
+export const NavItemExternalLink = ({ item }: NavItemExternalLinkProps) => {
   return (
     <a
       key={item.id}
@@ -28,10 +26,10 @@ export const NavItemExternalLink: React.FC<NavItemExternalLinkProps> = ({
   );
 };
 
-export const NavItemInternalLink: React.FC<NavItemInternalLinkProps> = ({
+export const NavItemInternalLink = ({
   item,
   linkProperties
-}): JSX.Element | null => {
+}: NavItemInternalLinkProps) => {
   if (linkProperties.LinkElement) {
     const path = {
       [linkProperties.pathAttributeKeyName]: (item as InternalNavLink).to

app/scripts/components/common/page-header/page-header.test.tsx

@@ -1,7 +1,6 @@
 import React, { ComponentType } from 'react';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom/extend-expect';
 
 import { navItems } from '../../../../../mock/veda.config.js';
 import NasaLogoColor from '../nasa-logo-color';
@@ -18,7 +17,7 @@ const mockLinkProperties = {
   pathAttributeKeyName: 'to',
   LinkElement: 'a' as unknown as ComponentType
 };
-const testTitle= 'Test Title';
+const testTitle = 'Test Title';
 
 describe('PageHeader', () => {
   beforeEach(() => {
@@ -34,9 +33,7 @@ describe('PageHeader', () => {
   });
 
   test('renders the PageHeader component title', () => {
-    expect(screen.getByTestId('header')).toHaveTextContent(
-      testTitle
-    );
+    expect(screen.getByTestId('header')).toHaveTextContent(testTitle);
   });
 
   test('renders the PageHeader nav items', () => {

app/scripts/components/exploration/components/datasets/colorRangeSlider/colorRangeSlider.spec.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import '@testing-library/jest-dom';
 
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 

jest.config.js

@@ -140,10 +140,10 @@ module.exports = {
 
   // The paths to modules that run some code to configure or set up the testing environment before each test
   // setupFiles: [],
-  setupFiles: [`<rootDir>/jest.setup.js`],
+  // setupFiles: [],
 
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
-  // setupFilesAfterEnv: [],
+  setupFilesAfterEnv: [`<rootDir>/jest.setup.ts`],
 
   // The number of seconds after which a test is considered as slow and reported as such in the results.
   // slowTestThreshold: 5,

jest.setup.js → jest.setup.ts

@@ -1,3 +1,5 @@
+import '@testing-library/jest-dom';
+
 jest.mock('@mdx-js/react', () => ({
   MDXProvider: () => null
 }));
@@ -8,4 +10,5 @@ jest.mock('veda', () => ({
   }),
   getNavItemsFromVedaConfig: () => []
 }));
+
 export default undefined;

package.json

@@ -41,12 +41,12 @@
     "node": ">=18.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
+    "@babel/core": "^7.26.0",
     "@babel/eslint-parser": "^7.16.0",
     "@babel/plugin-transform-modules-commonjs": "^7.16.8",
-    "@babel/preset-env": "^7.16.0",
+    "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.16.0",
-    "@babel/preset-typescript": "^7.18.6",
+    "@babel/preset-typescript": "^7.26.0",
     "@mdx-js/mdx": "^2.0.0",
     "@parcel/packager-raw-url": "2.7.0",
     "@parcel/packager-ts": "2.12.0",
@@ -59,26 +59,33 @@
     "@parcel/transformer-webmanifest": "2.7.0",
     "@playwright/test": "^1.46.1",
     "@release-it/conventional-changelog": "^9.0.3",
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/d3": "^7.4.0",
+    "@types/geojson": "^7946.0.10",
+    "@types/jest": "^29.5.14",
     "@types/mapbox-gl": "^2.7.5",
+    "@types/mdx": "^2.0.1",
     "@types/node": "^22.5.0",
-    "@typescript-eslint/eslint-plugin": "^5.12.0",
-    "@typescript-eslint/parser": "^5.12.0",
-    "babel-jest": "^28.1.3",
+    "@types/react": "18.0.32",
+    "@types/react-dom": "18.0.11",
+    "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/eslint-plugin": "^8.18.0",
+    "@typescript-eslint/parser": "^8.18.0",
+    "babel-jest": "^29.7.0",
     "babel-plugin-styled-components": "^1.13.3",
     "buffer": "^6.0.3",
     "dedent": "^0.7.0",
     "del": "^6.0.0",
-    "eslint": "^8.1.0",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-fp": "^2.3.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-inclusive-language": "^2.1.1",
-    "eslint-plugin-jest": "^26.1.1",
+    "eslint-plugin-jest": "^28.9.0",
     "eslint-plugin-playwright": "^1.6.2",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.26.1",
@@ -90,8 +97,9 @@
     "gray-matter": "^4.0.3",
     "gulp": "^4.0.2",
     "husky": "^8.0.0",
-    "jest": "^28.1.3",
+    "jest": "^29.7.0",
     "jest-css-modules-transform": "^4.3.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "14.0.1",
     "parcel": "^2.12.0",
     "parcel-resolver-alias": "link:./parcel-resolver-alias",
@@ -111,8 +119,8 @@
     "stylelint": "^16.10.0",
     "stylelint-config-recommended": "^14.0.1",
     "stylelint-config-standard-scss": "^13.1.0",
-    "ts-jest": "^28.0.7",
-    "typescript": "^4.5.5"
+    "ts-jest": "^29.2.5",
+    "typescript": "4.8.4"
   },
   "resolutions": {
     "@types/react": "18.0.32"
@@ -159,11 +167,6 @@
     "@turf/intersect": "^6.5.0",
     "@turf/simplify": "^6.5.0",
     "@turf/union": "^6.5.0",
-    "@types/geojson": "^7946.0.10",
-    "@types/mdx": "^2.0.1",
-    "@types/react": "18.0.32",
-    "@types/react-dom": "18.0.11",
-    "@types/styled-components": "^5.1.26",
     "@uswds/compile": "^1.1.0",
     "@uswds/uswds": "^3.8.1",
     "autoprefixer": "^10.4.19",
@@ -183,7 +186,6 @@
     "gulp-sass": "^6.0.0",
     "history": "^5.1.0",
     "intersection-observer": "^0.12.0",
-    "jest-environment-jsdom": "^28.1.3",
     "jotai": "^2.6.2",
     "jotai-devtools": "^0.7.1",
     "jotai-location": "^0.5.2",

tsconfig.json

@@ -27,6 +27,6 @@
     "dist",
     "dist*",
     "node_modules",
-    "**/node_modules/*",
+    "**/node_modules/*"
   ]
 }