chore: 🔧 releasing 1.2.5

Can-Sahin · web-flow · commit 53ff8de4bfe9 · 2022-06-20T15:16:09.000+02:00
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -50,6 +50,17 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "rejochandran",
+      "name": "Rejo Chandran",
+      "avatar_url": "https://avatars.githubusercontent.com/u/4696985?v=4",
+      "profile": "https://github.com/rejochandran",
+      "contributions": [
+        "code",
+        "doc",
+        "test"
+      ]
     }
   ],
   "contributorsPerLine": 8,
diff --git a/README.md b/README.md
@@ -135,6 +135,7 @@ But wait... there's more!
     <td align="center"><a href="https://github.com/receptiryaki"><img src="https://avatars0.githubusercontent.com/u/3495307?s=80" width="80px;" alt=""/><br /><sub><b>Recep Tiryaki</b></sub></a><br /><a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/commits?author=receptiryaki" title="Code">💻</a> <a href="#ideas-receptiryaki" title="Ideas, Planning, & Feedback">🤔</a> <a href="#design-receptiryaki" title="Design">🎨</a></td>
     <td align="center"><a href="https://github.com/mogsdad"><img src="https://avatars3.githubusercontent.com/u/1707731?s=80" width="80px;" alt=""/><br /><sub><b>David Bingham</b></sub></a><br /><a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/commits?author=mogsdad" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/lourensdev"><img src="https://avatars.githubusercontent.com/u/5746141?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Lourens de Villiers</b></sub></a><br /><a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/commits?author=lourensdev" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/rejochandran"><img src="https://avatars.githubusercontent.com/u/4696985?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Rejo Chandran</b></sub></a><br /><a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/commits?author=rejochandran" title="Code">💻</a> <a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/commits?author=rejochandran" title="Documentation">📖</a> <a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/commits?author=rejochandran" title="Tests">⚠️</a></td>
   </tr>
 </table>
 
diff --git a/docs/building-blocks/README.md b/docs/building-blocks/README.md
@@ -10,7 +10,7 @@ It is one of the most important files of the boilerplate. It contains all the gl
 
 - `react-app-polyfill` is imported to enable compatibility with many browsers and cool stuff like generator functions, Promises, etc.
 - A Redux `store` is instantiated.
-- `ReactDOM.render()` not only renders the [root React component](https://github.com/react-boilerplate/react-boilerplate-cra-template/blob/master/src/app/index.tsx), called `<App />`, of your application, but it renders it with `<Provider />`.
+- `createRoot().render()` not only renders the [root React component](https://github.com/react-boilerplate/react-boilerplate-cra-template/blob/master/src/app/index.tsx), called `<App />`, of your application, but it renders it with `<Provider />`.
 - Hot module replacement via [Webpack HMR](https://webpack.js.org/guides/hot-module-replacement/) makes the i18n translations hot re-loadable.
 - i18next internationalization support setup.
 - `<Provider />` connects your app with the Redux `store`.
diff --git a/internals/startingTemplate/src/index.tsx b/internals/startingTemplate/src/index.tsx
@@ -9,7 +9,7 @@ import 'react-app-polyfill/ie11';
 import 'react-app-polyfill/stable';
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 import { Provider } from 'react-redux';
 
 // Use consistent styling
@@ -30,15 +30,14 @@ import './locales/i18n';
 const store = configureAppStore();
 const MOUNT_NODE = document.getElementById('root') as HTMLElement;
 
-ReactDOM.render(
+ReactDOMClient.createRoot(MOUNT_NODE!).render(
   <Provider store={store}>
     <HelmetProvider>
       <React.StrictMode>
         <App />
       </React.StrictMode>
     </HelmetProvider>
   </Provider>,
-  MOUNT_NODE,
 );
 
 // Hot reloadable translation json files
diff --git a/package.json b/package.json
@@ -93,12 +93,12 @@
     "fontfaceobserver": "2.1.0",
     "i18next": "21.6.6",
     "i18next-browser-languagedetector": "6.1.2",
-    "react": "17.0.2",
+    "react": "18.1.0",
     "react-app-polyfill": "3.0.0",
-    "react-dom": "17.0.2",
+    "react-dom": "^18.0.0",
     "react-helmet-async": "1.3.0",
     "react-i18next": "11.16.5",
-    "react-is": "17.0.2",
+    "react-is": "18.1.0",
     "react-redux": "7.2.6",
     "react-router-dom": "5.2.0",
     "redux-injectors": "1.3.0",
@@ -110,16 +110,16 @@
   "devDependencies": {
     "@commitlint/cli": "13.1.0",
     "@commitlint/config-conventional": "13.1.0",
-    "@testing-library/jest-dom": "5.16.1",
-    "@testing-library/react": "12.1.2",
+    "@testing-library/jest-dom": "5.16.4",
+    "@testing-library/react": "13.2.0",
     "@types/fontfaceobserver": "2.1.0",
     "@types/jest": "27.4.0",
     "@types/node": "14.14.31",
     "@types/react": "18.0.2",
     "@types/react-dom": "18.0.0",
     "@types/react-redux": "7.1.22",
     "@types/react-router-dom": "5.3.2",
-    "@types/react-test-renderer": "17.0.1",
+    "@types/react-test-renderer": "18.0.0",
     "@types/rimraf": "3.0.2",
     "@types/shelljs": "0.8.11",
     "@types/styled-components": "5.1.20",
@@ -144,7 +144,7 @@
     "plop": "2.7.4",
     "prettier": "2.5.1",
     "react-scripts": "5.0.0",
-    "react-test-renderer": "17.0.2",
+    "react-test-renderer": "18.1.0",
     "replace-in-file": "6.3.2",
     "rimraf": "3.0.2",
     "serve": "13.0.2",
diff --git a/src/app/pages/HomePage/Features/GithubRepoForm/__tests__/index.test.tsx b/src/app/pages/HomePage/Features/GithubRepoForm/__tests__/index.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Store } from '@reduxjs/toolkit';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { ThemeProvider } from 'styles/theme/ThemeProvider';
 import { HelmetProvider } from 'react-helmet-async';
@@ -76,33 +76,45 @@ describe('<GithubRepoForm />', () => {
     expect(component.container.querySelector('circle')).toBeInTheDocument();
   });
 
-  it('should display list when repos not empty', () => {
+  it('should display list when repos not empty', async () => {
     const repoName = 'testRepo';
     store.dispatch(
       actions.reposLoaded([{ id: 'test', name: repoName } as any]),
     );
-    expect(component.queryByText(repoName)).toBeInTheDocument();
+    await waitFor(() =>
+      expect(component.queryByText(repoName)).toBeInTheDocument(),
+    );
   });
 
-  it('should display error when repoError fired', () => {
+  it('should display error when repoError fired', async () => {
     let error = RepoErrorType.USER_NOT_FOUND;
     store.dispatch(actions.repoError(error));
-    expect(component.queryByText(repoErrorText(error))).toBeInTheDocument();
+    await waitFor(() =>
+      expect(component.queryByText(repoErrorText(error))).toBeInTheDocument(),
+    );
 
     error = RepoErrorType.USER_HAS_NO_REPO;
     store.dispatch(actions.repoError(error));
-    expect(component.queryByText(repoErrorText(error))).toBeInTheDocument();
+    await waitFor(() =>
+      expect(component.queryByText(repoErrorText(error))).toBeInTheDocument(),
+    );
 
     error = RepoErrorType.USERNAME_EMPTY;
     store.dispatch(actions.repoError(error));
-    expect(component.queryByText(repoErrorText(error))).toBeInTheDocument();
+    await waitFor(() =>
+      expect(component.queryByText(repoErrorText(error))).toBeInTheDocument(),
+    );
 
     error = RepoErrorType.RESPONSE_ERROR;
     store.dispatch(actions.repoError(error));
-    expect(component.queryByText(repoErrorText(error))).toBeInTheDocument();
+    await waitFor(() =>
+      expect(component.queryByText(repoErrorText(error))).toBeInTheDocument(),
+    );
 
     error = RepoErrorType.GITHUB_RATE_LIMIT;
     store.dispatch(actions.repoError(error));
-    expect(component.queryByText(repoErrorText(error))).toBeInTheDocument();
+    await waitFor(() =>
+      expect(component.queryByText(repoErrorText(error))).toBeInTheDocument(),
+    );
   });
 });
diff --git a/src/index.tsx b/src/index.tsx
@@ -9,7 +9,7 @@ import 'react-app-polyfill/ie11';
 import 'react-app-polyfill/stable';
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 import { Provider } from 'react-redux';
 import FontFaceObserver from 'fontfaceobserver';
 
@@ -41,7 +41,7 @@ openSansObserver.load().then(() => {
 const store = configureAppStore();
 const MOUNT_NODE = document.getElementById('root') as HTMLElement;
 
-ReactDOM.render(
+ReactDOMClient.createRoot(MOUNT_NODE!).render(
   <Provider store={store}>
     <ThemeProvider>
       <HelmetProvider>
@@ -51,7 +51,6 @@ ReactDOM.render(
       </HelmetProvider>
     </ThemeProvider>
   </Provider>,
-  MOUNT_NODE,
 );
 
 // Hot reloadable translation json files
diff --git a/template.json b/template.json
@@ -43,12 +43,12 @@
       "fontfaceobserver": "2.1.0",
       "i18next": "21.6.6",
       "i18next-browser-languagedetector": "6.1.2",
-      "react": "17.0.2",
+      "react": "18.1.0",
       "react-app-polyfill": "3.0.0",
-      "react-dom": "17.0.2",
+      "react-dom": "18.1.0",
       "react-helmet-async": "1.3.0",
       "react-i18next": "11.16.5",
-      "react-is": "17.0.2",
+      "react-is": "18.1.0",
       "react-redux": "7.2.6",
       "react-router-dom": "5.2.0",
       "redux-injectors": "1.3.0",
@@ -66,7 +66,7 @@
       "@types/react-dom": "18.0.0",
       "@types/react-redux": "7.1.22",
       "@types/react-router-dom": "5.3.2",
-      "@types/react-test-renderer": "17.0.1",
+      "@types/react-test-renderer": "18.0.0",
       "@types/rimraf": "3.0.2",
       "@types/shelljs": "0.8.11",
       "@types/styled-components": "5.1.20",
@@ -87,7 +87,7 @@
       "node-plop": "0.26.2",
       "plop": "2.7.4",
       "prettier": "2.5.1",
-      "react-test-renderer": "17.0.2",
+      "react-test-renderer": "18.1.0",
       "rimraf": "3.0.2",
       "serve": "13.0.2",
       "shelljs": "0.8.5",
diff --git a/yarn.lock b/yarn.lock
