Merge pull request #420 from iCHEF/feat/upgrade-react-v18

feat: upgrade React to v18
iCHEF · Dec 19, 2023 · a3439b8 · a3439b8
2 parents 50c9b26 + c2d9b9e
commit a3439b8
Show file tree

Hide file tree

Showing 53 changed files with 478 additions and 500 deletions.
diff --git a/README.md b/README.md
@@ -23,22 +23,21 @@ Here is a quick example to get you started:
 **./App.js**
 ```jsx
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import CustomComponent from './CustomComponent';
 
 import '@ichef/gypcrete/dist/gypcrete.css';
 
 const App = () => (
-    <div>
-        <CustomComponent />
-    </div>
+  <div>
+    <CustomComponent />
+  </div>
 );
 
-ReactDOM.render(
-    <App />,
-    document.getElementById('app')
-);
+const container = document.getElementById('app');
+const root = createRoot(container);
+root.render(<App />);
 ```
 
 **./CustomComponent.js**

diff --git a/configs/jestSetup.js b/configs/jestSetup.js
@@ -1,6 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import Enzyme from 'enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Adapter from '@cfaester/enzyme-adapter-react-18';
 import '@testing-library/jest-dom';
 
 Enzyme.configure({ adapter: new Adapter() });
diff --git a/package.json b/package.json
@@ -35,14 +35,14 @@
     "@babel/plugin-proposal-class-properties": "^7.4.4",
     "@babel/plugin-transform-runtime": "^7.4.4",
     "@babel/preset-env": "^7.4.4",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-react": "^7.23.3",
     "@babel/runtime": "^7.4.4",
     "@babel/runtime-corejs3": "^7.4.4",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.5.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
+    "@cfaester/enzyme-adapter-react-18": "^0.7.1",
     "autoprefixer": "^9.6.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
@@ -54,7 +54,7 @@
     "core-js": "^3.1.1",
     "coveralls": "^3.0.0",
     "css-loader": "^6.8.1",
-    "enzyme": "^3.7.0",
+    "enzyme": "^3.11.0",
     "eslint": "7.8",
     "eslint-config-airbnb": "18.2",
     "eslint-config-ichef": "8.0",
@@ -72,9 +72,9 @@
     "mini-css-extract-plugin": "^2.7.6",
     "postcss-loader": "^7.3.3",
     "prop-types": "^15.6.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-test-renderer": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
     "style-loader": "^3.3.3",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -33,8 +33,8 @@
   "peerDependencies": {
     "@babel/runtime-corejs3": "^7.4.4",
     "prop-types": "^15.5.8",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "dependencies": {
     "classnames": "^2.2.5",
@@ -48,11 +48,11 @@
   "devDependencies": {
     "@babel/cli": "^7.4.4",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.5.0",
-    "enzyme": "^3.7.0",
-    "react-is": "^17.0.2",
+    "enzyme": "^3.11.0",
+    "react-is": "^18.2.0",
     "webpack": "^5.89.0",
     "webpack-merge": "^4.1.2"
   }

diff --git a/packages/core/src/__tests__/Avatar.test.js b/packages/core/src/__tests__/Avatar.test.js
@@ -1,15 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from '@testing-library/react';
 import { shallow } from 'enzyme';
 
 import Avatar from '../Avatar';
 
 describe('<Avatar>', () => {
   it('renders without crashing', () => {
-    const div = document.createElement('div');
     const element = <Avatar src="LINK" alt="ALT" />;
 
-    ReactDOM.render(element, div);
+    render(element);
   });
 
   it('handles type modifiers', () => {

diff --git a/packages/core/src/__tests__/BasicRow.test.js b/packages/core/src/__tests__/BasicRow.test.js
@@ -1,21 +1,20 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from '@testing-library/react';
 import { shallow } from 'enzyme';
 
 import BasicRow from '../BasicRow';
 import StatusIcon from '../StatusIcon';
 import Tag from '../Tag';
 
 it('renders without crashing', () => {
-  const div = document.createElement('div');
   const element = (
     <BasicRow
       basic="Basic text"
       tag="Tag"
     />
   );
 
-  ReactDOM.render(element, div);
+  render(element);
 });
 
 it('renders with only Basic text', () => {

diff --git a/packages/core/src/__tests__/Button.test.js b/packages/core/src/__tests__/Button.test.js
@@ -1,15 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from '@testing-library/react';
 import { shallow } from 'enzyme';
 
 import Button, { PureButton } from '../Button';
 
 describe('rowComp(Button)', () => {
   it('renders without crashing', () => {
-    const div = document.createElement('div');
     const element = <Button basic="label" />;
 
-    ReactDOM.render(element, div);
+    render(element);
   });
 
   it('is minified by default', () => {

diff --git a/packages/core/src/__tests__/Checkbox.test.js b/packages/core/src/__tests__/Checkbox.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from '@testing-library/react';
 import { shallow, mount } from 'enzyme';
 
 import Checkbox, { PureCheckbox, BEM } from '../Checkbox';
@@ -10,10 +10,9 @@ function BarButton() {
 
 describe('rowComp(Checkbox)', () => {
   it('renders without crashing', () => {
-    const div = document.createElement('div');
     const element = <Checkbox basic="Basic text" />;
 
-    ReactDOM.render(element, div);
+    render(element);
   });
 });
 

diff --git a/packages/core/src/__tests__/ColumnView.test.js b/packages/core/src/__tests__/ColumnView.test.js
@@ -1,15 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from '@testing-library/react';
 import { shallow } from 'enzyme';
 
 import ColumnView, { BEM as COLUMN_BEM } from '../ColumnView';
 
 describe('<ColumnView>', () => {
   it('renders without crashing', () => {
-    const div = document.createElement('div');
     const element = <ColumnView>Foo bar</ColumnView>;
 
-    ReactDOM.render(element, div);
+    render(element);
   });
 
   it('renders childen in a body wrapper', () => {

diff --git a/packages/core/src/__tests__/EditableText.test.js b/packages/core/src/__tests__/EditableText.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from '@testing-library/react';
 import { shallow } from 'enzyme';
 
 import EditableBasicRow from '../EditableBasicRow';
@@ -8,10 +8,9 @@ import { PureText } from '../Text';
 
 describe('withStatus(EditableText)', () => {
   it('renders without crashing', () => {
-    const div = document.createElement('div');
     const element = <EditableText />;
 
-    ReactDOM.render(element, div);
+    render(element);
   });
 });
 

diff --git a/packages/core/src/__tests__/FlexCell.test.js b/packages/core/src/__tests__/FlexCell.test.js
@@ -1,14 +1,13 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from '@testing-library/react';
 import FlexCell from '../FlexCell';
 
 it('renders without crashing', () => {
-  const div = document.createElement('div');
   const element = (
     <FlexCell>
       <h1>Hello World</h1>
     </FlexCell>
   );
 
-  ReactDOM.render(element, div);
+  render(element);
 });
diff --git a/packages/core/src/__tests__/HeaderRow.test.js b/packages/core/src/__tests__/HeaderRow.test.js
@@ -1,14 +1,13 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from '@testing-library/react';
 import { shallow } from 'enzyme';
 
 import HeaderRow, { HeaderArea } from '../HeaderRow';
 
 it('renders without crashing', () => {
-  const div = document.createElement('div');
   const element = <HeaderRow left="Left" center="Title" right="Right" />;
 
-  ReactDOM.render(element, div);
+  render(element);
 });
 
 describe('<HeaderArea> helper component', () => {

diff --git a/packages/core/src/__tests__/Icon.test.js b/packages/core/src/__tests__/Icon.test.js
@@ -1,10 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from '@testing-library/react';
 import Icon from '../Icon';
 
 it('renders without crashing', () => {
-  const div = document.createElement('div');
   const element = <Icon type="duplicate" />;
 
-  ReactDOM.render(element, div);
+  render(element);
 });
diff --git a/packages/core/src/__tests__/IconButton.test.js b/packages/core/src/__tests__/IconButton.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from '@testing-library/react';
 import { shallow } from 'enzyme';
 
 import Button from '../Button';
@@ -8,10 +8,9 @@ import IconLayout from '../IconLayout';
 
 describe('<IconButton>', () => {
   it('renders without crashing', () => {
-    const div = document.createElement('div');
     const element = <IconButton icon="printer" status="loading" />;
 
-    ReactDOM.render(element, div);
+    render(element);
   });
 
   it('renders as a custom-configured variant of <Button>', () => {

diff --git a/packages/core/src/__tests__/IconCheckbox.test.js b/packages/core/src/__tests__/IconCheckbox.test.js
@@ -1,16 +1,15 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from '@testing-library/react';
 import { shallow } from 'enzyme';
 
 import Checkbox, { CHECKBOX_BUTTON } from '../Checkbox';
 import IconCheckbox from '../IconCheckbox';
 import IconLayout from '../IconLayout';
 
 it('renders without crashing', () => {
-  const div = document.createElement('div');
   const element = <IconCheckbox status="loading" />;
 
-  ReactDOM.render(element, div);
+  render(element);
 });
 
 it('renders as a custom-configured, minified variant of <Checkbox>', () => {

diff --git a/packages/core/src/__tests__/IconLayout.test.js b/packages/core/src/__tests__/IconLayout.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from '@testing-library/react';
 import { shallow } from 'enzyme';
 
 import Tooltip from '../Tooltip';
@@ -9,10 +9,9 @@ import StatusIcon from '../StatusIcon';
 
 describe('<withStatus(IconLayout)>', () => {
   it('renders without crashing', () => {
-    const div = document.createElement('div');
     const element = <IconLayout icon="printer" />;
 
-    ReactDOM.render(element, div);
+    render(element);
   });
 
   it('receives props from withStatus() mixin', () => {

diff --git a/packages/core/src/__tests__/InfiniteScroll.test.js b/packages/core/src/__tests__/InfiniteScroll.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from '@testing-library/react';
 import { shallow, mount } from 'enzyme';
 
 import InfiniteScroll, { BEM } from '../InfiniteScroll';
@@ -18,14 +18,13 @@ const FAKE_LIST = (
 
 describe('InfiniteScroll', () => {
   it('renders without crashing', () => {
-    const div = document.createElement('div');
     const element = (
       <InfiniteScroll onLoadMore={() => {}}>
         {FAKE_LIST}
       </InfiniteScroll>
     );
 
-    ReactDOM.render(element, div);
+    render(element);
   });
 
   // -------------------------------------

diff --git a/packages/core/src/__tests__/List.test.js b/packages/core/src/__tests__/List.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from '@testing-library/react';
 import { shallow, mount } from 'enzyme';
 
 import List from '../List';
@@ -8,10 +8,9 @@ import Section from '../Section';
 import ListSpacingContext from '../contexts/listSpacing';
 
 it('renders without crashing', () => {
-  const div = document.createElement('div');
   const element = <List title="Title">Hello world</List>;
 
-  ReactDOM.render(element, div);
+  render(element);
 });
 
 it('consumes context to render a <Section> with spacing configs', () => {

diff --git a/packages/core/src/__tests__/ListRow.test.js b/packages/core/src/__tests__/ListRow.test.js
@@ -1,15 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from '@testing-library/react';
 import { shallow } from 'enzyme';
 
 import ListRow, { BEM as ROW_BEM } from '../ListRow';
 import ListSpacingContext from '../contexts/listSpacing';
 
 it('renders without crashing', () => {
-  const div = document.createElement('div');
   const element = <ListRow>Hello world</ListRow>;
 
-  ReactDOM.render(element, div);
+  render(element);
 });
 
 it('renders a <li> element with class name of root wrapper', () => {