Skip to content

Commit b311c21

Browse files
jbpenrathjbpenrath
committed
📌(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)
1 parent efa1c1e commit b311c21

File tree

9 files changed

+744
-1444
lines changed

9 files changed

+744
-1444
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ Versioning](https://semver.org/spec/v2.0.0.html).
1818

1919
- Add a poll builder example using Grommet library
2020

21+
### Changed
22+
23+
- Migrate to React 18
24+
2125
## [1.0.0-beta.0]
2226

2327
### Added

‎examples/playground/package.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,14 @@
1717
"dependencies": {
1818
"@openfun/verna": "1.0.0-beta.1",
1919
"@rjsf/core": "4.2.3",
20-
"react": "17.0.2",
21-
"react-dom": "17.0.2"
20+
"react": "18.2.0",
21+
"react-dom": "18.2.0",
22+
"react-intl": "6.2.2"
2223
},
2324
"devDependencies": {
2425
"@formatjs/cli": "5.1.4",
25-
"@types/react": "17.0.45",
26-
"@types/react-dom": "17.0.17",
26+
"@types/react": "18.0.26",
27+
"@types/react-dom": "18.0.9",
2728
"@typescript-eslint/eslint-plugin": "5.45.0",
2829
"@typescript-eslint/parser": "5.45.0",
2930
"@vitejs/plugin-react": "2.2.0",

‎examples/playground/src/main.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
import { StrictMode } from 'react';
2-
import ReactDOM from 'react-dom';
2+
import { createRoot } from 'react-dom/client';
33
import App from './App';
44
import LocaleProvider from './providers/LocaleProvider';
55
import TranslationProvider from './providers/TranslationProvider';
66

77
async function render() {
8-
ReactDOM.render(
8+
const $container = document.getElementById('root');
9+
const root = createRoot($container!);
10+
11+
root.render(
912
<StrictMode>
1013
<LocaleProvider>
1114
<TranslationProvider>
1215
<App />
1316
</TranslationProvider>
1417
</LocaleProvider>
1518
</StrictMode>,
16-
document.getElementById('root'),
1719
);
1820
}
1921

‎examples/poll/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,17 @@
1919
"@rjsf/core": "4.2.3",
2020
"grommet": "2.28.0",
2121
"grommet-icons": "4.8.0",
22-
"react": "17.0.2",
23-
"react-dom": "17.0.2",
22+
"react": "18.2.0",
23+
"react-dom": "18.2.0",
2424
"react-intl": "6.2.2",
2525
"react-is": "18.2.0",
2626
"styled-components": "5.3.6",
2727
"uuid": "9.0.0"
2828
},
2929
"devDependencies": {
3030
"@babel/preset-react": "7.18.6",
31-
"@types/react": "17.0.45",
32-
"@types/react-dom": "17.0.17",
31+
"@types/react": "18.0.26",
32+
"@types/react-dom": "18.0.9",
3333
"@types/styled-components": "5.1.26",
3434
"@typescript-eslint/eslint-plugin": "5.45.0",
3535
"@typescript-eslint/parser": "5.45.0",

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

Lines changed: 18 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useVerna, VernaForm, VernaProvider } from '@openfun/verna';
22
import { VernaSchemaType } from '@openfun/verna/dist/types/rjsf';
33
import { Maybe } from '@openfun/verna/dist/types/utils';
44
import * as factories from '@openfun/verna/src/tests/mocks/factories';
5-
import { act, render, screen, waitFor } from '@testing-library/react';
5+
import { render, screen, waitFor } from '@testing-library/react';
66
import userEvent from '@testing-library/user-event';
77
import { Suspense } from 'react';
88
import { IntlProvider } from 'react-intl';
@@ -52,42 +52,36 @@ describe('AddQuestionModal', () => {
5252

5353
beforeEach(() => {
5454
useVernaValue = undefined;
55+
document.body.innerHTML = '';
5556
});
5657

5758
it('should be able to add a widget from the list with correct type and name', async () => {
5859
render(<VernaSuspenseWrapper idParts={['root', 'testSection']} />);
5960

6061
// Wait that the form is rendered...
61-
await waitFor(() => {
62-
expect(screen.queryByTestId('suspense-fallback')).toBeNull();
62+
await waitFor(async () => {
63+
expect(screen.queryByTestId('suspense-fallback')).not.toBeInTheDocument();
6364
});
64-
6565
// Check that the modal is rendered
66-
expect(screen.getByText('Select a type of question to add')).toBeInTheDocument();
66+
await waitFor(async () => {
67+
screen.getByText('Select a type of question to add');
68+
});
6769

6870
// Add a Multiple choice question field
69-
await act(async () => {
70-
await userEvent.click(screen.getByRole('button', { name: 'Open Drop' }));
71-
await userEvent.click(screen.getByRole('option', { name: 'Single choice question' }));
72-
await userEvent.click(screen.getByRole('button', { name: 'Add' }));
73-
});
71+
await userEvent.click(screen.getByRole('button', { name: 'Open Drop' }));
72+
await userEvent.click(screen.getByRole('option', { name: 'Single choice question' }));
73+
await userEvent.click(screen.getByRole('button', { name: 'Add' }));
7474

7575
// Open parameters of the newly created field and add an option
76-
await act(async () => {
77-
await userEvent.click(screen.getAllByRole('button', { name: 'Parameters' })[3]);
78-
await userEvent.click(screen.getAllByRole('button', { name: 'Add' })[0]);
79-
await userEvent.type(screen.getAllByRole('textbox', {})[1], 'test');
80-
});
76+
await userEvent.click(screen.getAllByRole('button', { name: 'Parameters' })[3]);
77+
await userEvent.click(screen.getAllByRole('button', { name: 'Add' })[0]);
78+
await userEvent.type(screen.getAllByRole('textbox', {})[1], 'test');
8179

8280
// Save parameters
83-
await act(async () => {
84-
await userEvent.click(screen.getByRole('button', { name: 'save' }));
85-
});
81+
await userEvent.click(screen.getByRole('button', { name: 'save' }));
8682

8783
// Reopen parameters
88-
await act(async () => {
89-
await userEvent.click(screen.getAllByRole('button', { name: 'Parameters' })[3]);
90-
});
84+
await userEvent.click(screen.getAllByRole('button', { name: 'Parameters' })[3]);
9185

9286
expect(screen.getAllByRole('textbox', {})[1]).toHaveValue('test');
9387
});
@@ -101,11 +95,9 @@ describe('AddQuestionModal', () => {
10195
});
10296

10397
// Add a Multiple choice question field
104-
await act(async () => {
105-
await userEvent.click(screen.getByRole('button', { name: 'Open Drop' }));
106-
await userEvent.click(screen.getByRole('option', { name: 'Single choice question' }));
107-
await userEvent.click(screen.getByRole('button', { name: 'Add' }));
108-
});
98+
await userEvent.click(screen.getByRole('button', { name: 'Open Drop' }));
99+
await userEvent.click(screen.getByRole('option', { name: 'Single choice question' }));
100+
await userEvent.click(screen.getByRole('button', { name: 'Add' }));
109101

110102
// Check that the newly created widget is well initialized
111103
const { formSchema, uiSchema } = useVernaValue!;

‎examples/poll/src/main.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom';
1+
import { StrictMode } from 'react';
2+
import { createRoot } from 'react-dom/client';
33
import AppWrapper from ':/AppWrapper';
44

5-
ReactDOM.render(
6-
<React.StrictMode>
5+
const $container = document.getElementById('root');
6+
const root = createRoot($container!);
7+
8+
root.render(
9+
<StrictMode>
710
<AppWrapper />
8-
</React.StrictMode>,
9-
document.getElementById('root'),
11+
</StrictMode>,
1012
);

‎lib/package.json‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@
22
"name": "@openfun/verna",
33
"version": "1.0.0-beta.1",
44
"private": false,
5-
"keywords": ["react", "form", "json-schema"],
5+
"keywords": [
6+
"react",
7+
"form",
8+
"json-schema"
9+
],
610
"description": "An extensible form builder based on React JSON Schema Form.",
711
"scripts": {
812
"build": "tsc && vite build",
@@ -44,9 +48,9 @@
4448
"uuid": "9.0.0"
4549
},
4650
"peerDependencies": {
47-
"react": ">=17.0.2<18",
48-
"react-dom": ">=17.0.2<18",
49-
"react-intl": ">=5.25.1"
51+
"react": "18.2.0",
52+
"react-dom": "18.2.0",
53+
"react-intl": "6.2.2"
5054
},
5155
"files": [
5256
"dist"
@@ -59,12 +63,12 @@
5963
"@formatjs/cli": "5.1.4",
6064
"@testing-library/dom": "8.19.0",
6165
"@testing-library/jest-dom": "5.16.5",
62-
"@testing-library/react": "12.1.4",
66+
"@testing-library/react": "13.4.0",
6367
"@testing-library/user-event": "14.4.3",
6468
"@types/jest": "29.2.3",
6569
"@types/lodash": "4.14.190",
66-
"@types/react": "17.0.45",
67-
"@types/react-dom": "17.0.17",
70+
"@types/react": "18.0.26",
71+
"@types/react-dom": "18.0.9",
6872
"@types/uuid": "9.0.0",
6973
"@typescript-eslint/eslint-plugin": "5.45.0",
7074
"@typescript-eslint/parser": "5.45.0",
@@ -80,8 +84,8 @@
8084
"jest": "29.3.1",
8185
"jest-environment-jsdom": "29.3.1",
8286
"prettier": "2.8.0",
83-
"react": "17.0.2",
84-
"react-dom": "17.0.2",
87+
"react": "18.2.0",
88+
"react-dom": "18.2.0",
8589
"react-intl": "6.2.2",
8690
"rollup": "3.5.0",
8791
"tslib": "2.4.1",

‎renovate.json‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,7 @@
33
"github>openfun/renovate-configuration"
44
],
55
"ignoreDeps": [
6-
"@testing-library/react",
7-
"@types/react",
8-
"@types/react-dom",
96
"node",
10-
"react",
11-
"react-dom",
127
"typescript"
138
],
149
"ignorePaths": ["**/node_modules/**"]

0 commit comments

Comments
 (0)