📌(deps) unpin react & react-dom

We successfully migrate to React 18, so we are now able to unpin
libraries blocked by this upgrade (react, react-dom,
testing-library/react)

CHANGELOG.md

@@ -18,6 +18,10 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 - Add a poll builder example using Grommet library
 
+### Changed
+
+- Migrate to React 18
+
 ## [1.0.0-beta.0]
 
 ### Added

examples/playground/package.json

@@ -17,13 +17,14 @@
   "dependencies": {
     "@openfun/verna": "1.0.0-beta.1",
     "@rjsf/core": "4.2.3",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-intl": "6.2.2"
   },
   "devDependencies": {
     "@formatjs/cli": "5.1.4",
-    "@types/react": "17.0.45",
-    "@types/react-dom": "17.0.17",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.9",
     "@typescript-eslint/eslint-plugin": "5.45.0",
     "@typescript-eslint/parser": "5.45.0",
     "@vitejs/plugin-react": "2.2.0",

examples/playground/src/main.tsx

@@ -1,19 +1,21 @@
 import { StrictMode } from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 import LocaleProvider from './providers/LocaleProvider';
 import TranslationProvider from './providers/TranslationProvider';
 
 async function render() {
-  ReactDOM.render(
+  const $container = document.getElementById('root');
+  const root = createRoot($container!);
+
+  root.render(
     <StrictMode>
       <LocaleProvider>
         <TranslationProvider>
           <App />
         </TranslationProvider>
       </LocaleProvider>
     </StrictMode>,
-    document.getElementById('root'),
   );
 }
 

examples/poll/package.json

@@ -19,17 +19,17 @@
     "@rjsf/core": "4.2.3",
     "grommet": "2.28.0",
     "grommet-icons": "4.8.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-intl": "6.2.2",
     "react-is": "18.2.0",
     "styled-components": "5.3.6",
     "uuid": "9.0.0"
   },
   "devDependencies": {
     "@babel/preset-react": "7.18.6",
-    "@types/react": "17.0.45",
-    "@types/react-dom": "17.0.17",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.9",
     "@types/styled-components": "5.1.26",
     "@typescript-eslint/eslint-plugin": "5.45.0",
     "@typescript-eslint/parser": "5.45.0",

examples/poll/src/components/Modal/AddQuestionModal.spec.tsx

@@ -2,7 +2,7 @@ import { useVerna, VernaForm, VernaProvider } from '@openfun/verna';
 import { VernaSchemaType } from '@openfun/verna/dist/types/rjsf';
 import { Maybe } from '@openfun/verna/dist/types/utils';
 import * as factories from '@openfun/verna/src/tests/mocks/factories';
-import { act, render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Suspense } from 'react';
 import { IntlProvider } from 'react-intl';
@@ -52,42 +52,36 @@ describe('AddQuestionModal', () => {
 
   beforeEach(() => {
     useVernaValue = undefined;
+    document.body.innerHTML = '';
   });
 
   it('should be able to add a widget from the list with correct type and name', async () => {
     render(<VernaSuspenseWrapper idParts={['root', 'testSection']} />);
 
     // Wait that the form is rendered...
-    await waitFor(() => {
-      expect(screen.queryByTestId('suspense-fallback')).toBeNull();
+    await waitFor(async () => {
+      expect(screen.queryByTestId('suspense-fallback')).not.toBeInTheDocument();
     });
-
     // Check that the modal is rendered
-    expect(screen.getByText('Select a type of question to add')).toBeInTheDocument();
+    await waitFor(async () => {
+      screen.getByText('Select a type of question to add');
+    });
 
     // Add a Multiple choice question field
-    await act(async () => {
-      await userEvent.click(screen.getByRole('button', { name: 'Open Drop' }));
-      await userEvent.click(screen.getByRole('option', { name: 'Single choice question' }));
-      await userEvent.click(screen.getByRole('button', { name: 'Add' }));
-    });
+    await userEvent.click(screen.getByRole('button', { name: 'Open Drop' }));
+    await userEvent.click(screen.getByRole('option', { name: 'Single choice question' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Add' }));
 
     // Open parameters of the newly created field and add an option
-    await act(async () => {
-      await userEvent.click(screen.getAllByRole('button', { name: 'Parameters' })[3]);
-      await userEvent.click(screen.getAllByRole('button', { name: 'Add' })[0]);
-      await userEvent.type(screen.getAllByRole('textbox', {})[1], 'test');
-    });
+    await userEvent.click(screen.getAllByRole('button', { name: 'Parameters' })[3]);
+    await userEvent.click(screen.getAllByRole('button', { name: 'Add' })[0]);
+    await userEvent.type(screen.getAllByRole('textbox', {})[1], 'test');
 
     // Save parameters
-    await act(async () => {
-      await userEvent.click(screen.getByRole('button', { name: 'save' }));
-    });
+    await userEvent.click(screen.getByRole('button', { name: 'save' }));
 
     // Reopen parameters
-    await act(async () => {
-      await userEvent.click(screen.getAllByRole('button', { name: 'Parameters' })[3]);
-    });
+    await userEvent.click(screen.getAllByRole('button', { name: 'Parameters' })[3]);
 
     expect(screen.getAllByRole('textbox', {})[1]).toHaveValue('test');
   });
@@ -101,11 +95,9 @@ describe('AddQuestionModal', () => {
     });
 
     // Add a Multiple choice question field
-    await act(async () => {
-      await userEvent.click(screen.getByRole('button', { name: 'Open Drop' }));
-      await userEvent.click(screen.getByRole('option', { name: 'Single choice question' }));
-      await userEvent.click(screen.getByRole('button', { name: 'Add' }));
-    });
+    await userEvent.click(screen.getByRole('button', { name: 'Open Drop' }));
+    await userEvent.click(screen.getByRole('option', { name: 'Single choice question' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Add' }));
 
     // Check that the newly created widget is well initialized
     const { formSchema, uiSchema } = useVernaValue!;

examples/poll/src/main.tsx

@@ -1,10 +1,12 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
 import AppWrapper from ':/AppWrapper';
 
-ReactDOM.render(
-  <React.StrictMode>
+const $container = document.getElementById('root');
+const root = createRoot($container!);
+
+root.render(
+  <StrictMode>
     <AppWrapper />
-  </React.StrictMode>,
-  document.getElementById('root'),
+  </StrictMode>,
 );

lib/package.json

@@ -2,7 +2,11 @@
   "name": "@openfun/verna",
   "version": "1.0.0-beta.1",
   "private": false,
-  "keywords": ["react", "form", "json-schema"],
+  "keywords": [
+    "react",
+    "form",
+    "json-schema"
+  ],
   "description": "An extensible form builder based on React JSON Schema Form.",
   "scripts": {
     "build": "tsc && vite build",
@@ -44,9 +48,9 @@
     "uuid": "9.0.0"
   },
   "peerDependencies": {
-    "react": ">=17.0.2<18",
-    "react-dom": ">=17.0.2<18",
-    "react-intl": ">=5.25.1"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-intl": "6.2.2"
   },
   "files": [
     "dist"
@@ -59,12 +63,12 @@
     "@formatjs/cli": "5.1.4",
     "@testing-library/dom": "8.19.0",
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "12.1.4",
+    "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.4.3",
     "@types/jest": "29.2.3",
     "@types/lodash": "4.14.190",
-    "@types/react": "17.0.45",
-    "@types/react-dom": "17.0.17",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.9",
     "@types/uuid": "9.0.0",
     "@typescript-eslint/eslint-plugin": "5.45.0",
     "@typescript-eslint/parser": "5.45.0",
@@ -80,8 +84,8 @@
     "jest": "29.3.1",
     "jest-environment-jsdom": "29.3.1",
     "prettier": "2.8.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-intl": "6.2.2",
     "rollup": "3.5.0",
     "tslib": "2.4.1",

renovate.json

@@ -3,12 +3,7 @@
     "github>openfun/renovate-configuration"
   ],
   "ignoreDeps": [
-    "@testing-library/react",
-    "@types/react",
-    "@types/react-dom",
     "node",
-    "react",
-    "react-dom",
     "typescript"
   ],
   "ignorePaths": ["**/node_modules/**"]