diff --git a/README.md b/README.md index 3dfb9753..5aab6a4b 100644 --- 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 = () => ( -
- -
+
+ +
); -ReactDOM.render( - , - document.getElementById('app') -); +const container = document.getElementById('app'); +const root = createRoot(container); +root.render(); ``` **./CustomComponent.js** diff --git a/configs/jestSetup.js b/configs/jestSetup.js index a7e5d1a4..4e74ed43 100644 --- 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 index 51a65e65..98fcbb40 100644 --- 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 index dac873cf..b55a974b 100644 --- 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 index 3fd3905f..bfdd98da 100644 --- 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('', () => { it('renders without crashing', () => { - const div = document.createElement('div'); const element = ; - 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 index 5ea83e4e..cea76466 100644 --- a/packages/core/src/__tests__/BasicRow.test.js +++ b/packages/core/src/__tests__/BasicRow.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 BasicRow from '../BasicRow'; @@ -7,7 +7,6 @@ import StatusIcon from '../StatusIcon'; import Tag from '../Tag'; it('renders without crashing', () => { - const div = document.createElement('div'); const element = ( { /> ); - 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 index ed3a0137..c9d131fd 100644 --- 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 =