chore(react): Upgrade to React 18 (#14760)

* chore(react): Upgrade to React 18

* fix type errors

* lib: bump palette to latest

* test: use fresnel@6 in legacy tests

* wip start addressing tests

* canary

* convert more enzyme tests

* feat(scripts): add move enzyme scripts

* chore: migrate more enzyme tests

* fix: regenerate detect-secrets baseline

* lib: bump palette

.secrets.baseline

@@ -187,52 +187,52 @@
         "filename": "src/Apps/MyCollection/Routes/EditArtwork/__tests__/MyCollectionEditArtwork.jest.tsx",
         "hashed_secret": "dc312ec7ed341804d6911ecdcf18eea1858f6091",
         "is_verified": false,
-        "line_number": 517
+        "line_number": 519
       }
     ],
-    "src/Apps/ViewingRoom/Routes/Statement/__tests__/ViewingRoomStatementRoute.jest.tsx": [
+    "src/Apps/ViewingRoom/Routes/Statement/__tests__/ViewingRoomStatementRoute.jest.enzyme.tsx": [
       {
         "type": "Base64 High Entropy String",
-        "filename": "src/Apps/ViewingRoom/Routes/Statement/__tests__/ViewingRoomStatementRoute.jest.tsx",
+        "filename": "src/Apps/ViewingRoom/Routes/Statement/__tests__/ViewingRoomStatementRoute.jest.enzyme.tsx",
         "hashed_secret": "582731c15a3c47c3becb427891f54e1e5e90387a",
         "is_verified": false,
         "line_number": 199
       },
       {
         "type": "Base64 High Entropy String",
-        "filename": "src/Apps/ViewingRoom/Routes/Statement/__tests__/ViewingRoomStatementRoute.jest.tsx",
+        "filename": "src/Apps/ViewingRoom/Routes/Statement/__tests__/ViewingRoomStatementRoute.jest.enzyme.tsx",
         "hashed_secret": "fbadd9158203745bb5094bf61c69c110c0dbced4",
         "is_verified": false,
         "line_number": 219
       }
     ],
-    "src/Apps/ViewingRoom/Routes/Works/__tests__/ViewingRoomWorksRoute.jest.tsx": [
+    "src/Apps/ViewingRoom/Routes/Works/__tests__/ViewingRoomWorksRoute.jest.enzyme.tsx": [
       {
         "type": "Base64 High Entropy String",
-        "filename": "src/Apps/ViewingRoom/Routes/Works/__tests__/ViewingRoomWorksRoute.jest.tsx",
+        "filename": "src/Apps/ViewingRoom/Routes/Works/__tests__/ViewingRoomWorksRoute.jest.enzyme.tsx",
         "hashed_secret": "582731c15a3c47c3becb427891f54e1e5e90387a",
         "is_verified": false,
         "line_number": 169
       },
       {
         "type": "Base64 High Entropy String",
-        "filename": "src/Apps/ViewingRoom/Routes/Works/__tests__/ViewingRoomWorksRoute.jest.tsx",
+        "filename": "src/Apps/ViewingRoom/Routes/Works/__tests__/ViewingRoomWorksRoute.jest.enzyme.tsx",
         "hashed_secret": "fbadd9158203745bb5094bf61c69c110c0dbced4",
         "is_verified": false,
         "line_number": 326
       }
     ],
-    "src/Apps/ViewingRoom/__tests__/ViewingRoomApp.jest.tsx": [
+    "src/Apps/ViewingRoom/__tests__/ViewingRoomApp.jest.enzyme.tsx": [
       {
         "type": "JSON Web Token",
-        "filename": "src/Apps/ViewingRoom/__tests__/ViewingRoomApp.jest.tsx",
+        "filename": "src/Apps/ViewingRoom/__tests__/ViewingRoomApp.jest.enzyme.tsx",
         "hashed_secret": "d62b42cc21382044595c7c5131b0f28e8588ae62",
         "is_verified": false,
         "line_number": 41
       },
       {
         "type": "Base64 High Entropy String",
-        "filename": "src/Apps/ViewingRoom/__tests__/ViewingRoomApp.jest.tsx",
+        "filename": "src/Apps/ViewingRoom/__tests__/ViewingRoomApp.jest.enzyme.tsx",
         "hashed_secret": "d7fc89e39d93a3ec26b311594abff287d01b2ace",
         "is_verified": false,
         "line_number": 360
@@ -562,5 +562,5 @@
       }
     ]
   },
-  "generated_at": "2024-11-20T13:21:49Z"
+  "generated_at": "2024-11-21T17:57:57Z"
 }

jest.config.js

@@ -14,7 +14,10 @@ module.exports = {
     "^react$": "<rootDir>/node_modules/react",
   },
   reporters: ["default", "jest-junit"],
-  setupFilesAfterEnv: ["<rootDir>/src/tests.ts"],
+  setupFilesAfterEnv: [
+    "<rootDir>/src/Utils/jestShim.js",
+    "<rootDir>/src/tests.ts",
+  ],
   testEnvironment: "jest-environment-jsdom",
   testMatch: ["**/src/**/*.jest.(ts|tsx|js|jsx)"],
   testEnvironmentOptions: {

jest.legacy.config.js

@@ -7,12 +7,16 @@ module.exports = {
   moduleFileExtensions: ["js", "json", "jsx", "ts", "tsx"],
   moduleNameMapper: {
     "^luxon$": "<rootDir>/node_modules/luxon",
+    "^@artsy/fresnel$": "fresnel-17",
     "^react$": "react-17",
     "^react-dom$": "react-dom-17",
     "^react-dom/test-utils$": "react-dom-17/test-utils",
   },
   reporters: ["default", "jest-junit"],
-  setupFilesAfterEnv: ["<rootDir>/src/tests.ts"],
+  setupFilesAfterEnv: [
+    "<rootDir>/src/Utils/jestShim.js",
+    "<rootDir>/src/Utils/tests.legacy.ts",
+  ],
   testEnvironment: "jest-environment-jsdom",
   testMatch: ["**/src/**/*.jest.enzyme.(ts|tsx|js|jsx)"],
   testEnvironmentOptions: {

package.json

@@ -64,8 +64,8 @@
     "webpack": "node --max_old_space_size=4096 -r @babel/register node_modules/.bin/webpack"
   },
   "resolutions": {
-    "@types/express": "4.17.21",
-    "@types/react": "16.9.34",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@types/relay-runtime": "14.1.1",
     "chokidar": "3.4.0",
     "colors": "1.3.0",
@@ -85,12 +85,12 @@
     "@artsy/detect-responsive-traits": "^0.1.0",
     "@artsy/dismissible": "^0.3.2",
     "@artsy/express-reloadable": "^1.7.0",
-    "@artsy/fresnel": "3.5.0",
+    "@artsy/fresnel": "^8.0.1",
     "@artsy/icons": "3.22.0",
     "@artsy/img": "1.0.3",
     "@artsy/multienv": "^1.2.0",
-    "@artsy/palette": "39.1.2",
-    "@artsy/palette-charts": "38.1.2",
+    "@artsy/palette": "^40.1.0",
+    "@artsy/palette-charts": "^39.1.0",
     "@artsy/react-html-parser": "^3.0.2",
     "@artsy/xapp": "2.0.0",
     "@babel/runtime": "7.13.10",
@@ -162,10 +162,10 @@
     "proportional-scale": "^4.0.0",
     "qrcode.react": "1.0.0",
     "qs": "6.5.3",
-    "react": "17.0.2",
+    "react": "^18.3.1",
     "react-17": "npm:[email protected]",
     "react-dfp": "^0.21.0",
-    "react-dom": "17.0.2",
+    "react-dom": "^18.3.1",
     "react-dom-17": "npm:[email protected]",
     "react-dropzone": "^11.4.2",
     "react-head": "3.0.2",
@@ -232,8 +232,8 @@
     "@swc/jest": "^0.2.29",
     "@swc/plugin-relay": "^1.5.94",
     "@swc/plugin-styled-components": "^1.5.94",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^11.2.7",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.1.9",
     "@types/autosuggest-highlight": "3.1.0",
@@ -253,8 +253,8 @@
     "@types/prop-types": "15.7.1",
     "@types/qrcode.react": "1.0.0",
     "@types/qs": "6.5.3",
-    "@types/react": "16.9.34",
-    "@types/react-dom": "16.8.4",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@types/react-is": "^18.2.0",
     "@types/react-relay": "^16.0.4",
     "@types/react-stickynode": "^4.0.0",
@@ -267,7 +267,7 @@
     "@types/styled-system": "5.1.10",
     "@types/styled-system__theme-get": "5.0.0",
     "@types/superagent": "^4.1.24",
-    "@types/testing-library__jest-dom": "^5.14.5",
+    "@types/testing-library__jest-dom": "^6.0.0",
     "@types/testing-library__react": "^10.2.0",
     "@types/underscore.string": "0.0.32",
     "@types/webpack-env": "1.16.0",
@@ -302,6 +302,7 @@
     "eslint-plugin-styled-components-a11y": "0.0.16",
     "eslint-plugin-testing-library": "^4.6.0",
     "fork-ts-checker-notifier-webpack-plugin": "4.0.0",
+    "fresnel-17": "npm:@artsy/fresnel@6",
     "graphql-tag": "2.10.3",
     "graphql-tools": "4.0.3",
     "html-webpack-plugin": "5.3.1",
@@ -339,7 +340,7 @@
     "swc-loader": "^0.2.3",
     "terser-webpack-plugin": "5.1.3",
     "time-fix-plugin": "^2.0.7",
-    "typescript": "4.7.4",
+    "typescript": "^5.6.3",
     "typescript-styled-plugin": "0.15.0",
     "webpack": "5.76.0",
     "webpack-bundle-analyzer": "4.4.2",

scripts/move-enzyme-tests.js

@@ -0,0 +1,43 @@
+const fs = require("fs")
+const path = require("path")
+
+const srcFolder = path.join(process.cwd(), "src")
+
+// Test git status untracked:
+// git status --porcelain | grep '^??' | awk '{print $2}' | grep -E '\.jest\.enzyme\.(js|ts|tsx)$' | xargs -r yarn jest-enzyme
+
+function findAndRenameFiles(dir) {
+  const filesAndDirs = fs.readdirSync(dir, { withFileTypes: true })
+
+  filesAndDirs.forEach(dirent => {
+    const fullPath = path.join(dir, dirent.name)
+
+    if (dirent.isDirectory()) {
+      // Recursively search in subdirectories
+      findAndRenameFiles(fullPath)
+    } else if (
+      dirent.isFile() &&
+      [".js", ".ts", ".tsx"].includes(path.extname(fullPath)) &&
+      fullPath.includes(".jest")
+    ) {
+      // Read the file content
+      const content = fs.readFileSync(fullPath, "utf8")
+      if (
+        content.includes(
+          'import { renderRelayTree } from "DevTools/renderRelayTree"'
+        )
+      ) {
+        // Rename the file to include .enzyme before the current extension
+        const ext = path.extname(fullPath)
+        const newFileName = path.basename(fullPath, ext) + `.enzyme${ext}`
+        const newPath = path.join(dir, newFileName)
+
+        fs.renameSync(fullPath, newPath)
+        console.log(`Renamed: ${fullPath} -> ${newPath}`)
+      }
+    }
+  })
+}
+
+// Start processing from the src folder
+findAndRenameFiles(srcFolder)

src/Apps/About/AboutApp.tsx

@@ -16,7 +16,7 @@ import { resized } from "Utils/resized"
 import { AboutArtworksRailQueryRenderer } from "./AboutArtworksRail"
 import { FullBleedHeader } from "Components/FullBleedHeader/FullBleedHeader"
 
-export const AboutApp: React.FC = () => {
+export const AboutApp: React.FC<React.PropsWithChildren<unknown>> = () => {
   return (
     <>
       <MetaTags
@@ -96,7 +96,7 @@ interface SectionProps {
   href: string
 }
 
-const Section: React.FC<SectionProps & BoxProps> = ({
+const Section: React.FC<React.PropsWithChildren<SectionProps & BoxProps>> = ({
   imageUrl,
   title,
   description,

src/Apps/About/AboutArtworksRail.tsx

@@ -14,7 +14,7 @@ interface AboutArtworksRailProps {
   marketingCollection: AboutArtworksRail_marketingCollection$data
 }
 
-export const AboutArtworksRail: React.FC<AboutArtworksRailProps> = props => {
+export const AboutArtworksRail: React.FC<React.PropsWithChildren<AboutArtworksRailProps>> = props => {
   const artworks = extractNodes(props.marketingCollection.artworksConnection)
 
   if (artworks.length === 0) {
@@ -58,7 +58,7 @@ export const AboutArtworksRailFragmentContainer = createFragmentContainer(
   }
 )
 
-export const AboutArtworksRailQueryRenderer: React.FC = () => {
+export const AboutArtworksRailQueryRenderer: React.FC<React.PropsWithChildren<unknown>> = () => {
   return (
     <SystemQueryRenderer<AboutArtworksRailQuery>
       lazyLoad

src/Apps/Admin/AdminApp.tsx

@@ -1,7 +1,7 @@
 import { Flex, Spacer } from "@artsy/palette"
 import { RouterLink } from "System/Components/RouterLink"
 
-export const AdminApp: React.FC = ({ children }) => {
+export const AdminApp: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   return (
     <>
       <Flex gap={1} mt={2}>

src/Apps/Admin/Routes/AdminCacheManagementRoute.tsx

@@ -7,10 +7,10 @@ import {
   Text,
   useToasts,
 } from "@artsy/palette"
-import React, { FC, useReducer, useState } from "react"
+import { FC, useReducer, useState } from "react"
 import { MetaTags } from "Components/MetaTags"
 
-export const AdminCacheManagementRoute: FC = () => {
+export const AdminCacheManagementRoute: FC<React.PropsWithChildren<unknown>> = () => {
   const { sendToast } = useToasts()
 
   const [state, dispatch] = useReducer(reducer, {

src/Apps/Admin/Routes/AdminNavigateToRoute.tsx

@@ -11,7 +11,7 @@ import { MetaTags } from "Components/MetaTags"
 import { useRouter } from "System/Hooks/useRouter"
 import { useEffect, useRef } from "react"
 
-export const AdminNavigateToRoute: React.FC = () => {
+export const AdminNavigateToRoute: React.FC<React.PropsWithChildren<unknown>> = () => {
   const ref = useRef<HTMLInputElement>(null)
   const { router } = useRouter()
 

src/Apps/Alert/AlertApp.tsx

@@ -4,7 +4,7 @@ import { AlertProvider } from "Components/Alert/AlertProvider"
 import { Debug } from "Components/Alert/Components/Debug"
 import { Steps } from "Components/Alert/Components/Steps"
 
-export const AlertApp: FC = () => {
+export const AlertApp: FC<React.PropsWithChildren<unknown>> = () => {
   return (
     <AlertProvider initialCriteria={{ artistIDs: ["andy-warhol"] }}>
       <Debug />

src/Apps/AppPreferences/useAppPreferences.tsx

@@ -36,7 +36,7 @@ interface AppPreferencesProviderProps {
 
 export const APP_PREFERENCES_SHARIFY_KEY = "APP_PREFERENCES"
 
-export const AppPreferencesProvider: FC<AppPreferencesProviderProps> = ({
+export const AppPreferencesProvider: FC<React.PropsWithChildren<AppPreferencesProviderProps>> = ({
   children,
 }) => {
   const initialPreferences =

src/Apps/ArtAppraisals/ArtAppraisalsApp.tsx

@@ -17,7 +17,7 @@ import { cropped, resized } from "Utils/resized"
 import { Media } from "Utils/Responsive"
 import { RouterLink } from "System/Components/RouterLink"
 
-export const ArtAppraisalsApp: React.FC = () => {
+export const ArtAppraisalsApp: React.FC<React.PropsWithChildren<unknown>> = () => {
   return (
     <>
       <MetaTags
@@ -35,7 +35,7 @@ export const ArtAppraisalsApp: React.FC = () => {
   )
 }
 
-const Header: React.FC = () => {
+const Header: React.FC<React.PropsWithChildren<unknown>> = () => {
   return (
     <FullBleedHeader src="https://files.artsy.net/images/appraisals-header.jpg">
       <Flex
@@ -90,7 +90,7 @@ const Header: React.FC = () => {
   )
 }
 
-const WhyUseArtsy: React.FC = () => {
+const WhyUseArtsy: React.FC<React.PropsWithChildren<unknown>> = () => {
   const { src, srcSet } = resized(
     "https://files.artsy.net/images/shinpei-kusanagi-stop-talking-to-yourself-you-will-be-alright-number-3.jpeg",
     {
@@ -153,7 +153,7 @@ const WhyUseArtsy: React.FC = () => {
   )
 }
 
-const MeetOurSpecialists: React.FC = () => {
+const MeetOurSpecialists: React.FC<React.PropsWithChildren<unknown>> = () => {
   const image = cropped("https://files.artsy.net/images/simon-headshot.png", {
     width: 100,
     height: 100,

src/Apps/ArtQuiz/ArtQuizApp.tsx

@@ -1,7 +1,7 @@
 import { FC } from "react"
 import { MetaTags } from "Components/MetaTags"
 
-export const ArtQuizApp: FC = ({ children }) => {
+export const ArtQuizApp: FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   return (
     <>
       <MetaTags title="Art Taste Quiz | Artsy" />

src/Apps/ArtQuiz/Components/ArtQuizArtworksCard.tsx

@@ -11,7 +11,7 @@ interface ArtQuizArtworksCardProps {
   artwork: ArtQuizArtworksCard_artwork$data
 }
 
-const ArtQuizArtworksCard: FC<ArtQuizArtworksCardProps> = ({
+const ArtQuizArtworksCard: FC<React.PropsWithChildren<ArtQuizArtworksCardProps>> = ({
   mode,
   artwork,
 }) => {

src/Apps/ArtQuiz/Components/ArtQuizArtworksCardMetadata.tsx

@@ -14,7 +14,7 @@ interface ArtQuizArtworksCardMetadataProps extends BoxProps {
   artwork: ArtQuizArtworksCardMetadata_artwork$data
 }
 
-const ArtQuizArtworksCardMetadata: FC<ArtQuizArtworksCardMetadataProps> = ({
+const ArtQuizArtworksCardMetadata: FC<React.PropsWithChildren<ArtQuizArtworksCardMetadataProps>> = ({
   artwork,
   ...rest
 }) => {

src/Apps/ArtQuiz/Components/ArtQuizCard.tsx

@@ -14,7 +14,7 @@ interface ArtQuizCardProps extends BoxProps {
   mode: Mode
 }
 
-export const ArtQuizCard: FC<ArtQuizCardProps> = ({
+export const ArtQuizCard: FC<React.PropsWithChildren<ArtQuizCardProps>> = ({
   children,
   mode = Mode.Pending,
   ...rest

src/Apps/ArtQuiz/Components/ArtQuizFullscreen.tsx

@@ -2,7 +2,7 @@ import { Box, Spinner } from "@artsy/palette"
 import { useNavBarHeight } from "Components/NavBar/useNavBarHeight"
 import { FC, useEffect, useRef, useState } from "react"
 
-export const ArtQuizFullScreen: FC = ({ children }) => {
+export const ArtQuizFullScreen: FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const { mobile, desktop } = useNavBarHeight()
 
   /**