From 31ab3b8f5fdee4df403ca5207ac48fd1d7ba6f37 Mon Sep 17 00:00:00 2001 From: Ricardo Costa <48949546+ripecosta@users.noreply.github.com> Date: Tue, 13 Aug 2024 22:16:19 +0100 Subject: [PATCH] feat: upgrade to react v18 --- package-lock.json | 344 +++++++++------------ package.json | 12 +- src/I18nextProvider.js | 16 +- test/useSSR.spec.js | 2 +- test/useTranslation.loading.spec.js | 33 +- test/useTranslation.loadingLng.spec.js | 31 +- test/useTranslation.ready.spec.jsx | 21 +- test/useTranslation.spec.jsx | 20 +- test/useTranslation.usedNamespaces.spec.js | 4 +- 9 files changed, 200 insertions(+), 283 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8d324261..e02d393e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,11 +29,11 @@ "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-replace": "^5.0.7", "@rollup/plugin-terser": "0.4.4", + "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.4.8", - "@testing-library/react": "^12.1.5", - "@testing-library/react-hooks": "^7.0.2", + "@testing-library/react": "^16.0.0", "@types/jest": "^29.5.12", - "@types/react": "^18.2.52", + "@types/react": "^18.3.3", "@vitest/coverage-v8": "^2.0.5", "all-contributors-cli": "^6.26.1", "babel-core": "^7.0.0-bridge.0", @@ -56,9 +56,9 @@ "lint-staged": "^15.2.8", "mkdirp": "^3.0.1", "prettier": "^3.3.3", - "react": "^16.14.0", - "react-dom": "^16.14.0", - "react-test-renderer": "^16.14.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-test-renderer": "^18.3.1", "rimraf": "^6.0.1", "rollup": "^4.20.0", "typescript": "~5.5.4", @@ -3269,22 +3269,22 @@ "dev": true }, "node_modules/@testing-library/dom": { - "version": "8.20.1", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.1.tgz", - "integrity": "sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==", + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", + "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", "dev": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", "@types/aria-query": "^5.0.1", - "aria-query": "5.1.3", + "aria-query": "5.3.0", "chalk": "^4.1.0", "dom-accessibility-api": "^0.5.9", "lz-string": "^1.5.0", "pretty-format": "^27.0.2" }, "engines": { - "node": ">=12" + "node": ">=18" } }, "node_modules/@testing-library/dom/node_modules/ansi-styles": { @@ -3302,6 +3302,15 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/@testing-library/dom/node_modules/aria-query": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", + "dev": true, + "dependencies": { + "dequal": "^2.0.3" + } + }, "node_modules/@testing-library/dom/node_modules/chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -3452,48 +3461,28 @@ } }, "node_modules/@testing-library/react": { - "version": "12.1.5", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-12.1.5.tgz", - "integrity": "sha512-OfTXCJUFgjd/digLUuPxa0+/3ZxsQmE7ub9kcbW/wi96Bh3o/p5vrETcBGfP17NWPGqeYYl5LTRpwyGoMC4ysg==", - "dev": true, - "dependencies": { - "@babel/runtime": "^7.12.5", - "@testing-library/dom": "^8.0.0", - "@types/react-dom": "<18.0.0" - }, - "engines": { - "node": ">=12" - }, - "peerDependencies": { - "react": "<18.0.0", - "react-dom": "<18.0.0" - } - }, - "node_modules/@testing-library/react-hooks": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-7.0.2.tgz", - "integrity": "sha512-dYxpz8u9m4q1TuzfcUApqi8iFfR6R0FaMbr2hjZJy1uC8z+bO/K4v8Gs9eogGKYQop7QsrBTFkv/BCF7MzD2Cg==", + "version": "16.0.0", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.0.0.tgz", + "integrity": "sha512-guuxUKRWQ+FgNX0h0NS0FIq3Q3uLtWVpBzcLOggmfMoUpgBnzBzvLLd4fbm6yS8ydJd94cIfY4yP9qUQjM2KwQ==", "dev": true, "dependencies": { - "@babel/runtime": "^7.12.5", - "@types/react": ">=16.9.0", - "@types/react-dom": ">=16.9.0", - "@types/react-test-renderer": ">=16.9.0", - "react-error-boundary": "^3.1.0" + "@babel/runtime": "^7.12.5" }, "engines": { - "node": ">=12" + "node": ">=18" }, "peerDependencies": { - "react": ">=16.9.0", - "react-dom": ">=16.9.0", - "react-test-renderer": ">=16.9.0" + "@testing-library/dom": "^10.0.0", + "@types/react": "^18.0.0", + "@types/react-dom": "^18.0.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" }, "peerDependenciesMeta": { - "react-dom": { + "@types/react": { "optional": true }, - "react-test-renderer": { + "@types/react-dom": { "optional": true } } @@ -3677,30 +3666,12 @@ } }, "node_modules/@types/react-dom": { - "version": "17.0.25", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.25.tgz", - "integrity": "sha512-urx7A7UxkZQmThYA4So0NelOVjx3V4rNFVJwp0WZlbIK5eM4rNJDiN3R/E9ix0MBh6kAEojk/9YL+Te6D9zHNA==", - "dev": true, - "dependencies": { - "@types/react": "^17" - } - }, - "node_modules/@types/react-dom/node_modules/@types/react": { - "version": "17.0.80", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.80.tgz", - "integrity": "sha512-LrgHIu2lEtIo8M7d1FcI3BdwXWoRQwMoXOZ7+dPTW0lYREjmlHl3P0U1VD0i/9tppOuv8/sam7sOjx34TxSFbA==", - "dev": true, - "dependencies": { - "@types/prop-types": "*", - "@types/scheduler": "^0.16", - "csstype": "^3.0.2" - } - }, - "node_modules/@types/react-test-renderer": { "version": "18.3.0", - "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-18.3.0.tgz", - "integrity": "sha512-HW4MuEYxfDbOHQsVlY/XtOvNHftCVEPhJF2pQXXwcUiUF+Oyb0usgp48HSgpK5rt8m9KZb22yqOeZm+rrVG8gw==", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz", + "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "@types/react": "*" } @@ -3711,12 +3682,6 @@ "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==", "dev": true }, - "node_modules/@types/scheduler": { - "version": "0.16.8", - "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", - "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", - "dev": true - }, "node_modules/@types/semver": { "version": "7.5.6", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.6.tgz", @@ -5626,6 +5591,15 @@ "node": ">=0.4.0" } }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/didyoumean": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", @@ -10286,48 +10260,28 @@ } }, "node_modules/react": { - "version": "16.14.0", - "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", - "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "dev": true, "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "prop-types": "^15.6.2" + "loose-envify": "^1.1.0" }, "engines": { "node": ">=0.10.0" } }, "node_modules/react-dom": { - "version": "16.14.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz", - "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "dev": true, "dependencies": { "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "prop-types": "^15.6.2", - "scheduler": "^0.19.1" - }, - "peerDependencies": { - "react": "^16.14.0" - } - }, - "node_modules/react-error-boundary": { - "version": "3.1.4", - "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz", - "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==", - "dev": true, - "dependencies": { - "@babel/runtime": "^7.12.5" - }, - "engines": { - "node": ">=10", - "npm": ">=6" + "scheduler": "^0.23.2" }, "peerDependencies": { - "react": ">=16.13.1" + "react": "^18.3.1" } }, "node_modules/react-is": { @@ -10336,25 +10290,37 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true }, - "node_modules/react-test-renderer": { - "version": "16.14.0", - "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.14.0.tgz", - "integrity": "sha512-L8yPjqPE5CZO6rKsKXRO/rVPiaCOy0tQQJbC+UjPNlobl5mad59lvPjwFsQHTvL03caVDIVr9x9/OSgDe6I5Eg==", + "node_modules/react-shallow-renderer": { + "version": "16.15.0", + "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz", + "integrity": "sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==", "dev": true, "dependencies": { "object-assign": "^4.1.1", - "prop-types": "^15.6.2", - "react-is": "^16.8.6", - "scheduler": "^0.19.1" + "react-is": "^16.12.0 || ^17.0.0 || ^18.0.0" }, "peerDependencies": { - "react": "^16.14.0" + "react": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/react-test-renderer": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.3.1.tgz", + "integrity": "sha512-KkAgygexHUkQqtvvx/otwxtuFu5cVjfzTCtjXLH9boS19/Nbtg84zS7wIQn39G8IlrhThBpQsMKkq5ZHZIYFXA==", + "dev": true, + "dependencies": { + "react-is": "^18.3.1", + "react-shallow-renderer": "^16.15.0", + "scheduler": "^0.23.2" + }, + "peerDependencies": { + "react": "^18.3.1" } }, "node_modules/react-test-renderer/node_modules/react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", "dev": true }, "node_modules/readdirp": { @@ -10854,13 +10820,12 @@ "dev": true }, "node_modules/scheduler": { - "version": "0.19.1", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz", - "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==", + "version": "0.23.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", + "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", "dev": true, "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "node_modules/semver": { @@ -14350,15 +14315,15 @@ "dev": true }, "@testing-library/dom": { - "version": "8.20.1", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.1.tgz", - "integrity": "sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==", + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", + "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", "dev": true, "requires": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", "@types/aria-query": "^5.0.1", - "aria-query": "5.1.3", + "aria-query": "5.3.0", "chalk": "^4.1.0", "dom-accessibility-api": "^0.5.9", "lz-string": "^1.5.0", @@ -14374,6 +14339,15 @@ "color-convert": "^2.0.1" } }, + "aria-query": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", + "dev": true, + "requires": { + "dequal": "^2.0.3" + } + }, "chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -14490,27 +14464,12 @@ } }, "@testing-library/react": { - "version": "12.1.5", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-12.1.5.tgz", - "integrity": "sha512-OfTXCJUFgjd/digLUuPxa0+/3ZxsQmE7ub9kcbW/wi96Bh3o/p5vrETcBGfP17NWPGqeYYl5LTRpwyGoMC4ysg==", - "dev": true, - "requires": { - "@babel/runtime": "^7.12.5", - "@testing-library/dom": "^8.0.0", - "@types/react-dom": "<18.0.0" - } - }, - "@testing-library/react-hooks": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-7.0.2.tgz", - "integrity": "sha512-dYxpz8u9m4q1TuzfcUApqi8iFfR6R0FaMbr2hjZJy1uC8z+bO/K4v8Gs9eogGKYQop7QsrBTFkv/BCF7MzD2Cg==", + "version": "16.0.0", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.0.0.tgz", + "integrity": "sha512-guuxUKRWQ+FgNX0h0NS0FIq3Q3uLtWVpBzcLOggmfMoUpgBnzBzvLLd4fbm6yS8ydJd94cIfY4yP9qUQjM2KwQ==", "dev": true, "requires": { - "@babel/runtime": "^7.12.5", - "@types/react": ">=16.9.0", - "@types/react-dom": ">=16.9.0", - "@types/react-test-renderer": ">=16.9.0", - "react-error-boundary": "^3.1.0" + "@babel/runtime": "^7.12.5" } }, "@types/aria-query": { @@ -14685,32 +14644,12 @@ } }, "@types/react-dom": { - "version": "17.0.25", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.25.tgz", - "integrity": "sha512-urx7A7UxkZQmThYA4So0NelOVjx3V4rNFVJwp0WZlbIK5eM4rNJDiN3R/E9ix0MBh6kAEojk/9YL+Te6D9zHNA==", - "dev": true, - "requires": { - "@types/react": "^17" - }, - "dependencies": { - "@types/react": { - "version": "17.0.80", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.80.tgz", - "integrity": "sha512-LrgHIu2lEtIo8M7d1FcI3BdwXWoRQwMoXOZ7+dPTW0lYREjmlHl3P0U1VD0i/9tppOuv8/sam7sOjx34TxSFbA==", - "dev": true, - "requires": { - "@types/prop-types": "*", - "@types/scheduler": "^0.16", - "csstype": "^3.0.2" - } - } - } - }, - "@types/react-test-renderer": { "version": "18.3.0", - "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-18.3.0.tgz", - "integrity": "sha512-HW4MuEYxfDbOHQsVlY/XtOvNHftCVEPhJF2pQXXwcUiUF+Oyb0usgp48HSgpK5rt8m9KZb22yqOeZm+rrVG8gw==", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz", + "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==", "dev": true, + "optional": true, + "peer": true, "requires": { "@types/react": "*" } @@ -14721,12 +14660,6 @@ "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==", "dev": true }, - "@types/scheduler": { - "version": "0.16.8", - "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", - "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", - "dev": true - }, "@types/semver": { "version": "7.5.6", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.6.tgz", @@ -16092,6 +16025,12 @@ "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", "dev": true }, + "dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "dev": true + }, "didyoumean": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", @@ -19439,35 +19378,22 @@ } }, "react": { - "version": "16.14.0", - "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", - "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "dev": true, "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "prop-types": "^15.6.2" + "loose-envify": "^1.1.0" } }, "react-dom": { - "version": "16.14.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz", - "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "dev": true, "requires": { "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "prop-types": "^15.6.2", - "scheduler": "^0.19.1" - } - }, - "react-error-boundary": { - "version": "3.1.4", - "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz", - "integrity": "sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==", - "dev": true, - "requires": { - "@babel/runtime": "^7.12.5" + "scheduler": "^0.23.2" } }, "react-is": { @@ -19476,22 +19402,31 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true }, - "react-test-renderer": { - "version": "16.14.0", - "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.14.0.tgz", - "integrity": "sha512-L8yPjqPE5CZO6rKsKXRO/rVPiaCOy0tQQJbC+UjPNlobl5mad59lvPjwFsQHTvL03caVDIVr9x9/OSgDe6I5Eg==", + "react-shallow-renderer": { + "version": "16.15.0", + "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz", + "integrity": "sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==", "dev": true, "requires": { "object-assign": "^4.1.1", - "prop-types": "^15.6.2", - "react-is": "^16.8.6", - "scheduler": "^0.19.1" + "react-is": "^16.12.0 || ^17.0.0 || ^18.0.0" + } + }, + "react-test-renderer": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.3.1.tgz", + "integrity": "sha512-KkAgygexHUkQqtvvx/otwxtuFu5cVjfzTCtjXLH9boS19/Nbtg84zS7wIQn39G8IlrhThBpQsMKkq5ZHZIYFXA==", + "dev": true, + "requires": { + "react-is": "^18.3.1", + "react-shallow-renderer": "^16.15.0", + "scheduler": "^0.23.2" }, "dependencies": { "react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", "dev": true } } @@ -19844,13 +19779,12 @@ "dev": true }, "scheduler": { - "version": "0.19.1", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz", - "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==", + "version": "0.23.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", + "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", "dev": true, "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "semver": { diff --git a/package.json b/package.json index 12f19f37..065bfae6 100644 --- a/package.json +++ b/package.json @@ -84,11 +84,11 @@ "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-replace": "^5.0.7", "@rollup/plugin-terser": "0.4.4", + "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.4.8", - "@testing-library/react": "^12.1.5", - "@testing-library/react-hooks": "^7.0.2", + "@testing-library/react": "^16.0.0", "@types/jest": "^29.5.12", - "@types/react": "^18.2.52", + "@types/react": "^18.3.3", "@vitest/coverage-v8": "^2.0.5", "all-contributors-cli": "^6.26.1", "babel-core": "^7.0.0-bridge.0", @@ -111,9 +111,9 @@ "lint-staged": "^15.2.8", "mkdirp": "^3.0.1", "prettier": "^3.3.3", - "react": "^16.14.0", - "react-dom": "^16.14.0", - "react-test-renderer": "^16.14.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-test-renderer": "^18.3.1", "rimraf": "^6.0.1", "rollup": "^4.20.0", "typescript": "~5.5.4", diff --git a/src/I18nextProvider.js b/src/I18nextProvider.js index 1ac13fc4..bf27663c 100644 --- a/src/I18nextProvider.js +++ b/src/I18nextProvider.js @@ -2,18 +2,6 @@ import { createElement, useMemo } from 'react'; import { I18nContext } from './context.js'; export function I18nextProvider({ i18n, defaultNS, children }) { - const value = useMemo( - () => ({ - i18n, - defaultNS, - }), - [i18n, defaultNS], - ); - return createElement( - I18nContext.Provider, - { - value, - }, - children, - ); + const value = useMemo(() => ({ i18n, defaultNS }), [i18n, defaultNS]); + return createElement(I18nContext.Provider, { value }, children); } diff --git a/test/useSSR.spec.js b/test/useSSR.spec.js index 6229d1e4..8847984c 100644 --- a/test/useSSR.spec.js +++ b/test/useSSR.spec.js @@ -1,5 +1,5 @@ import { describe, it, vitest, beforeAll, afterAll, expect } from 'vitest'; -import { renderHook } from '@testing-library/react-hooks/server'; +import { renderHook } from '@testing-library/react'; import i18n from './i18n'; import { setI18n } from '../src/context'; import { useSSR } from '../src/useSSR'; diff --git a/test/useTranslation.loading.spec.js b/test/useTranslation.loading.spec.js index b623f62f..51a0bb31 100644 --- a/test/useTranslation.loading.spec.js +++ b/test/useTranslation.loading.spec.js @@ -1,5 +1,5 @@ import { describe, it, vitest, beforeEach, expect } from 'vitest'; -import { renderHook } from '@testing-library/react-hooks'; +import { renderHook, waitFor } from '@testing-library/react'; import i18n from './i18n'; import { BackendMock } from './backendMock'; import { useTranslation } from '../src/useTranslation'; @@ -23,26 +23,29 @@ describe('useTranslation loading ns', () => { }); it('should wait for correct translation with suspense', async () => { - const { result, waitForNextUpdate } = renderHook(() => - useTranslation('common', { i18n: newI18n, useSuspense: true }), - ); - expect(result.all).toHaveLength(0); + const all = []; + const { result } = renderHook(() => { + const value = useTranslation('common', { i18n: newI18n, useSuspense: true }); + all.push(value); + return value; + }); + + expect(all).toHaveLength(0); backend.flush(); - await waitForNextUpdate(); - const { t } = result.current; - expect(t('key1')).toBe('test'); + await waitFor(() => expect(result.current.t('key1')).toBe('test')); }); it('should wait for correct translation without suspense', async () => { - const { result, waitForNextUpdate } = renderHook(() => - useTranslation('common', { i18n: newI18n, useSuspense: false }), - ); - const { t } = result.current; - expect(t('key1')).toBe('key1'); + const all = []; + const { result } = renderHook(() => { + const value = useTranslation('common', { i18n: newI18n, useSuspense: false }); + all.push(value); + return value; + }); + await waitFor(() => expect(result.current.t('key1')).toBe('key1')); backend.flush(); - await waitForNextUpdate(); - expect(t('key1')).toBe('test'); + await waitFor(() => expect(result.current.t('key1')).toBe('test')); }); it('should return defaultValue if i18n instance not found', async () => { diff --git a/test/useTranslation.loadingLng.spec.js b/test/useTranslation.loadingLng.spec.js index 2ba488ed..d0b5c698 100644 --- a/test/useTranslation.loadingLng.spec.js +++ b/test/useTranslation.loadingLng.spec.js @@ -1,5 +1,5 @@ import { describe, it, vitest, beforeEach, afterEach, expect } from 'vitest'; -import { renderHook, cleanup } from '@testing-library/react-hooks'; +import { renderHook, cleanup, waitFor } from '@testing-library/react'; import i18n from './i18n'; import { BackendLngAwareMock } from './backendLngAwareMock'; import { useTranslation } from '../src/useTranslation'; @@ -23,14 +23,16 @@ describe('useTranslation loading ns with lng via props', () => { afterEach(cleanup); it('should wait for correct translation with suspense', async () => { - const { result, waitForNextUpdate } = renderHook(() => - useTranslation('common', { i18n: newI18n, useSuspense: true, lng: 'de' }), - ); - expect(result.all).toHaveLength(0); + const all = []; + const { result } = renderHook(() => { + const value = useTranslation('common', { i18n: newI18n, useSuspense: true, lng: 'de' }); + all.push(value); + return value; + }); + + expect(all).toHaveLength(0); backend.flush(); - await waitForNextUpdate(); - const { t } = result.current; - expect(t('key1')).toBe('de/common for key1'); + await waitFor(() => expect(result.current.t('key1')).toBe('de/common for key1')); }); it('should wait for correct translation without suspense', async () => { @@ -63,24 +65,21 @@ describe('useTranslation loading ns with lng via props', () => { it('should correctly return and render correct translations in multiple useTranslation usages', async () => { { - const { result, waitForNextUpdate } = renderHook(() => + const { result } = renderHook(() => useTranslation('newns', { i18n: newI18n, useSuspense: true, lng: 'pt' }), ); backend.flush(); - await waitForNextUpdate(); - const { t } = result.current; - expect(t('key1')).toBe('pt/newns for key1'); + await waitFor(() => expect(result.current.t('key1')).toBe('pt/newns for key1')); } { - const { result, waitForNextUpdate } = renderHook(() => + const { result } = renderHook(() => useTranslation('newns', { i18n: newI18n, useSuspense: true, lng: 'de' }), ); + backend.flush({ language: 'de' }); - await waitForNextUpdate(); - const { t } = result.current; - expect(t('key1')).toBe('de/newns for key1'); + await waitFor(() => expect(result.current.t('key1')).toBe('de/newns for key1')); } { diff --git a/test/useTranslation.ready.spec.jsx b/test/useTranslation.ready.spec.jsx index 0432e9da..744dccbd 100644 --- a/test/useTranslation.ready.spec.jsx +++ b/test/useTranslation.ready.spec.jsx @@ -1,7 +1,6 @@ import { describe, it, vitest, expect, beforeEach, afterEach } from 'vitest'; -import React from 'react'; -import { renderHook, cleanup as cleanupHook } from '@testing-library/react-hooks'; -import { render, cleanup } from '@testing-library/react'; +import React, { Suspense } from 'react'; +import { render, renderHook, cleanup, screen } from '@testing-library/react'; import { useTranslation } from '../src/useTranslation'; import hasLoadedNamespace from './hasLoadedNamespaceMock.js'; @@ -10,7 +9,6 @@ vitest.unmock('../src/useTranslation'); describe('useTranslation', () => { afterEach(() => { cleanup(); - cleanupHook(); }); let instance; @@ -42,15 +40,14 @@ describe('useTranslation', () => { return
{t('keyOne')}
; } - it('should throw a suspense if not ready (having not all ns)', async () => { - expect(() => { - console.error = vitest.fn(); // silent down the error boundary error from react-dom - - render(); - }).toThrow( - 'TestComponentNotReady suspended while rendering, but no fallback UI was specified.', + it('should render suspense if not ready (having not all ns)', async () => { + render( + + + , ); - expect(console.error).toHaveBeenCalled(); // silent down the error boundary error from react-dom + + expect(screen.getByText('Suspended')).toBeInTheDocument(); }); it('should render correct content if ready (having all ns)', () => { diff --git a/test/useTranslation.spec.jsx b/test/useTranslation.spec.jsx index acde5d59..b320814d 100644 --- a/test/useTranslation.spec.jsx +++ b/test/useTranslation.spec.jsx @@ -1,6 +1,6 @@ import { describe, it, vitest, expect, beforeAll, afterAll, afterEach } from 'vitest'; import React from 'react'; -import { renderHook, cleanup } from '@testing-library/react-hooks'; +import { renderHook, cleanup } from '@testing-library/react'; import i18nInstance from './i18n'; import { useTranslation } from '../src/useTranslation'; import { setI18n } from '../src/context'; @@ -162,25 +162,19 @@ describe('useTranslation', () => { describe('replacing i18n instance in provider', () => { i18nInstance.addResource('fr', 'translation', 'key1', 'test2'); const i18nInstanceClone = i18nInstance.cloneInstance({ lng: 'fr' }); - const wrapper = ({ children, i18n }) => ( - {children} + const wrapper = ({ children }) => ( + {children} ); - it('should render correct content', () => { + it('should render correct content', async () => { const { result, rerender } = renderHook(() => useTranslation(), { wrapper, - initialProps: { - i18n: i18nInstance, - }, + initialProps: { i18n: i18nInstance }, }); - const { t: t1 } = result.current; - expect(t1('key1')).toBe('test'); - + expect(result.current.t('key1')).toBe('test'); rerender({ i18n: i18nInstanceClone }); - - const { t: t2 } = result.current; - expect(t2('key1')).toBe('test2'); + expect(result.current.t('key1')).toBe('test2'); }); }); diff --git a/test/useTranslation.usedNamespaces.spec.js b/test/useTranslation.usedNamespaces.spec.js index 93d04394..c38a1d81 100644 --- a/test/useTranslation.usedNamespaces.spec.js +++ b/test/useTranslation.usedNamespaces.spec.js @@ -1,5 +1,5 @@ import { describe, it, vitest, expect, afterEach } from 'vitest'; -import { renderHook, cleanup } from '@testing-library/react-hooks/server'; +import { renderHook, cleanup } from '@testing-library/react'; import { useTranslation } from '../src/useTranslation'; vitest.unmock('../src/useTranslation'); @@ -22,6 +22,7 @@ describe('useTranslation', () => { isInitialized: true, changeLanguage: () => {}, getFixedT: () => (message) => message, + hasLoadedNamespace: () => false, hasResourceBundle: (lng, ns) => ns === 'ns1' || ns === 'ns2' || ns === 'ns3', loadNamespaces: () => {}, on: () => {}, @@ -29,6 +30,7 @@ describe('useTranslation', () => { options: {}, }; renderHook(() => useTranslation(['ns1', 'ns2', 'ns3'], { i18n })); + expect(i18n.reportNamespaces.getUsedNamespaces()).toEqual(['ns1', 'ns2', 'ns3']); }); });