fix: update tests for react 18

examples/cra/src/App.test.js

@@ -1,9 +1,10 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import App from './App'
 
 it('renders without crashing', () => {
     const div = document.createElement('div')
-    ReactDOM.render(<App />, div)
-    ReactDOM.unmountComponentAtNode(div)
+    const root = createRoot(div)
+    root.render(<App />, div)
+    root.unmount()
 })

examples/cra/src/index.js

@@ -1,10 +1,12 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App'
 import * as serviceWorker from './serviceWorker'
 
-ReactDOM.render(<App />, document.getElementById('root'))
+const root = createRoot(document.getElementById('root'))
+
+root.render(<App />)
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

examples/query-playground/src/components/Editor.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-unresolved */
 import React from 'react'
 import AceEditor from 'react-ace'
 

examples/query-playground/src/components/QueryTab.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/named
 import { PropTypes } from '@dhis2/prop-types'
 import React from 'react'
 import { QueryEditor } from './QueryEditor'

examples/query-playground/src/components/TabControls.js

@@ -1,4 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
+// eslint-disable-next-line import/named
 import { PropTypes } from '@dhis2/prop-types'
 import {
     Button,

package.json

@@ -10,18 +10,16 @@
         "services/*"
     ],
     "devDependencies": {
-        "@dhis2/cli-app-scripts": "^10.2.0",
-        "@dhis2/cli-style": "^10.4.3",
+        "@dhis2/cli-app-scripts": "^12.0.0-alpha.21",
+        "@dhis2/cli-style": "10.4.3",
         "@dhis2/cli-utils-docsite": "^2.0.3",
-        "@testing-library/jest-dom": "^5.14.1",
-        "@testing-library/react": "^12.0.0",
-        "@testing-library/react-hooks": "^7.0.1",
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/react": "^16.0.1",
         "@types/jest": "^24.9.0",
         "@types/lodash": "^4.14.171",
         "@types/node": "^13.1.8",
-        "@types/react": "^16.9.18",
-        "@types/react-dom": "^16.9.5",
-        "@types/testing-library__dom": "^7.5.0",
+        "@types/react": "^18.3.12",
+        "@types/react-dom": "^18.3.1",
         "@typescript-eslint/eslint-plugin": "^5.47.0",
         "@typescript-eslint/parser": "^5.47.0",
         "concurrently": "^5.0.2",
@@ -31,9 +29,8 @@
         "idb": "^6.1.3",
         "loop": "^3.3.4",
         "prop-types": "^15.7.2",
-        "react": "^16.12.0",
-        "react-dom": "^16.12.0",
-        "react-test-renderer": "^16.12",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "rimraf": "^3.0.0",
         "typescript": "^4.0.5"
     },

services/alerts/src/__tests__/integration.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react'
 import React, { ReactNode } from 'react'
 import { AlertsProvider, useAlerts, useAlert } from '../index'
 

services/alerts/src/__tests__/useAlert.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 import React, { ReactNode } from 'react'
 import { AlertsProvider, useAlert } from '../index'
 

services/alerts/src/__tests__/useAlerts.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 import React, { ReactNode } from 'react'
 import { AlertsProvider, useAlerts } from '../index'
 

services/alerts/src/setupRTL.ts

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 
 process.on('unhandledRejection', (err) => {
     throw err

services/config/src/__tests__/useTimeZoneConversion.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 import React, { ReactNode } from 'react'
 import { ConfigProvider, useTimeZoneConversion } from '../index'
 

services/config/src/setupRTL.ts

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 
 process.on('unhandledRejection', (err) => {
     throw err

services/data/src/react/hooks/useDataMutation.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act, waitFor } from '@testing-library/react'
 import * as React from 'react'
 import { CreateMutation, UpdateMutation } from '../../engine/types/Mutation'
 import { CustomDataProvider } from '../components/CustomDataProvider'
@@ -17,10 +17,9 @@ describe('useDataMutation', () => {
             <CustomDataProvider data={data}>{children}</CustomDataProvider>
         )
 
-        const { result, waitFor } = renderHook(
-            () => useDataMutation(mutation),
-            { wrapper }
-        )
+        const { result } = renderHook(() => useDataMutation(mutation), {
+            wrapper,
+        })
 
         const [mutate, beforeMutation] = result.current
         expect(beforeMutation).toMatchObject({
@@ -61,7 +60,7 @@ describe('useDataMutation', () => {
             <CustomDataProvider data={data}>{children}</CustomDataProvider>
         )
 
-        const { result, waitFor } = renderHook(
+        const { result } = renderHook(
             () => useDataMutation(mutation, { lazy: false }),
             { wrapper }
         )
@@ -94,7 +93,7 @@ describe('useDataMutation', () => {
             <CustomDataProvider data={data}>{children}</CustomDataProvider>
         )
 
-        const { result, waitFor } = renderHook(
+        const { result } = renderHook(
             () => useDataMutation(mutation, { onComplete }),
             { wrapper }
         )
@@ -134,7 +133,7 @@ describe('useDataMutation', () => {
             <CustomDataProvider data={data}>{children}</CustomDataProvider>
         )
 
-        const { result, waitFor } = renderHook(
+        const { result } = renderHook(
             () => useDataMutation(mutation, { onError }),
             { wrapper }
         )
@@ -171,7 +170,7 @@ describe('useDataMutation', () => {
             <CustomDataProvider data={data}>{children}</CustomDataProvider>
         )
 
-        const { result, waitFor } = renderHook(
+        const { result } = renderHook(
             () =>
                 useDataMutation(mutation, {
                     lazy: false,
@@ -270,10 +269,9 @@ describe('useDataMutation', () => {
             <CustomDataProvider data={data}>{children}</CustomDataProvider>
         )
 
-        const { result, waitFor } = renderHook(
-            () => useDataMutation(mutation),
-            { wrapper }
-        )
+        const { result } = renderHook(() => useDataMutation(mutation), {
+            wrapper,
+        })
 
         let mutatePromise
         const [mutate] = result.current