feat: upgrade react to v18 (#876)

BREAKING CHANGE: require react version 18 * fix: pin react version to 18 * test: update test and test libraries for react 18
dhis2 · Sep 12, 2024 · 77ecf10 · 77ecf10
1 parent f300c12
commit 77ecf10
Show file tree

Hide file tree

Showing 9 changed files with 628 additions and 871 deletions.
diff --git a/.github/workflows/dhis2-verify-lib.yml b/.github/workflows/dhis2-verify-lib.yml
@@ -29,7 +29,7 @@ jobs:
             - name: Build
               run: yarn build
 
-            - uses: actions/upload-artifact@v2
+            - uses: actions/upload-artifact@v4
               with:
                   name: lib-build
                   path: |
@@ -61,7 +61,7 @@ jobs:
               with:
                   node-version: 18.x
 
-            - uses: actions/download-artifact@v2
+            - uses: actions/download-artifact@v4
               with:
                   name: lib-build
 
@@ -83,7 +83,7 @@ jobs:
               with:
                   node-version: 18.x
 
-            - uses: actions/download-artifact@v2
+            - uses: actions/download-artifact@v4
               with:
                   name: lib-build
 

diff --git a/adapter/package.json b/adapter/package.json
@@ -26,12 +26,11 @@
     },
     "devDependencies": {
         "@dhis2/cli-app-scripts": "12.0.0-alpha.13",
-        "@testing-library/react": "^12.0.0",
-        "@testing-library/react-hooks": "^8.0.1",
+        "@testing-library/react": "^16.0.1",
         "enzyme": "^3.11.0",
         "enzyme-adapter-react-16": "^1.15.5",
-        "react": "^16.8",
-        "react-dom": "^16.8"
+        "react": "^18",
+        "react-dom": "^18"
     },
     "scripts": {
         "build": "d2-app-scripts build",
@@ -44,8 +43,8 @@
         "classnames": "^2",
         "moment": "^2",
         "prop-types": "^15",
-        "react": "^16.8",
-        "react-dom": "^16.8",
+        "react": "^18",
+        "react-dom": "^18",
         "styled-jsx": "^4"
     },
     "jest": {

diff --git a/adapter/src/utils/useLocale.test.js b/adapter/src/utils/useLocale.test.js
@@ -1,6 +1,6 @@
 import { useDataQuery } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook, waitFor } from '@testing-library/react'
 import moment from 'moment'
 import { useCurrentUserLocale } from './useLocale.js'
 
@@ -84,7 +84,7 @@ describe('formerly problematic locales', () => {
         useDataQuery.mockReturnValue({
             data: { userSettings: { keyUiLocale: 'pt_BR' } },
         })
-        const { result, waitFor } = renderHook(() => useCurrentUserLocale())
+        const { result } = renderHook(() => useCurrentUserLocale())
 
         expect(result.current.direction).toBe('ltr')
         // Notice different locale formats
@@ -109,7 +109,7 @@ describe('formerly problematic locales', () => {
         useDataQuery.mockReturnValue({
             data: { userSettings: { keyUiLocale: 'ar_EG' } },
         })
-        const { result, waitFor } = renderHook(() => useCurrentUserLocale())
+        const { result } = renderHook(() => useCurrentUserLocale())
 
         expect(result.current.direction).toBe('rtl')
         expect(result.current.locale.baseName).toBe('ar-EG')
@@ -127,7 +127,7 @@ describe('formerly problematic locales', () => {
         useDataQuery.mockReturnValue({
             data: { userSettings: { keyUiLocale: 'uz_UZ_Cyrl' } },
         })
-        const { result, waitFor } = renderHook(() => useCurrentUserLocale())
+        const { result } = renderHook(() => useCurrentUserLocale())
 
         expect(result.current.direction).toBe('ltr')
         expect(result.current.locale.baseName).toBe('uz-Cyrl-UZ')
@@ -141,7 +141,7 @@ describe('formerly problematic locales', () => {
         useDataQuery.mockReturnValue({
             data: { userSettings: { keyUiLocale: 'uz_UZ_Latn' } },
         })
-        const { result, waitFor } = renderHook(() => useCurrentUserLocale())
+        const { result } = renderHook(() => useCurrentUserLocale())
 
         expect(result.current.direction).toBe('ltr')
         expect(result.current.locale.baseName).toBe('uz-Latn-UZ')
@@ -166,7 +166,7 @@ describe('other userSettings cases', () => {
                 userSettings: { keyUiLocale: 'en', keyUiLanguageTag: 'pt-BR' },
             },
         })
-        const { result, waitFor } = renderHook(() => useCurrentUserLocale())
+        const { result } = renderHook(() => useCurrentUserLocale())
 
         expect(result.current.direction).toBe('ltr')
         expect(result.current.locale.baseName).toBe('pt-BR')
@@ -180,7 +180,7 @@ describe('other userSettings cases', () => {
         useDataQuery.mockReturnValue({
             data: { userSettings: {} },
         })
-        const { result, waitFor } = renderHook(() => useCurrentUserLocale())
+        const { result } = renderHook(() => useCurrentUserLocale())
 
         expect(result.current.direction).toBe('rtl')
         expect(result.current.locale.baseName).toBe('ar-EG')
@@ -194,7 +194,7 @@ describe('other userSettings cases', () => {
         useDataQuery.mockReturnValue({
             data: { userSettings: { keyUiLocale: 'shouldCauseError' } },
         })
-        const { result, waitFor } = renderHook(() => useCurrentUserLocale())
+        const { result } = renderHook(() => useCurrentUserLocale())
 
         expect(result.current.direction).toBe('rtl')
         expect(result.current.locale.baseName).toBe('ar-EG')

diff --git a/cli/config/init/App.test.jsx b/cli/config/init/App.test.jsx
@@ -1,15 +1,16 @@
 import { CustomDataProvider } from '@dhis2/app-runtime'
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import App from './App.jsx'
 
 it('renders without crashing', () => {
     const div = document.createElement('div')
-    ReactDOM.render(
+    const root = createRoot(div)
+
+    root.render(
         <CustomDataProvider>
             <App />
-        </CustomDataProvider>,
-        div
+        </CustomDataProvider>
     )
-    ReactDOM.unmountComponentAtNode(div)
+    root.unmount()
 })
diff --git a/shell/package.json b/shell/package.json
@@ -24,8 +24,8 @@
         "moment": "^2.29.1",
         "post-robot": "^10.0.46",
         "prop-types": "^15.7.2",
-        "react": "^16.8.6",
-        "react-dom": "^16.8.6",
+        "react": "^18",
+        "react-dom": "^18",
         "source-map-explorer": "^2.1.0",
         "styled-jsx": "^4.0.1",
         "typeface-roboto": "^0.0.75",

diff --git a/shell/src/App.test.jsx b/shell/src/App.test.jsx
@@ -1,9 +1,10 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import App from './App.jsx'
 
 it('renders without crashing', () => {
     const div = document.createElement('div')
-    ReactDOM.render(<App />, div)
-    ReactDOM.unmountComponentAtNode(div)
+    const root = createRoot(div)
+    root.render(<App />)
+    root.unmount()
 })
diff --git a/shell/src/index.jsx b/shell/src/index.jsx
@@ -1,14 +1,15 @@
 import { CssReset } from '@dhis2/ui'
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import App from './App.jsx'
 import 'typeface-roboto'
 import './index.css'
 
-ReactDOM.render(
+const container = document.getElementById('dhis2-app-root')
+const root = createRoot(container)
+root.render(
     <>
         <CssReset />
         <App />
-    </>,
-    document.getElementById('dhis2-app-root')
+    </>
 )
diff --git a/shell/src/plugin.index.jsx b/shell/src/plugin.index.jsx
@@ -1,14 +1,15 @@
 import { CssReset } from '@dhis2/ui'
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import Plugin from './Plugin.jsx'
 import 'typeface-roboto'
 import './index.css'
 
-ReactDOM.render(
+const container = document.getElementById('dhis2-app-root')
+const root = createRoot(container)
+root.render(
     <>
         <CssReset />
         <Plugin />
-    </>,
-    document.getElementById('dhis2-app-root')
+    </>
 )