Skip to content
This repository was archived by the owner on Nov 6, 2025. It is now read-only.

Commit 7ef3155

Browse files
rejochandranrejochandran
authored
chore: 🔧 bump react to 18.1 (#170)
1 parent c339c1e commit 7ef3155

File tree

7 files changed

+90
-71
lines changed

7 files changed

+90
-71
lines changed

‎docs/building-blocks/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ It is one of the most important files of the boilerplate. It contains all the gl
1010

1111
- `react-app-polyfill` is imported to enable compatibility with many browsers and cool stuff like generator functions, Promises, etc.
1212
- A Redux `store` is instantiated.
13-
- `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 />`.
13+
- `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 />`.
1414
- Hot module replacement via [Webpack HMR](https://webpack.js.org/guides/hot-module-replacement/) makes the i18n translations hot re-loadable.
1515
- i18next internationalization support setup.
1616
- `<Provider />` connects your app with the Redux `store`.

‎internals/startingTemplate/src/index.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import 'react-app-polyfill/ie11';
99
import 'react-app-polyfill/stable';
1010

1111
import * as React from 'react';
12-
import * as ReactDOM from 'react-dom';
12+
import * as ReactDOMClient from 'react-dom/client';
1313
import { Provider } from 'react-redux';
1414

1515
// Use consistent styling
@@ -30,15 +30,14 @@ import './locales/i18n';
3030
const store = configureAppStore();
3131
const MOUNT_NODE = document.getElementById('root') as HTMLElement;
3232

33-
ReactDOM.render(
33+
ReactDOMClient.createRoot(MOUNT_NODE!).render(
3434
<Provider store={store}>
3535
<HelmetProvider>
3636
<React.StrictMode>
3737
<App />
3838
</React.StrictMode>
3939
</HelmetProvider>
4040
</Provider>,
41-
MOUNT_NODE,
4241
);
4342

4443
// Hot reloadable translation json files

‎package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -93,12 +93,12 @@
9393
"fontfaceobserver": "2.1.0",
9494
"i18next": "21.6.6",
9595
"i18next-browser-languagedetector": "6.1.2",
96-
"react": "17.0.2",
96+
"react": "18.1.0",
9797
"react-app-polyfill": "3.0.0",
98-
"react-dom": "17.0.2",
98+
"react-dom": "^18.0.0",
9999
"react-helmet-async": "1.3.0",
100100
"react-i18next": "11.16.5",
101-
"react-is": "17.0.2",
101+
"react-is": "18.1.0",
102102
"react-redux": "7.2.6",
103103
"react-router-dom": "5.2.0",
104104
"redux-injectors": "1.3.0",
@@ -110,16 +110,16 @@
110110
"devDependencies": {
111111
"@commitlint/cli": "13.1.0",
112112
"@commitlint/config-conventional": "13.1.0",
113-
"@testing-library/jest-dom": "5.16.1",
114-
"@testing-library/react": "12.1.2",
113+
"@testing-library/jest-dom": "5.16.4",
114+
"@testing-library/react": "13.2.0",
115115
"@types/fontfaceobserver": "2.1.0",
116116
"@types/jest": "27.4.0",
117117
"@types/node": "14.14.31",
118118
"@types/react": "18.0.2",
119119
"@types/react-dom": "18.0.0",
120120
"@types/react-redux": "7.1.22",
121121
"@types/react-router-dom": "5.3.2",
122-
"@types/react-test-renderer": "17.0.1",
122+
"@types/react-test-renderer": "18.0.0",
123123
"@types/rimraf": "3.0.2",
124124
"@types/shelljs": "0.8.11",
125125
"@types/styled-components": "5.1.20",
@@ -144,7 +144,7 @@
144144
"plop": "2.7.4",
145145
"prettier": "2.5.1",
146146
"react-scripts": "5.0.0",
147-
"react-test-renderer": "17.0.2",
147+
"react-test-renderer": "18.1.0",
148148
"replace-in-file": "6.3.2",
149149
"rimraf": "3.0.2",
150150
"serve": "13.0.2",

‎src/app/pages/HomePage/Features/GithubRepoForm/__tests__/index.test.tsx‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import { Store } from '@reduxjs/toolkit';
3-
import { render, fireEvent } from '@testing-library/react';
3+
import { render, fireEvent, waitFor } from '@testing-library/react';
44
import { Provider } from 'react-redux';
55
import { ThemeProvider } from 'styles/theme/ThemeProvider';
66
import { HelmetProvider } from 'react-helmet-async';
@@ -76,33 +76,45 @@ describe('<GithubRepoForm />', () => {
7676
expect(component.container.querySelector('circle')).toBeInTheDocument();
7777
});
7878

79-
it('should display list when repos not empty', () => {
79+
it('should display list when repos not empty', async () => {
8080
const repoName = 'testRepo';
8181
store.dispatch(
8282
actions.reposLoaded([{ id: 'test', name: repoName } as any]),
8383
);
84-
expect(component.queryByText(repoName)).toBeInTheDocument();
84+
await waitFor(() =>
85+
expect(component.queryByText(repoName)).toBeInTheDocument(),
86+
);
8587
});
8688

87-
it('should display error when repoError fired', () => {
89+
it('should display error when repoError fired', async () => {
8890
let error = RepoErrorType.USER_NOT_FOUND;
8991
store.dispatch(actions.repoError(error));
90-
expect(component.queryByText(repoErrorText(error))).toBeInTheDocument();
92+
await waitFor(() =>
93+
expect(component.queryByText(repoErrorText(error))).toBeInTheDocument(),
94+
);
9195

9296
error = RepoErrorType.USER_HAS_NO_REPO;
9397
store.dispatch(actions.repoError(error));
94-
expect(component.queryByText(repoErrorText(error))).toBeInTheDocument();
98+
await waitFor(() =>
99+
expect(component.queryByText(repoErrorText(error))).toBeInTheDocument(),
100+
);
95101

96102
error = RepoErrorType.USERNAME_EMPTY;
97103
store.dispatch(actions.repoError(error));
98-
expect(component.queryByText(repoErrorText(error))).toBeInTheDocument();
104+
await waitFor(() =>
105+
expect(component.queryByText(repoErrorText(error))).toBeInTheDocument(),
106+
);
99107

100108
error = RepoErrorType.RESPONSE_ERROR;
101109
store.dispatch(actions.repoError(error));
102-
expect(component.queryByText(repoErrorText(error))).toBeInTheDocument();
110+
await waitFor(() =>
111+
expect(component.queryByText(repoErrorText(error))).toBeInTheDocument(),
112+
);
103113

104114
error = RepoErrorType.GITHUB_RATE_LIMIT;
105115
store.dispatch(actions.repoError(error));
106-
expect(component.queryByText(repoErrorText(error))).toBeInTheDocument();
116+
await waitFor(() =>
117+
expect(component.queryByText(repoErrorText(error))).toBeInTheDocument(),
118+
);
107119
});
108120
});

‎src/index.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import 'react-app-polyfill/ie11';
99
import 'react-app-polyfill/stable';
1010

1111
import * as React from 'react';
12-
import * as ReactDOM from 'react-dom';
12+
import * as ReactDOMClient from 'react-dom/client';
1313
import { Provider } from 'react-redux';
1414
import FontFaceObserver from 'fontfaceobserver';
1515

@@ -41,7 +41,7 @@ openSansObserver.load().then(() => {
4141
const store = configureAppStore();
4242
const MOUNT_NODE = document.getElementById('root') as HTMLElement;
4343

44-
ReactDOM.render(
44+
ReactDOMClient.createRoot(MOUNT_NODE!).render(
4545
<Provider store={store}>
4646
<ThemeProvider>
4747
<HelmetProvider>
@@ -51,7 +51,6 @@ ReactDOM.render(
5151
</HelmetProvider>
5252
</ThemeProvider>
5353
</Provider>,
54-
MOUNT_NODE,
5554
);
5655

5756
// Hot reloadable translation json files

‎template.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,12 @@
4343
"fontfaceobserver": "2.1.0",
4444
"i18next": "21.6.6",
4545
"i18next-browser-languagedetector": "6.1.2",
46-
"react": "17.0.2",
46+
"react": "18.1.0",
4747
"react-app-polyfill": "3.0.0",
48-
"react-dom": "17.0.2",
48+
"react-dom": "18.1.0",
4949
"react-helmet-async": "1.3.0",
5050
"react-i18next": "11.16.5",
51-
"react-is": "17.0.2",
51+
"react-is": "18.1.0",
5252
"react-redux": "7.2.6",
5353
"react-router-dom": "5.2.0",
5454
"redux-injectors": "1.3.0",
@@ -66,7 +66,7 @@
6666
"@types/react-dom": "18.0.0",
6767
"@types/react-redux": "7.1.22",
6868
"@types/react-router-dom": "5.3.2",
69-
"@types/react-test-renderer": "17.0.1",
69+
"@types/react-test-renderer": "18.0.0",
7070
"@types/rimraf": "3.0.2",
7171
"@types/shelljs": "0.8.11",
7272
"@types/styled-components": "5.1.20",
@@ -87,7 +87,7 @@
8787
"node-plop": "0.26.2",
8888
"plop": "2.7.4",
8989
"prettier": "2.5.1",
90-
"react-test-renderer": "17.0.2",
90+
"react-test-renderer": "18.1.0",
9191
"rimraf": "3.0.2",
9292
"serve": "13.0.2",
9393
"shelljs": "0.8.5",

‎yarn.lock‎

Lines changed: 52 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1811,7 +1811,7 @@
18111811
"@svgr/plugin-svgo" "^5.5.0"
18121812
loader-utils "^2.0.0"
18131813

1814-
"@testing-library/dom@^8.0.0":
1814+
"@testing-library/dom@^8.5.0":
18151815
version "8.13.0"
18161816
resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.13.0.tgz#bc00bdd64c7d8b40841e27a70211399ad3af46f5"
18171817
integrity sha512-9VHgfIatKNXQNaZTtLnalIy0jNZzY35a4S3oi08YAt9Hv1VsfZ/DfA45lM8D/UhtHBGJ4/lGwp0PZkVndRkoOQ==
@@ -1825,10 +1825,10 @@
18251825
lz-string "^1.4.4"
18261826
pretty-format "^27.0.2"
18271827

1828-
"@testing-library/[email protected].1":
1829-
version "5.16.1"
1830-
resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.16.1.tgz#3db7df5ae97596264a7da9696fe14695ba02e51f"
1831-
integrity sha512-ajUJdfDIuTCadB79ukO+0l8O+QwN0LiSxDaYUTI4LndbbUsGi6rWU1SCexXzBA2NSjlVB9/vbkasQIL3tmPBjw==
1828+
"@testing-library/[email protected].4":
1829+
version "5.16.4"
1830+
resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.16.4.tgz#938302d7b8b483963a3ae821f1c0808f872245cd"
1831+
integrity sha512-Gy+IoFutbMQcky0k+bqqumXZ1cTGswLsFqmNLzNdSKkU9KGV2u9oXhukCbbJ9/LRPKiqwxEE8VpV/+YZlfkPUA==
18321832
dependencies:
18331833
"@babel/runtime" "^7.9.2"
18341834
"@types/testing-library__jest-dom" "^5.9.1"
@@ -1840,13 +1840,14 @@
18401840
lodash "^4.17.15"
18411841
redent "^3.0.0"
18421842

1843-
"@testing-library/react@12.1.2":
1844-
version "12.1.2"
1845-
resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-12.1.2.tgz#f1bc9a45943461fa2a598bb4597df1ae044cfc76"
1846-
integrity sha512-ihQiEOklNyHIpo2Y8FREkyD1QAea054U0MVbwH1m8N9TxeFz+KoJ9LkqoKqJlzx2JDm56DVwaJ1r36JYxZM05g==
1843+
"@testing-library/react@13.2.0":
1844+
version "13.2.0"
1845+
resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-13.2.0.tgz#2db00bc94d71c4e90e5c25582e90a650ae2925bf"
1846+
integrity sha512-Bprbz/SZVONCJy5f7hcihNCv313IJXdYiv0nSJklIs1SQCIHHNlnGNkosSXnGZTmesyGIcBGNppYhXcc11pb7g==
18471847
dependencies:
18481848
"@babel/runtime" "^7.12.5"
1849-
"@testing-library/dom" "^8.0.0"
1849+
"@testing-library/dom" "^8.5.0"
1850+
"@types/react-dom" "^18.0.0"
18501851

18511852
"@tootallnate/once@1":
18521853
version "1.1.2"
@@ -2192,6 +2193,13 @@
21922193
dependencies:
21932194
"@types/react" "*"
21942195

2196+
"@types/react-dom@^18.0.0":
2197+
version "18.0.3"
2198+
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.3.tgz#a022ea08c75a476fe5e96b675c3e673363853831"
2199+
integrity sha512-1RRW9kst+67gveJRYPxGmVy8eVJ05O43hg77G2j5m76/RFJtMbcfAs2viQ2UNsvvDg8F7OfQZx8qQcl6ymygaQ==
2200+
dependencies:
2201+
"@types/react" "*"
2202+
21952203
"@types/[email protected]":
21962204
version "7.1.22"
21972205
resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.22.tgz#0eab76a37ef477cc4b53665aeaf29cb60631b72a"
@@ -2229,10 +2237,10 @@
22292237
"@types/history" "^4.7.11"
22302238
"@types/react" "*"
22312239

2232-
"@types/react-test-renderer@17.0.1":
2233-
version "17.0.1"
2234-
resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz#3120f7d1c157fba9df0118dae20cb0297ee0e06b"
2235-
integrity sha512-3Fi2O6Zzq/f3QR9dRnlnHso9bMl7weKCviFmfF6B4LS1Uat6Hkm15k0ZAQuDz+UBq6B3+g+NM6IT2nr5QgPzCw==
2240+
"@types/react-test-renderer@18.0.0":
2241+
version "18.0.0"
2242+
resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-18.0.0.tgz#7b7f69ca98821ea5501b21ba24ea7b6139da2243"
2243+
integrity sha512-C7/5FBJ3g3sqUahguGi03O79b8afNeSD6T8/GU50oQrJCU0bVCCGQHaGKUbg2Ce8VQEEqTw8/HiS6lXHHdgkdQ==
22362244
dependencies:
22372245
"@types/react" "*"
22382246

@@ -9920,14 +9928,13 @@ react-dev-utils@^12.0.0:
99209928
strip-ansi "^6.0.1"
99219929
text-table "^0.2.0"
99229930

9923-
react-dom@17.0.2:
9924-
version "17.0.2"
9925-
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
9926-
integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
9931+
react-dom@^18.0.0:
9932+
version "18.1.0"
9933+
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f"
9934+
integrity sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==
99279935
dependencies:
99289936
loose-envify "^1.1.0"
9929-
object-assign "^4.1.1"
9930-
scheduler "^0.20.2"
9937+
scheduler "^0.22.0"
99319938

99329939
react-error-overlay@^6.0.10:
99339940
version "6.0.10"
@@ -9959,10 +9966,10 @@ [email protected]:
99599966
html-escaper "^2.0.2"
99609967
html-parse-stringify "^3.0.1"
99619968

9962-
react-is@17.0.2, react-is@^17.0.1, react-is@^17.0.2:
9963-
version "17.0.2"
9964-
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
9965-
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
9969+
react-is@18.1.0, react-is@^18.1.0:
9970+
version "18.1.0"
9971+
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67"
9972+
integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==
99669973

99679974
"react-is@^16.12.0 || ^17.0.0 || ^18.0.0":
99689975
version "18.0.0"
@@ -9974,6 +9981,11 @@ react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
99749981
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
99759982
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
99769983

9984+
react-is@^17.0.1, react-is@^17.0.2:
9985+
version "17.0.2"
9986+
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
9987+
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
9988+
99779989
[email protected]:
99789990
version "7.2.6"
99799991
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.6.tgz#49633a24fe552b5f9caf58feb8a138936ddfe9aa"
@@ -10075,31 +10087,29 @@ [email protected]:
1007510087
optionalDependencies:
1007610088
fsevents "^2.3.2"
1007710089

10078-
react-shallow-renderer@^16.13.1:
10090+
react-shallow-renderer@^16.15.0:
1007910091
version "16.15.0"
1008010092
resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457"
1008110093
integrity sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==
1008210094
dependencies:
1008310095
object-assign "^4.1.1"
1008410096
react-is "^16.12.0 || ^17.0.0 || ^18.0.0"
1008510097

10086-
react-test-renderer@17.0.2:
10087-
version "17.0.2"
10088-
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c"
10089-
integrity sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==
10098+
react-test-renderer@18.1.0:
10099+
version "18.1.0"
10100+
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-18.1.0.tgz#35b75754834cf9ab517b6813db94aee0a6b545c3"
10101+
integrity sha512-OfuueprJFW7h69GN+kr4Ywin7stcuqaYAt1g7airM5cUgP0BoF5G5CXsPGmXeDeEkncb2fqYNECO4y18sSqphg==
1009010102
dependencies:
10091-
object-assign "^4.1.1"
10092-
react-is "^17.0.2"
10093-
react-shallow-renderer "^16.13.1"
10094-
scheduler "^0.20.2"
10103+
react-is "^18.1.0"
10104+
react-shallow-renderer "^16.15.0"
10105+
scheduler "^0.22.0"
1009510106

10096-
react@17.0.2:
10097-
version "17.0.2"
10098-
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
10099-
integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
10107+
react@18.1.0:
10108+
version "18.1.0"
10109+
resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
10110+
integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==
1010010111
dependencies:
1010110112
loose-envify "^1.1.0"
10102-
object-assign "^4.1.1"
1010310113

1010410114
read-pkg-up@^3.0.0:
1010510115
version "3.0.0"
@@ -10621,13 +10631,12 @@ saxes@^5.0.1:
1062110631
dependencies:
1062210632
xmlchars "^2.2.0"
1062310633

10624-
scheduler@^0.20.2:
10625-
version "0.20.2"
10626-
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
10627-
integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
10634+
scheduler@^0.22.0:
10635+
version "0.22.0"
10636+
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8"
10637+
integrity sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==
1062810638
dependencies:
1062910639
loose-envify "^1.1.0"
10630-
object-assign "^4.1.1"
1063110640

1063210641
[email protected]:
1063310642
version "2.7.0"

0 commit comments

Comments
 (0)