test: Upgrade react to 18 on branch smartshift-thomasuster-1690307212

docs/package.json

@@ -2,9 +2,9 @@
   "name": "docs",
   "devDependencies": {
     "@reduxjs/toolkit": "^1.9.0",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^14.0.0",
     "msw": "^0.49.2",
     "react": "^18.2.0",
-    "react-redux": "^8.0.5"
+    "react-redux": "^8.1.1"
   }
 }

docs/yarn.lock

@@ -121,33 +121,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:^8.5.0":
-  version: 8.20.0
-  resolution: "@testing-library/dom@npm:8.20.0"
+"@testing-library/dom@npm:^9.0.0":
+  version: 9.3.1
+  resolution: "@testing-library/dom@npm:9.3.1"
   dependencies:
     "@babel/code-frame": ^7.10.4
     "@babel/runtime": ^7.12.5
     "@types/aria-query": ^5.0.1
-    aria-query: ^5.0.0
+    aria-query: 5.1.3
     chalk: ^4.1.0
     dom-accessibility-api: ^0.5.9
-    lz-string: ^1.4.4
+    lz-string: ^1.5.0
     pretty-format: ^27.0.2
-  checksum: 1e599129a2fe91959ce80900a0a4897232b89e2a8e22c1f5950c36d39c97629ea86b4986b60b173b5525a05de33fde1e35836ea597b03de78cc51b122835c6f0
+  checksum: 8ee3136451644e39990edea93709c38cf1e8ce5306f3c66273ca00935963faa51ca74e8d92b02eb442ccb842cfa28ca62833e393e075eb269cf9bef6f5600663
   languageName: node
   linkType: hard
 
-"@testing-library/react@npm:^13.4.0":
-  version: 13.4.0
-  resolution: "@testing-library/react@npm:13.4.0"
+"@testing-library/react@npm:^14.0.0":
+  version: 14.0.0
+  resolution: "@testing-library/react@npm:14.0.0"
   dependencies:
     "@babel/runtime": ^7.12.5
-    "@testing-library/dom": ^8.5.0
+    "@testing-library/dom": ^9.0.0
     "@types/react-dom": ^18.0.0
   peerDependencies:
     react: ^18.0.0
     react-dom: ^18.0.0
-  checksum: 51ec548c1fdb1271089a5c63e0908f0166f2c7fcd9cacd3108ebbe0ce64cb4351812d885892020dc37608418cfb15698514856502b3cab0e5cc58d6cc1bd4a3e
+  checksum: 4a54c8f56cc4a39b50803205f84f06280bb76521d6d5d4b3b36651d760c7c7752ef142d857d52aaf4fad4848ed7a8be49afc793a5dda105955d2f8bef24901ac
   languageName: node
   linkType: hard
 
@@ -381,7 +381,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aria-query@npm:^5.0.0":
+"aria-query@npm:5.1.3":
   version: 5.1.3
   resolution: "aria-query@npm:5.1.3"
   dependencies:
@@ -759,10 +759,10 @@ __metadata:
   resolution: "docs@workspace:."
   dependencies:
     "@reduxjs/toolkit": ^1.9.0
-    "@testing-library/react": ^13.4.0
+    "@testing-library/react": ^14.0.0
     msw: ^0.49.2
     react: ^18.2.0
-    react-redux: ^8.0.5
+    react-redux: ^8.1.1
   languageName: unknown
   linkType: soft
 
@@ -1541,12 +1541,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lz-string@npm:^1.4.4":
-  version: 1.4.4
-  resolution: "lz-string@npm:1.4.4"
+"lz-string@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "lz-string@npm:1.5.0"
   bin:
     lz-string: bin/bin.js
-  checksum: 54e31238a61a84d8f664d9860a9fba7310c5b97a52c444f80543069bc084815eff40b8d4474ae1d93992fdf6c252dca37cf27f6adbeb4dbc3df2f3ac773d0e61
+  checksum: 1ee98b4580246fd90dd54da6e346fb1caefcf05f677c686d9af237a157fdea3fd7c83a4bc58f858cd5b10a34d27afe0fdcbd0505a47e0590726a873dc8b8f65d
   languageName: node
   linkType: hard
 
@@ -1975,9 +1975,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-redux@npm:^8.0.5":
-  version: 8.0.5
-  resolution: "react-redux@npm:8.0.5"
+"react-redux@npm:^8.1.1":
+  version: 8.1.1
+  resolution: "react-redux@npm:8.1.1"
   dependencies:
     "@babel/runtime": ^7.12.1
     "@types/hoist-non-react-statics": ^3.3.1
@@ -1991,7 +1991,7 @@ __metadata:
     react: ^16.8 || ^17.0 || ^18.0
     react-dom: ^16.8 || ^17.0 || ^18.0
     react-native: ">=0.59"
-    redux: ^4
+    redux: ^4 || ^5.0.0-beta.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
@@ -2003,7 +2003,7 @@ __metadata:
       optional: true
     redux:
       optional: true
-  checksum: a108f4f7ead6ac005e656d46051474a2bbdb31ede481bbbb3d8d779c1a35e1940b8655577cc5021313411864d305f67fc719aa48d6e5ed8288cf9cbe8b7042e4
+  checksum: 370676330727764d78f35e9c5a0ed0591d79482fe9b70fffcab4aa6bcccc6194e4f1ebd818b4b390351dea5557e70d3bd4d95d7a0ac9baa1f45d6bf2230ee713
   languageName: node
   linkType: hard
 

examples/async/src/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { createStore, applyMiddleware } from 'redux'
 import { Provider } from 'react-redux'
 import thunk from 'redux-thunk'
@@ -17,9 +17,10 @@ const store = createStore(
   applyMiddleware(...middleware)
 )
 
-render(
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(
   <Provider store={store}>
     <App />
-  </Provider>,
-  document.getElementById('root')
-)
+  </Provider>
+)

examples/counter-ts/src/App.test.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { createRoot } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { store } from './app/store';
 import App from './App';
 
 test('renders learn react link', () => {
-  const { getByText } = render(
+  const container = document.getElementById('app');
+  const root = createRoot(container);
+  root.render(
     <Provider store={store}>
       <App />
     </Provider>
   );
 
   expect(getByText(/learn/i)).toBeInTheDocument();
-});
+});

examples/counter/src/App.test.js

@@ -1,15 +1,17 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { createRoot, screen } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { store } from './app/store';
 import App from './App';
 
 test('renders learn react link', () => {
-  render(
+  const container = document.createElement('div');
+  const root = createRoot(container);
+  root.render(
     <Provider store={store}>
       <App />
     </Provider>
   );
 
   expect(screen.getByText(/learn/i)).toBeInTheDocument();
-});
+});

examples/real-world/src/index.js

@@ -1,14 +1,15 @@
 import React from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { BrowserRouter as Router } from 'react-router-dom'
 import Root from './containers/Root'
 import configureStore from './store/configureStore'
 
 const store = configureStore()
 
-render(
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(
   <Router>
     <Root store={store} />
-  </Router>,
-  document.getElementById('root')
-)
+  </Router>
+)

examples/shopping-cart/src/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { createStore, applyMiddleware } from 'redux'
 import { Provider } from 'react-redux'
 import { createLogger } from 'redux-logger'
@@ -20,9 +20,10 @@ const store = createStore(
 
 store.dispatch(getAllProducts())
 
-render(
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(
   <Provider store={store}>
     <App />
-  </Provider>,
-  document.getElementById('root')
-)
+  </Provider>
+)

examples/todomvc/src/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { createStore } from 'redux'
 import { Provider } from 'react-redux'
 import App from './components/App'
@@ -8,9 +8,10 @@ import 'todomvc-app-css/index.css'
 
 const store = createStore(reducer)
 
-render(
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(
   <Provider store={store}>
     <App />
-  </Provider>,
-  document.getElementById('root')
-)
+  </Provider>
+)

examples/todos-with-undo/src/index.js

@@ -1,15 +1,16 @@
 import React from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { createStore } from 'redux'
 import { Provider } from 'react-redux'
 import App from './components/App'
 import reducer from './reducers'
 
 const store = createStore(reducer)
 
-render(
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(
   <Provider store={store}>
     <App />
-  </Provider>,
-  document.getElementById('root')
-)
+  </Provider>
+)

examples/todos/src/index.js

@@ -1,15 +1,16 @@
 import React from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { createStore } from 'redux'
 import { Provider } from 'react-redux'
 import App from './components/App'
 import rootReducer from './reducers'
 
 const store = createStore(rootReducer)
 
-render(
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(
   <Provider store={store}>
     <App />
-  </Provider>,
-  document.getElementById('root')
-)
+  </Provider>
+)

examples/tree-view/src/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { createStore } from 'redux'
 import { Provider } from 'react-redux'
 import reducer from './reducers'
@@ -9,9 +9,10 @@ import Node from './containers/Node'
 const tree = generateTree()
 const store = createStore(reducer, tree)
 
-render(
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(
   <Provider store={store}>
     <Node id={0} />
-  </Provider>,
-  document.getElementById('root')
-)
+  </Provider>
+)

examples/universal/client/index.js

@@ -1,6 +1,6 @@
 import 'babel-polyfill'
 import React from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { Provider } from 'react-redux'
 import configureStore from '../common/store/configureStore'
 import App from '../common/containers/App'
@@ -9,9 +9,9 @@ const store = configureStore(window.__PRELOADED_STATE__)
 delete window.__PRELOADED_STATE__
 const rootElement = document.getElementById('app')
 
-render(
+const root = createRoot(rootElement);
+root.render(
   <Provider store={store}>
     <App/>
-  </Provider>,
-  rootElement
-)
+  </Provider>
+)