Merge pull request #3085 from Bogomil-Stoyanov/uepr63-react-18

refactor: [UEPR-63] Upgrade to React 18

package.json

@@ -33,16 +33,16 @@
     "prop-types": "^15.5.10"
   },
   "peerDependencies": {
-    "react": "^16",
-    "react-dom": "^16",
+    "react": "^18",
+    "react-dom": "^18",
     "react-intl": "^6",
     "react-intl-redux": "^0.7 || ^2.0.0",
     "react-popover": "^0.5",
-    "react-redux": "^5",
-    "react-responsive": "^5",
+    "react-redux": "^8",
+    "react-responsive": "^9",
     "react-style-proptype": "^3",
     "react-tooltip": "^4",
-    "redux": "^3",
+    "redux": "^4",
     "scratch-render-fonts": "^1.0.0"
   },
   "devDependencies": {
@@ -53,6 +53,7 @@
     "@babel/preset-react": "7.24.7",
     "@commitlint/cli": "17.8.1",
     "@commitlint/config-conventional": "17.8.1",
+    "@testing-library/react": "8.0.0",
     "autoprefixer": "9.8.8",
     "babel-eslint": "10.1.0",
     "babel-jest": "29.7.0",
@@ -61,8 +62,6 @@
     "babel-plugin-transform-object-rest-spread": "6.26.0",
     "canvas": "2.11.2",
     "css-loader": "3.6.0",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.8",
     "eslint": "8.57.1",
     "eslint-config-scratch": "9.0.9",
     "eslint-plugin-import": "2.30.0",
@@ -79,28 +78,17 @@
     "postcss-loader": "3.0.0",
     "postcss-simple-vars": "5.0.2",
     "raf": "3.4.1",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-intl": "^6.6.8",
-    "react-intl-redux": "2.4.1",
-    "react-popover": "0.5.10",
-    "react-redux": "5.1.2",
-    "react-responsive": "5.0.0",
-    "react-style-proptype": "3.2.2",
-    "react-test-renderer": "16.14.0",
-    "react-tooltip": "4.5.1",
-    "redux": "3.7.2",
-    "redux-mock-store": "1.5.4",
+    "react-test-renderer": "18.2.0",
+    "redux-mock-store": "1.5.5",
     "redux-throttle": "0.1.1",
     "regenerator-runtime": "0.13.9",
     "rimraf": "2.7.1",
     "scratch-l10n": "3.18.313",
-    "scratch-render-fonts": "1.0.102",
     "scratch-semantic-release-config": "1.0.16",
     "semantic-release": "19.0.5",
     "style-loader": "1.3.0",
     "svg-url-loader": "3.0.3",
-    "tap": "14.11.0",
+    "tap": "^21.0.1",
     "uglifyjs-webpack-plugin": "2.2.0",
     "url-loader": "2.3.0",
     "webpack": "4.47.0",
@@ -114,9 +102,9 @@
   },
   "jest": {
     "setupFiles": [
-      "raf/polyfill",
-      "<rootDir>/test/helpers/enzyme-setup.js"
+      "raf/polyfill"
     ],
+    "testEnvironment": "jsdom",
     "testURL": "http://localhost",
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/__mocks__/fileMock.js",
@@ -134,4 +122,4 @@
     "Safari >= 8",
     "iOS >= 8"
   ]
-}
+}

src/playground/playground.jsx

@@ -182,10 +182,12 @@ class Playground extends React.Component {
     }
 
 }
-ReactDOM.render((
+
+const root = ReactDOM.createRoot(appTarget);
+root.render(
     <Provider store={store}>
         <IntlProvider>
             <Playground />
         </IntlProvider>
     </Provider>
-), appTarget);
+);

test/unit/components/button-click.test.jsx

@@ -1,17 +1,21 @@
 /* eslint-env jest */
-import React from 'react'; // eslint-disable-line no-unused-vars
-import {shallow} from 'enzyme';
-import Button from '../../../src/components/button/button.jsx'; // eslint-disable-line no-unused-vars, max-len
+/* eslint-disable no-unused-vars */
+
+import React from 'react';
+import {render, fireEvent} from '@testing-library/react';
+import Button from '../../../src/components/button/button.jsx';
 
 describe('Button', () => {
     test('triggers callback when clicked', () => {
         const onClick = jest.fn();
-        const componentShallowWrapper = shallow(
+        const {getByText} = render(
             <Button onClick={onClick}>
                 {'Button'}
             </Button>
         );
-        componentShallowWrapper.simulate('click');
+
+        const buttonElement = getByText('Button');
+        fireEvent.click(buttonElement);
         expect(onClick).toHaveBeenCalled();
     });
 });