Update react from version 17 to version 18 and update all developme…

…nt dependencies excluding `webpack-cli`, `stylelint` and `sinon`, fix failing tests caused by breaking changes in testing libraries (#358, #478)
react-ui-org · Sep 6, 2023 · 94c24aa · 94c24aa
1 parent 1bcf673
commit 94c24aa
Show file tree

Hide file tree

Showing 20 changed files with 4,058 additions and 15,140 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -14,8 +14,8 @@ module.exports = {
     '<rootDir>/tests/setupTestingLibrary.js',
   ],
   testEnvironment: 'jsdom',
-  verbose: true,
   transformIgnorePatterns: [
-    'node_modules/(?!(@react-ui-org))'
+    'node_modules/(?!(@react-ui-org))',
   ],
+  verbose: true,
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -50,51 +50,51 @@
     "normalize.css": "^8.0.1"
   },
   "peerDependencies": {
-    "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "prop-types": "^15.8.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.5",
-    "@babel/eslint-parser": "^7.17.0",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-transform-spread": "^7.16.7",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/register": "^7.17.0",
-    "@svgr/webpack": "^6.2.1",
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.3",
-    "@testing-library/user-event": "^13.5.0",
-    "@visionappscz/eslint-config-visionapps": "^1.5.0",
+    "@babel/cli": "^7.22.10",
+    "@babel/core": "^7.22.11",
+    "@babel/eslint-parser": "^7.22.11",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-transform-spread": "^7.22.5",
+    "@babel/preset-env": "^7.22.14",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/register": "^7.22.5",
+    "@svgr/webpack": "^8.1.0",
+    "@testing-library/jest-dom": "^6.1.2",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@visionappscz/eslint-config-visionapps": "^1.7.0",
     "@visionappscz/stylelint-config": "^3.0.0",
-    "autoprefixer": "^10.4.2",
-    "babel-jest": "^28.1.0",
-    "babel-loader": "^8.2.3",
-    "core-js": "^3.21.1",
-    "css-loader": "^6.7.1",
-    "eslint": "^8.17.0",
+    "autoprefixer": "^10.4.15",
+    "babel-jest": "^29.6.4",
+    "babel-loader": "^9.1.3",
+    "core-js": "^3.32.1",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.48.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-markdown": "^2.2.1",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-markdown": "^3.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^28.1.0",
-    "jest-environment-jsdom": "^28.1.0",
-    "markdownlint-cli2": "~0.4.0",
-    "mini-css-extract-plugin": "^2.6.1",
-    "postcss": "^8.4.6",
-    "postcss-loader": "^7.0.0",
+    "jest": "^29.6.4",
+    "jest-environment-jsdom": "^29.6.4",
+    "markdownlint-cli2": "~0.9.2",
+    "mini-css-extract-plugin": "^2.7.6",
+    "postcss": "^8.4.29",
+    "postcss-loader": "^7.3.3",
     "prop-types": "^15.8.1",
-    "sass": "^1.49.8",
-    "sass-loader": "^13.0.0",
-    "sinon": "^14.0.0",
-    "stylelint": "^14.5.3",
-    "stylelint-webpack-plugin": "^3.1.1",
-    "terser-webpack-plugin": "^5.3.1",
+    "sass": "^1.66.1",
+    "sass-loader": "^13.3.2",
+    "sinon": "^14.0.2",
+    "stylelint": "^14.16.1",
+    "stylelint-webpack-plugin": "^4.1.1",
+    "terser-webpack-plugin": "^5.3.9",
     "webpack": "^5.69.1",
     "webpack-cli": "^4.9.2",
     "webpack-visualizer-plugin2": "^1.0.0"

diff --git a/src/components/Alert/__tests__/Alert.test.jsx b/src/components/Alert/__tests__/Alert.test.jsx
@@ -50,7 +50,7 @@ describe('rendering', () => {
 });
 
 describe('functionality', () => {
-  it('calls onClose() on Close button click', () => {
+  it('calls onClose() on Close button click', async () => {
     const spy = sinon.spy();
     render((
       <Alert
@@ -59,7 +59,7 @@ describe('functionality', () => {
       />
     ));
 
-    userEvent.click(screen.getByTitle('Close'));
+    await userEvent.click(screen.getByTitle('Close'));
     expect(spy.calledOnce).toEqual(true);
   });
 });
diff --git a/src/components/Badge/README.md b/src/components/Badge/README.md
@@ -37,8 +37,6 @@ All priorities come in supported
 High-emphasis priority to draw user's attention.
 
 ```docoff-react-preview
-<Badge label="1" color="primary" />
-<Badge label="2" color="secondary" />
 <Badge label="3" color="success" />
 <Badge label="4" color="warning" />
 <Badge label="5" color="danger" />
@@ -50,8 +48,6 @@ High-emphasis priority to draw user's attention.
 ```
 
 ```docoff-react-preview
-<Badge label="Primary" color="primary" />
-<Badge label="Secondary" color="secondary" />
 <Badge label="Success" color="success" />
 <Badge label="Warning" color="warning" />
 <Badge label="Danger" color="danger" />
@@ -67,8 +63,6 @@ High-emphasis priority to draw user's attention.
 Medium-emphasis priority to provide additional context in an unobtrusive way.
 
 ```docoff-react-preview
-<Badge priority="outline" label="1" color="primary" />
-<Badge priority="outline" label="2" color="secondary" />
 <Badge priority="outline" label="3" color="success" />
 <Badge priority="outline" label="4" color="warning" />
 <Badge priority="outline" label="5" color="danger" />
@@ -80,8 +74,6 @@ Medium-emphasis priority to provide additional context in an unobtrusive way.
 ```
 
 ```docoff-react-preview
-<Badge priority="outline" label="Primary" color="primary" />
-<Badge priority="outline" label="Secondary" color="secondary" />
 <Badge priority="outline" label="Success" color="success" />
 <Badge priority="outline" label="Warning" color="warning" />
 <Badge priority="outline" label="Danger" color="danger" />

diff --git a/src/components/Button/__tests__/Button.test.jsx b/src/components/Button/__tests__/Button.test.jsx
@@ -156,7 +156,7 @@ describe('rendering', () => {
 });
 
 describe('functionality', () => {
-  it('calls synthetic event onClick()', () => {
+  it('calls synthetic event onClick()', async () => {
     const spy = sinon.spy();
     render((
       <Button
@@ -165,7 +165,7 @@ describe('functionality', () => {
       />
     ));
 
-    userEvent.click(screen.getByText('label'));
+    await userEvent.click(screen.getByText('label'));
     expect(spy.calledOnce).toEqual(true);
   });
 });
diff --git a/src/components/CheckboxField/__tests__/CheckboxField.test.jsx b/src/components/CheckboxField/__tests__/CheckboxField.test.jsx
@@ -60,7 +60,7 @@ describe('rendering', () => {
 });
 
 describe('functionality', () => {
-  it('calls synthetic event onChange()', () => {
+  it('calls synthetic event onChange()', async () => {
     const spy = sinon.spy();
     render((
       <CheckboxField
@@ -69,7 +69,7 @@ describe('functionality', () => {
       />
     ));
 
-    userEvent.click(screen.getByLabelText('label'));
+    await userEvent.click(screen.getByLabelText('label'));
     expect(spy.calledOnce).toEqual(true);
   });
 });

diff --git a/src/components/FileInputField/__tests__/FileInputField.test.jsx b/src/components/FileInputField/__tests__/FileInputField.test.jsx
@@ -64,7 +64,7 @@ describe('rendering', () => {
 });
 
 describe('functionality', () => {
-  it('calls synthetic event onChange()', () => {
+  it('calls synthetic event onChange()', async () => {
     const spy = sinon.spy();
     render((
       <FileInputField
@@ -74,7 +74,7 @@ describe('functionality', () => {
     ));
 
     const file = new File(['hello'], 'hello.png', { type: 'image/png' });
-    userEvent.upload(screen.getByLabelText('label'), file);
+    await userEvent.upload(screen.getByLabelText('label'), file);
     expect(spy.calledOnce).toEqual(true);
   });
 });
diff --git a/src/components/Modal/__tests__/Modal.test.jsx b/src/components/Modal/__tests__/Modal.test.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import sinon from 'sinon';
 import {
   render,
@@ -76,9 +77,9 @@ describe('rendering', () => {
 
 describe('functionality', () => {
   it.each([
-    () => userEvent.keyboard('{esc}'),
+    () => userEvent.keyboard('{Escape}'),
     () => userEvent.click(screen.getByTestId('id').parentNode),
-  ])('call close modal using `closeButtonRef` (%#)', (action) => {
+  ])('call close modal using `closeButtonRef` (%#)', async (action) => {
     const spy = sinon.spy();
     const ref = React.createRef();
     render((
@@ -97,14 +98,14 @@ describe('functionality', () => {
       </Modal>
     ));
 
-    action();
+    await action();
     expect(spy.calledOnce).toEqual(true);
   });
 
   it.each([
-    () => userEvent.keyboard('{esc}'),
+    () => userEvent.keyboard('{Escape}'),
     () => userEvent.click(screen.getByTestId('id').parentNode),
-  ])('do not call close modal using `closeButtonRef` when button is disabled (%#)', (action) => {
+  ])('do not call close modal using `closeButtonRef` when button is disabled (%#)', async (action) => {
     const spy = sinon.spy();
     const ref = React.createRef();
     render((
@@ -124,14 +125,14 @@ describe('functionality', () => {
       </Modal>
     ));
 
-    action();
+    await action();
     expect(spy.called).toEqual(false);
   });
 
   it.each([
-    () => userEvent.keyboard('{esc}'),
+    () => userEvent.keyboard('{Escape}'),
     () => userEvent.click(screen.getByTestId('id').parentNode),
-  ])('call close modal using `closeButtonRef` and `ModalCloseButton` (%#)', (action) => {
+  ])('call close modal using `closeButtonRef` and `ModalCloseButton` (%#)', async (action) => {
     const spy = sinon.spy();
     const ref = React.createRef();
     render((
@@ -148,14 +149,14 @@ describe('functionality', () => {
       </Modal>
     ));
 
-    action();
+    await action();
     expect(spy.calledOnce).toEqual(true);
   });
 
   it.each([
-    () => userEvent.keyboard('{esc}'),
+    () => userEvent.keyboard('{Escape}'),
     () => userEvent.click(screen.getByTestId('id').parentNode),
-  ])('do not call close modal using `closeButtonRef` and `ModalCloseButton` when button is disabled (%#)', (action) => {
+  ])('do not call close modal using `closeButtonRef` and `ModalCloseButton` when button is disabled (%#)', async (action) => {
     const spy = sinon.spy();
     const ref = React.createRef();
     render((
@@ -173,11 +174,11 @@ describe('functionality', () => {
       </Modal>
     ));
 
-    action();
+    await action();
     expect(spy.called).toEqual(false);
   });
 
-  it('call primary action using `primaryButtonRef`', () => {
+  it('call primary action using `primaryButtonRef`', async () => {
     const spy = sinon.spy();
     const ref = React.createRef();
     render((
@@ -196,11 +197,11 @@ describe('functionality', () => {
       </Modal>
     ));
 
-    userEvent.keyboard('{enter}');
-    expect(spy.calledOnce).toEqual(true);
+    await userEvent.keyboard('{Enter}');
+    await expect(spy.calledOnce).toEqual(true);
   });
 
-  it('do not call primary action using `primaryButtonRef when button is disabled', () => {
+  it('do not call primary action using `primaryButtonRef when button is disabled', async () => {
     const spy = sinon.spy();
     const ref = React.createRef();
     render((
@@ -220,7 +221,7 @@ describe('functionality', () => {
       </Modal>
     ));
 
-    userEvent.keyboard('{enter}');
+    await userEvent.keyboard('{enter}');
     expect(spy.called).toEqual(false);
   });
 
@@ -365,7 +366,7 @@ describe('functionality', () => {
     assertFocus(el, true);
   });
 
-  it('traps focus', () => {
+  it('traps focus', async () => {
     const { container } = render((
       <Modal>
         <ModalBody>
@@ -381,11 +382,11 @@ describe('functionality', () => {
     const secondEl = within(container).getByTestId('second');
 
     assertFocus(firstEl, true);
-    userEvent.tab();
+    await userEvent.tab();
     assertFocus(secondEl, true);
-    userEvent.tab();
+    await userEvent.tab();
     assertFocus(firstEl, true);
-    userEvent.tab({ shift: true });
+    await userEvent.tab({ shift: true });
     assertFocus(secondEl, true);
   });
 
@@ -437,10 +438,14 @@ describe('functionality', () => {
 
     const button = within(container).getByTestId('button');
 
-    button.click();
+    await act(async () => {
+      await button.click();
+    });
     expect(within(container).getByTestId('layout')).toHaveStyle('overflow: hidden');
 
-    button.click();
+    await act(async () => {
+      await button.click();
+    });
     expect(within(container).getByTestId('layout')).toHaveStyle('overflow: auto');
   });
 });
diff --git a/src/components/Modal/__tests__/ModalCloseButton.test.jsx b/src/components/Modal/__tests__/ModalCloseButton.test.jsx
@@ -27,15 +27,15 @@ describe('rendering', () => {
 });
 
 describe('functionality', () => {
-  it('calls synthetic event onClick()', () => {
+  it('calls synthetic event onClick()', async () => {
     const spy = sinon.spy();
     render((
       <ModalCloseButton
         onClick={spy}
       />
     ));
 
-    userEvent.click(screen.getByRole('button'));
+    await userEvent.click(screen.getByRole('button'));
     expect(spy.calledOnce).toEqual(true);
   });
 });

diff --git a/src/components/Radio/__tests__/Radio.test.jsx b/src/components/Radio/__tests__/Radio.test.jsx
@@ -114,7 +114,7 @@ describe('rendering', () => {
 });
 
 describe('functionality', () => {
-  it('calls synthetic event onChange()', () => {
+  it('calls synthetic event onChange()', async () => {
     const spy = sinon.spy();
     render((
       <Radio
@@ -123,7 +123,7 @@ describe('functionality', () => {
       />
     ));
 
-    userEvent.click(screen.getByText('option 1'));
+    await userEvent.click(screen.getByText('option 1'));
     expect(spy.calledOnce).toEqual(true);
   });
 });