Merge pull request #672 from NASA-IMPACT/update/react-jest

Update React to 18.3.1 and Jest to 29.7.0
NASA-IMPACT · Jul 29, 2024 · fbcd28f · fbcd28f
2 parents 7d56130 + f2ac919
commit fbcd28f
Show file tree

Hide file tree

Showing 16 changed files with 1,068 additions and 850 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -18,6 +18,8 @@ module.exports = {
   globals: {
     __PATH_PREFIX__: ``,
   },
-  testURL: `http://localhost`,
+  testEnvironmentOptions: {
+    url: `http://localhost`,
+  },
   setupFiles: [`<rootDir>/test/jest.setup.js`, `<rootDir>/test/loadershim.js`],
 }
diff --git a/package.json b/package.json
@@ -50,9 +50,9 @@
     "mapbox-gl": "1.13.1",
     "nuka-carousel": "^4.8.4",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
     "react-datepicker": "^4.7.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-tooltip": "^5.26.3",
     "react-typography": "^0.16.20",
@@ -87,11 +87,12 @@
     "gatsby-plugin-perf-budgets": "^0.0.18",
     "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.26",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.5.1",
-    "jest-styled-components": "^7.0.8",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-styled-components": "^7.2.0",
     "postcss": "8.4.23",
     "prettier": "^2.5.1",
-    "react-test-renderer": "^17.0.1",
+    "react-test-renderer": "^18.3.1",
     "start-server-and-test": "^1.14.0"
   },
   "license": "MIT",

diff --git a/src/components/__tests__/__snapshots__/data-section.test.js.snap b/src/components/__tests__/__snapshots__/data-section.test.js.snap
@@ -47,7 +47,7 @@ exports[`Data Section matches snapshot 1`] = `
         <span
           id="Campaigns"
           style={
-            Object {
+            {
               "border": 0,
               "clip": "rect(0 0 0 0)",
               "height": "1px",
@@ -98,7 +98,7 @@ exports[`Data Section matches snapshot 1`] = `
         <span
           id="Platforms"
           style={
-            Object {
+            {
               "border": 0,
               "clip": "rect(0 0 0 0)",
               "height": "1px",
@@ -158,7 +158,6 @@ exports[`Data Section matches snapshot 1`] = `
           >
             GPM GROUND VALIDATION ADVANCED MICROWAVE PRECIPITATION RADIOMETER (AMPR) IPHEX V2
           </label>
-          
         </div>
         <div
           className="data-section___StyledDiv4-sc-11szotn-3 hZXqEX"
@@ -293,7 +292,6 @@ exports[`Data Section matches snapshot 1`] = `
           >
             GPM GROUND VALIDATION ADVANCED MICROWAVE PRECIPITATION RADIOMETER (AMPR) MC3E V1
           </label>
-          
         </div>
         <div
           className="data-section___StyledDiv4-sc-11szotn-3 hZXqEX"
@@ -345,7 +343,6 @@ exports[`Data Section matches snapshot 1`] = `
           >
             GPM Ground Validation Advanced Microwave Precipitation Radiometer (AMPR) OLYMPEX V1
           </label>
-          
         </div>
         <div
           className="data-section___StyledDiv4-sc-11szotn-3 hZXqEX"
@@ -397,7 +394,6 @@ exports[`Data Section matches snapshot 1`] = `
           >
             TCSP AMPR BRIGHTNESS TEMPERATURE (TB) V2
           </label>
-          
         </div>
         <div
           className="data-section___StyledDiv4-sc-11szotn-3 hZXqEX"

diff --git a/src/components/cards/card.js b/src/components/cards/card.js
@@ -140,7 +140,6 @@ Card.propTypes = {
   }),
   placeholder: PropTypes.func.isRequired,
   imagePosition: PropTypes.oneOf(["left top"]),
-  height: PropTypes.string,
   link: PropTypes.string,
   tag: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   footerList: PropTypes.object,
@@ -149,8 +148,4 @@ Card.propTypes = {
   mode: PropTypes.oneOf([POSITIVE, NEGATIVE]),
 }
 
-Card.defaultProps = {
-  height: "100%",
-}
-
 export default Card
diff --git a/src/components/chip.js b/src/components/chip.js
@@ -11,9 +11,9 @@ const Chip = ({
   label,
   removeAction,
   actionId,
-  isDark,
-  isInline,
-  hoverText,
+  isDark = false,
+  isInline = false,
+  hoverText = "",
 }) => (
   <div
     css={`
@@ -50,10 +50,4 @@ Chip.propTypes = {
   hoverText: PropTypes.string,
 }
 
-Chip.defaultProps = {
-  isDark: false,
-  isInline: false,
-  hoverText: "",
-}
-
 export default Chip
diff --git a/src/components/label.js b/src/components/label.js
@@ -9,7 +9,7 @@ export default function Label({
   id,
   color = colors[NEGATIVE].altText,
   showBorder,
-  display,
+  display = "block",
 }) {
   return (
     <label
@@ -38,7 +38,3 @@ Label.propTypes = {
   showBorder: PropTypes.bool,
   display: PropTypes.string,
 }
-
-Label.defaultProps = {
-  display: "block",
-}
diff --git a/src/components/layout/definition-list.js b/src/components/layout/definition-list.js
@@ -20,7 +20,7 @@ const List = styled.dl`
 export default function DefinitionList({
   id,
   list,
-  isCentered,
+  isCentered = false,
   mode = NEGATIVE,
 }) {
   return (
@@ -76,7 +76,3 @@ DefinitionList.propTypes = {
   isCentered: PropTypes.bool,
   mode: PropTypes.oneOf([POSITIVE, NEGATIVE]),
 }
-
-DefinitionList.defaultProps = {
-  isCentered: false,
-}
diff --git a/src/components/map/layer.js b/src/components/map/layer.js
@@ -13,8 +13,8 @@ export default function Layer({
   map,
   config,
   before,
-  onLoad,
-  isVisible,
+  onLoad = () => {},
+  isVisible = true,
   popupContent,
 }) {
   const { id } = config
@@ -81,8 +81,3 @@ Layer.propTypes = {
   onLoad: PropTypes.func,
   popupContent: PropTypes.func,
 }
-
-Layer.defaultProps = {
-  onLoad: () => {},
-  isVisible: true,
-}
diff --git a/src/components/seo.js b/src/components/seo.js
@@ -10,7 +10,7 @@ import PropTypes from "prop-types"
 import { Helmet } from "react-helmet"
 import { useStaticQuery, graphql } from "gatsby"
 
-function SEO({ description, lang, meta, title }) {
+function SEO({ description, lang = "en", meta = [], title }) {
   const { site } = useStaticQuery(
     graphql`
       query {
@@ -72,12 +72,6 @@ function SEO({ description, lang, meta, title }) {
   )
 }
 
-SEO.defaultProps = {
-  lang: `en`,
-  meta: [],
-  description: ``,
-}
-
 SEO.propTypes = {
   description: PropTypes.string,
   lang: PropTypes.string,

diff --git a/src/templates/campaign/__tests__/__snapshots__/focus-section.test.js.snap b/src/templates/campaign/__tests__/__snapshots__/focus-section.test.js.snap
@@ -43,7 +43,7 @@ exports[`Focus Section displays content 1`] = `
           data-cy="focus-area"
           href="/focus/Carbon Cycle & Ecosystems"
           state={
-            Object {
+            {
               "selectedFilterId": "f1bd646f-876f-4e9f-896e-f7d4571ecc00",
             }
           }
@@ -88,7 +88,7 @@ exports[`Focus Section displays content 1`] = `
             data-cy="geophysical-concept-link"
             href="/explore/campaigns"
             state={
-              Object {
+              {
                 "selectedFilterId": "f1bd646f-876f-4e9f-896e-f7d4571ecc00",
               }
             }

diff --git a/src/templates/campaign/__tests__/__snapshots__/platform-section.test.js.snap b/src/templates/campaign/__tests__/__snapshots__/platform-section.test.js.snap
@@ -140,13 +140,13 @@ exports[`Platform Section displays content 1`] = `
               data-state="collapsed"
             >
               <button
-                aria-controls="panel---1"
+                aria-controls="panel--:r0:---1"
                 aria-expanded={false}
                 className="accordion___StyledAccordionButton-sc-1dzvn26-3 hLJNUX"
                 data-cy="accordion-button"
                 data-reach-accordion-button=""
                 data-state="collapsed"
-                id="button---1"
+                id="button--:r0:---1"
                 onClick={[Function]}
                 onKeyDown={[Function]}
               >
@@ -180,12 +180,12 @@ exports[`Platform Section displays content 1`] = `
                 </div>
               </button>
               <div
-                aria-labelledby="button---1"
+                aria-labelledby="button--:r0:---1"
                 className="accordion___StyledAccordionPanel-sc-1dzvn26-4 kArqvk"
                 data-reach-accordion-panel=""
                 data-state="collapsed"
                 hidden={true}
-                id="panel---1"
+                id="panel--:r0:---1"
                 role="region"
               >
                 <div
@@ -327,13 +327,13 @@ exports[`Platform Section displays content 1`] = `
               data-state="collapsed"
             >
               <button
-                aria-controls="panel---1"
+                aria-controls="panel--:r1:---1"
                 aria-expanded={false}
                 className="accordion___StyledAccordionButton-sc-1dzvn26-3 hLJNUX"
                 data-cy="accordion-button"
                 data-reach-accordion-button=""
                 data-state="collapsed"
-                id="button---1"
+                id="button--:r1:---1"
                 onClick={[Function]}
                 onKeyDown={[Function]}
               >
@@ -367,12 +367,12 @@ exports[`Platform Section displays content 1`] = `
                 </div>
               </button>
               <div
-                aria-labelledby="button---1"
+                aria-labelledby="button--:r1:---1"
                 className="accordion___StyledAccordionPanel-sc-1dzvn26-4 kArqvk"
                 data-reach-accordion-panel=""
                 data-state="collapsed"
                 hidden={true}
-                id="panel---1"
+                id="panel--:r1:---1"
                 role="region"
               >
                 <div

diff --git a/src/templates/campaign/__tests__/__snapshots__/program-info-section.test.js.snap b/src/templates/campaign/__tests__/__snapshots__/program-info-section.test.js.snap
@@ -40,7 +40,7 @@ exports[`Program Info Section renders logo when present in props 1`] = `
             className="gatsby-image-wrapper"
             data-gatsby-image-wrapper=""
             style={
-              Object {
+              {
                 "backgroundColor": undefined,
                 "overflow": "hidden",
                 "position": "relative",
@@ -50,7 +50,7 @@ exports[`Program Info Section renders logo when present in props 1`] = `
             <div
               aria-hidden={true}
               style={
-                Object {
+                {
                   "paddingTop": "99.2248062015504%",
                 }
               }
@@ -59,7 +59,7 @@ exports[`Program Info Section renders logo when present in props 1`] = `
               aria-hidden={true}
               data-placeholder-image=""
               style={
-                Object {
+                {
                   "height": "100%",
                   "left": 0,
                   "position": "absolute",
@@ -84,7 +84,7 @@ exports[`Program Info Section renders logo when present in props 1`] = `
                 loading="lazy"
                 sizes="100vw"
                 style={
-                  Object {
+                  {
                     "backgroundColor": undefined,
                     "height": "100%",
                     "left": 0,
@@ -118,7 +118,7 @@ exports[`Program Info Section renders logo when present in props 1`] = `
                   src="/static/3d17ba6135efff1e39e6b4d97157a123/893c2/3b06165b-7033-4357-8f15-d2b68cbd84ff.png"
                   srcSet="/static/3d17ba6135efff1e39e6b4d97157a123/893c2/3b06165b-7033-4357-8f15-d2b68cbd84ff.png 129w"
                   style={
-                    Object {
+                    {
                       "backgroundColor": undefined,
                       "height": "100%",
                       "left": 0,
@@ -138,8 +138,8 @@ exports[`Program Info Section renders logo when present in props 1`] = `
             </noscript>
             <script
               dangerouslySetInnerHTML={
-                Object {
-                  "__html": "const t=\\"undefined\\"!=typeof HTMLImageElement&&\\"loading\\"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll(\\"img[data-main-image]\\");for(let e of t){e.dataset.src&&(e.setAttribute(\\"src\\",e.dataset.src),e.removeAttribute(\\"data-src\\")),e.dataset.srcset&&(e.setAttribute(\\"srcset\\",e.dataset.srcset),e.removeAttribute(\\"data-srcset\\"));const t=e.parentNode.querySelectorAll(\\"source[data-srcset]\\");for(let e of t)e.setAttribute(\\"srcset\\",e.dataset.srcset),e.removeAttribute(\\"data-srcset\\");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector(\\"[data-placeholder-image]\\").style.opacity=0)}}",
+                {
+                  "__html": "const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}",
                 }
               }
               type="module"

diff --git a/src/templates/instrument/__tests__/__snapshots__/overview-section.test.js.snap b/src/templates/instrument/__tests__/__snapshots__/overview-section.test.js.snap
@@ -12,7 +12,7 @@ exports[`Overview Section displays content 1`] = `
   />
   <span
     style={
-      Object {
+      {
         "border": 0,
         "clip": "rect(0 0 0 0)",
         "height": "1px",

diff --git a/src/templates/instrument/overview-section.js b/src/templates/instrument/overview-section.js
@@ -16,7 +16,7 @@ import { POSITIVE } from "../../utils/constants"
 import { isUrl } from "../../utils/helpers"
 import { colors } from "../../theme"
 
-function BackgroundListItem({ id, label, children }) {
+function BackgroundListItem({ id, label, children = "Currently unavailable" }) {
   return (
     <li
       css={`
@@ -41,9 +41,6 @@ BackgroundListItem.propTypes = {
   label: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 }
-BackgroundListItem.defaultProps = {
-  children: "Currently unavailable",
-}
 
 function Background({
   instrumentDoi,

diff --git a/src/utils/__tests__/use-platform-list.test.js b/src/utils/__tests__/use-platform-list.test.js
@@ -18,7 +18,6 @@ it("the default platform list (without filters)", () => {
   const platformGroups = Object.keys(platformList.grouped)
   const firstGroup =
     platformList.grouped[platformGroups[platformGroups.length - 1]]
-  console.log({ firstGroup })
 
   expect(platformList.filtered.length).toEqual(list.length)
   expect(platformGroups.length).toBeGreaterThanOrEqual(5)