feat: Upgrade React to v18

package.json

@@ -40,8 +40,9 @@
   "devDependencies": {
     "@babel/eslint-parser": "7.19.1",
     "@babel/polyfill": "7.12.1",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "11.2.7",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "6.6.2",
+    "@testing-library/react": "16.0.1",
     "@testing-library/react-hooks": "8.0.1",
     "@typescript-eslint/eslint-plugin": "5.54.0",
     "@typescript-eslint/parser": "5.54.0",
@@ -50,7 +51,6 @@
     "compare-versions": "5.0.1",
     "cozy-scripts": "^8.3.0",
     "cozy-tsconfig": "1.2.0",
-    "enzyme-adapter-react-16": "1.15.6",
     "eslint": "8.35.0",
     "eslint-config-cozy-app": "^6.1.0",
     "eslint-config-prettier": "8.6.0",
@@ -67,7 +67,7 @@
     "prop-types": "15.8.1",
     "raw-loader": "3.1.0",
     "react-hot-loader": "4.13.1",
-    "react-test-renderer": "16.14.0",
+    "react-test-renderer": "18.3.1",
     "redux-mock-store": "1.5.4",
     "stylint": "2.0.0",
     "typescript": "4.9.5"
@@ -101,8 +101,8 @@
     "lodash": "4.17.21",
     "node-fetch": "2.6.1",
     "pdf-lib": "1.17.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-input-mask": "3.0.0-alpha.2",
     "react-inspector": "5.1.1",
     "react-router-dom": "6.23.1",

src/components/ModelSteps/Edit/helpers.spec.js

@@ -374,8 +374,7 @@ describe('updateReferencedContact', () => {
   })
 })
 
-// eslint-disable-next-line jest/no-focused-tests
-fdescribe('getPaperDefinitionByFile', () => {
+describe('getPaperDefinitionByFile', () => {
   describe('paperDefinition has no country defined', () => {
     it('should return the paperDefinition "isp_invoice"', () => {
       const fakeFile = makeFakeFile({ qualificationLabel: 'isp_invoice' })

src/targets/browser/index.jsx

@@ -1,6 +1,5 @@
 /* eslint-disable import/order */
 import React from 'react'
-import { render } from 'react-dom'
 
 import 'cozy-ui/transpiled/react/stylesheet.css'
 import 'cozy-ui/dist/cozy-ui.utils.min.css'
@@ -15,7 +14,7 @@ import { AppRouter } from 'src/components/AppRouter'
 const init = () => {
   const { root, ...rest } = setupApp()
 
-  render(<AppRouter {...rest} />, root)
+  root.render(<AppRouter {...rest} />)
 }
 
 registerServiceWorker()

src/targets/browser/setupApp.jsx

@@ -1,6 +1,7 @@
 import { CaptureConsole } from '@sentry/integrations'
 import * as Sentry from '@sentry/react'
 import memoize from 'lodash/memoize'
+import { createRoot } from 'react-dom/client'
 import { makeClient } from 'src/targets/browser/makeClient'
 
 import flag from 'cozy-flags'
@@ -16,8 +17,9 @@ const getDataOrDefault = (data, defaultData) =>
  * Memoize this function in its own file so that it is correctly memoized
  */
 const setupApp = memoize(() => {
-  const root = document.querySelector('[role=application]')
-  const locale = JSON.parse(root.dataset.cozy)?.locale
+  const container = document.querySelector('[role=application]')
+  const root = createRoot(container)
+  const locale = JSON.parse(container.dataset.cozy)?.locale
   const lang = getDataOrDefault(locale, 'en')
   const polyglot = initTranslation(lang, lang => require(`locales/${lang}`))
   const client = makeClient()