From 110e5e373f44230ed5d1245090785e407dab3aea Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Mon, 18 Nov 2024 17:57:29 +0100 Subject: [PATCH 01/58] bump react to 19 rc.1 --- .circleci/config.yml | 2 +- package-lock.json | 31 ++++++++++--------- package.json | 4 +-- ...0.0-rc-378b305958-20240710.patch.disabled} | 0 4 files changed, 20 insertions(+), 17 deletions(-) rename patches/{react-dom-19+19.0.0-rc-378b305958-20240710.patch => react-dom-19+19.0.0-rc-378b305958-20240710.patch.disabled} (100%) diff --git a/.circleci/config.yml b/.circleci/config.yml index fadfeb1c535..4b79b363397 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -173,7 +173,7 @@ workflows: - "@types/react@16.8 @types/react-dom@16.8" - "@types/react@17 @types/react-dom@17" - "@types/react@18 @types/react-dom@18" - - "@types/react@npm:types-react@19.0.0-rc.0 @types/react-dom@npm:types-react-dom@19.0.0-rc.0" + - "@types/react@npm:types-react@19.0.0-rc.1 @types/react-dom@npm:types-react-dom@19.0.0-rc.1" - "typescript@next" security-scans: jobs: diff --git a/package-lock.json b/package-lock.json index c818114193f..fde11a6de7c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -86,10 +86,10 @@ "prettier": "3.1.1", "react": "18.3.1", "react-17": "npm:react@^17", - "react-19": "npm:react@19.0.0-rc-378b305958-20240710", + "react-19": "npm:react@19.0.0-rc.1", "react-dom": "18.3.1", "react-dom-17": "npm:react-dom@^17", - "react-dom-19": "npm:react-dom@19.0.0-rc-378b305958-20240710", + "react-dom-19": "npm:react-dom@19.0.0-rc.1", "react-error-boundary": "4.0.13", "recast": "0.23.9", "resolve": "1.22.8", @@ -11111,10 +11111,11 @@ }, "node_modules/react-19": { "name": "react", - "version": "19.0.0-rc-378b305958-20240710", - "resolved": "https://registry.npmjs.org/react/-/react-19.0.0-rc-378b305958-20240710.tgz", - "integrity": "sha512-z+c5SdYuX74FSlyDcBWXMmR7KN30rpak804OtidcgxvYoyU43YCT0GWHubH6UvnNDvaLsr5nl66AKmC2y7VwYA==", + "version": "19.0.0-rc.1", + "resolved": "https://registry.npmjs.org/react/-/react-19.0.0-rc.1.tgz", + "integrity": "sha512-NZKln+uyPuyHchzP07I6GGYFxdAoaKhehgpCa3ltJGzwE31OYumLeshGaitA1R/fS5d9D2qpZVwTFAr6zCLM9w==", "dev": true, + "license": "MIT", "engines": { "node": ">=0.10.0" } @@ -11159,22 +11160,24 @@ }, "node_modules/react-dom-19": { "name": "react-dom", - "version": "19.0.0-rc-378b305958-20240710", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0-rc-378b305958-20240710.tgz", - "integrity": "sha512-WpE0+4pnFMyuC9WxJGj7+XysxNChbwnCcFS7INR428/uUoECSTRmlQt05hTGFIyfpYBO1zGlXfMBAkrFmqh3wg==", + "version": "19.0.0-rc.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0-rc.1.tgz", + "integrity": "sha512-k8MfDX+4G+eaa1cXXI9QF4d+pQtYol3nx8vauqRWUEOPqC7NQn2qmEqUsLoSd28rrZUL+R3T2VC+kZ2Hyx1geQ==", "dev": true, + "license": "MIT", "dependencies": { - "scheduler": "0.25.0-rc-378b305958-20240710" + "scheduler": "0.25.0-rc.1" }, "peerDependencies": { - "react": "19.0.0-rc-378b305958-20240710" + "react": "19.0.0-rc.1" } }, "node_modules/react-dom-19/node_modules/scheduler": { - "version": "0.25.0-rc-378b305958-20240710", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0-rc-378b305958-20240710.tgz", - "integrity": "sha512-j6dzH6LeNjhKFSpxUiZT2E8tFvFTCQOn339mmzYA3QBLvIkgAtHzSrpdReKhFzw9x4hxazBjgE/4YwBLQBUNlw==", - "dev": true + "version": "0.25.0-rc.1", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0-rc.1.tgz", + "integrity": "sha512-fVinv2lXqYpKConAMdergOl5owd0rY1O4P/QTe0aWKCqGtu7VsCt1iqQFxSJtqK4Lci/upVSBpGwVC7eWcuS9Q==", + "dev": true, + "license": "MIT" }, "node_modules/react-error-boundary": { "version": "4.0.13", diff --git a/package.json b/package.json index 4ec3f50b12d..e10ac2d3fdb 100644 --- a/package.json +++ b/package.json @@ -168,10 +168,10 @@ "prettier": "3.1.1", "react": "18.3.1", "react-17": "npm:react@^17", - "react-19": "npm:react@19.0.0-rc-378b305958-20240710", + "react-19": "npm:react@19.0.0-rc.1", "react-dom": "18.3.1", "react-dom-17": "npm:react-dom@^17", - "react-dom-19": "npm:react-dom@19.0.0-rc-378b305958-20240710", + "react-dom-19": "npm:react-dom@19.0.0-rc.1", "react-error-boundary": "4.0.13", "recast": "0.23.9", "resolve": "1.22.8", diff --git a/patches/react-dom-19+19.0.0-rc-378b305958-20240710.patch b/patches/react-dom-19+19.0.0-rc-378b305958-20240710.patch.disabled similarity index 100% rename from patches/react-dom-19+19.0.0-rc-378b305958-20240710.patch rename to patches/react-dom-19+19.0.0-rc-378b305958-20240710.patch.disabled From 3226c834dea221081fdea882a3066befea88a6a5 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Mon, 25 Nov 2024 13:15:40 +0100 Subject: [PATCH 02/58] patch `REACT_FALLBACK_THROTTLE_MS` --- ....0.0-rc-378b305958-20240710.patch.disabled | 88 ------------------- patches/react-dom-19+19.0.0-rc.1.patch | 88 +++++++++++++++++++ 2 files changed, 88 insertions(+), 88 deletions(-) delete mode 100644 patches/react-dom-19+19.0.0-rc-378b305958-20240710.patch.disabled create mode 100644 patches/react-dom-19+19.0.0-rc.1.patch diff --git a/patches/react-dom-19+19.0.0-rc-378b305958-20240710.patch.disabled b/patches/react-dom-19+19.0.0-rc-378b305958-20240710.patch.disabled deleted file mode 100644 index fc7597f276a..00000000000 --- a/patches/react-dom-19+19.0.0-rc-378b305958-20240710.patch.disabled +++ /dev/null @@ -1,88 +0,0 @@ -diff --git a/node_modules/react-dom-19/cjs/react-dom-client.development.js b/node_modules/react-dom-19/cjs/react-dom-client.development.js -index f9ae214..c29f983 100644 ---- a/node_modules/react-dom-19/cjs/react-dom-client.development.js -+++ b/node_modules/react-dom-19/cjs/react-dom-client.development.js -@@ -14401,7 +14401,7 @@ - (lanes & RetryLanes) === lanes && - ((didTimeout = - globalMostRecentFallbackTime + -- FALLBACK_THROTTLE_MS - -+ (globalThis.REACT_FALLBACK_THROTTLE_MS || FALLBACK_THROTTLE_MS) - - now$1()), - 10 < didTimeout) - ) { -@@ -15599,7 +15599,7 @@ - (workInProgressRootExitStatus === RootSuspended && - (workInProgressRootRenderLanes & RetryLanes) === - workInProgressRootRenderLanes && -- now$1() - globalMostRecentFallbackTime < FALLBACK_THROTTLE_MS) -+ now$1() - globalMostRecentFallbackTime < (globalThis.REACT_FALLBACK_THROTTLE_MS || FALLBACK_THROTTLE_MS)) - ? (executionContext & RenderContext) === NoContext && - prepareFreshStack(root, 0) - : (workInProgressRootPingedLanes |= pingedLanes)); -diff --git a/node_modules/react-dom-19/cjs/react-dom-client.production.js b/node_modules/react-dom-19/cjs/react-dom-client.production.js -index b93642c..66bb184 100644 ---- a/node_modules/react-dom-19/cjs/react-dom-client.production.js -+++ b/node_modules/react-dom-19/cjs/react-dom-client.production.js -@@ -10071,7 +10071,7 @@ function performConcurrentWorkOnRoot(root, didTimeout) { - } - if ( - (lanes & 62914560) === lanes && -- ((didTimeout = globalMostRecentFallbackTime + 300 - now()), -+ ((didTimeout = globalMostRecentFallbackTime + (globalThis.REACT_FALLBACK_THROTTLE_MS || 300) - now()), - 10 < didTimeout) - ) { - markRootSuspended( -@@ -10936,7 +10936,7 @@ function pingSuspendedRoot(root, wakeable, pingedLanes) { - (3 === workInProgressRootExitStatus && - (workInProgressRootRenderLanes & 62914560) === - workInProgressRootRenderLanes && -- 300 > now() - globalMostRecentFallbackTime) -+ (globalThis.REACT_FALLBACK_THROTTLE_MS || 300) > now() - globalMostRecentFallbackTime) - ? 0 === (executionContext & 2) && prepareFreshStack(root, 0) - : (workInProgressRootPingedLanes |= pingedLanes)); - ensureRootIsScheduled(root); -diff --git a/node_modules/react-dom-19/cjs/react-dom-profiling.development.js b/node_modules/react-dom-19/cjs/react-dom-profiling.development.js -index 9e4fe6a..a4bd41e 100644 ---- a/node_modules/react-dom-19/cjs/react-dom-profiling.development.js -+++ b/node_modules/react-dom-19/cjs/react-dom-profiling.development.js -@@ -14409,7 +14409,7 @@ - (lanes & RetryLanes) === lanes && - ((didTimeout = - globalMostRecentFallbackTime + -- FALLBACK_THROTTLE_MS - -+ (globalThis.REACT_FALLBACK_THROTTLE_MS || FALLBACK_THROTTLE_MS) - - now$1()), - 10 < didTimeout) - ) { -@@ -15611,7 +15611,7 @@ - (workInProgressRootExitStatus === RootSuspended && - (workInProgressRootRenderLanes & RetryLanes) === - workInProgressRootRenderLanes && -- now$1() - globalMostRecentFallbackTime < FALLBACK_THROTTLE_MS) -+ now$1() - globalMostRecentFallbackTime < (globalThis.REACT_FALLBACK_THROTTLE_MS || FALLBACK_THROTTLE_MS)) - ? (executionContext & RenderContext) === NoContext && - prepareFreshStack(root, 0) - : (workInProgressRootPingedLanes |= pingedLanes)); -diff --git a/node_modules/react-dom-19/cjs/react-dom-profiling.profiling.js b/node_modules/react-dom-19/cjs/react-dom-profiling.profiling.js -index 683c9d9..000bb78 100644 ---- a/node_modules/react-dom-19/cjs/react-dom-profiling.profiling.js -+++ b/node_modules/react-dom-19/cjs/react-dom-profiling.profiling.js -@@ -10600,7 +10600,7 @@ function performConcurrentWorkOnRoot(root, didTimeout) { - } - if ( - (lanes & 62914560) === lanes && -- ((didTimeout = globalMostRecentFallbackTime + 300 - now$1()), -+ ((didTimeout = globalMostRecentFallbackTime + (globalThis.REACT_FALLBACK_THROTTLE_MS || 300) - now$1()), - 10 < didTimeout) - ) { - markRootSuspended( -@@ -11621,7 +11621,7 @@ function pingSuspendedRoot(root, wakeable, pingedLanes) { - (3 === workInProgressRootExitStatus && - (workInProgressRootRenderLanes & 62914560) === - workInProgressRootRenderLanes && -- 300 > now$1() - globalMostRecentFallbackTime) -+ (globalThis.REACT_FALLBACK_THROTTLE_MS || 300) > now$1() - globalMostRecentFallbackTime) - ? 0 === (executionContext & 2) && prepareFreshStack(root, 0) - : (workInProgressRootPingedLanes |= pingedLanes)); - ensureRootIsScheduled(root); diff --git a/patches/react-dom-19+19.0.0-rc.1.patch b/patches/react-dom-19+19.0.0-rc.1.patch new file mode 100644 index 00000000000..84fd1abf7ce --- /dev/null +++ b/patches/react-dom-19+19.0.0-rc.1.patch @@ -0,0 +1,88 @@ +diff --git a/node_modules/react-dom-19/cjs/react-dom-client.development.js b/node_modules/react-dom-19/cjs/react-dom-client.development.js +index 83ea1c6..7be6928 100644 +--- a/node_modules/react-dom-19/cjs/react-dom-client.development.js ++++ b/node_modules/react-dom-19/cjs/react-dom-client.development.js +@@ -14459,7 +14459,7 @@ + (lanes & 62914560) === lanes && + ((exitStatus = + globalMostRecentFallbackTime + +- FALLBACK_THROTTLE_MS - ++ (globalThis.REACT_FALLBACK_THROTTLE_MS || FALLBACK_THROTTLE_MS) - + now$1()), + 10 < exitStatus) + ) { +@@ -15596,7 +15596,7 @@ + (workInProgressRootExitStatus === RootSuspended && + (workInProgressRootRenderLanes & 62914560) === + workInProgressRootRenderLanes && +- now$1() - globalMostRecentFallbackTime < FALLBACK_THROTTLE_MS) ++ now$1() - globalMostRecentFallbackTime < (globalThis.REACT_FALLBACK_THROTTLE_MS || FALLBACK_THROTTLE_MS)) + ? (executionContext & RenderContext) === NoContext && + prepareFreshStack(root, 0) + : (workInProgressRootPingedLanes |= pingedLanes), +diff --git a/node_modules/react-dom-19/cjs/react-dom-client.production.js b/node_modules/react-dom-19/cjs/react-dom-client.production.js +index af7283a..78ef4e5 100644 +--- a/node_modules/react-dom-19/cjs/react-dom-client.production.js ++++ b/node_modules/react-dom-19/cjs/react-dom-client.production.js +@@ -10391,7 +10391,7 @@ function performWorkOnRoot(root$jscomp$0, lanes, forceSync) { + shouldTimeSlice.finishedLanes = lanes; + if ( + (lanes & 62914560) === lanes && +- ((renderWasConcurrent = globalMostRecentFallbackTime + 300 - now()), ++ ((renderWasConcurrent = globalMostRecentFallbackTime + (globalThis.REACT_FALLBACK_THROTTLE_MS || 300) - now()), + 10 < renderWasConcurrent) + ) { + markRootSuspended( +@@ -11260,7 +11260,7 @@ function pingSuspendedRoot(root, wakeable, pingedLanes) { + (3 === workInProgressRootExitStatus && + (workInProgressRootRenderLanes & 62914560) === + workInProgressRootRenderLanes && +- 300 > now() - globalMostRecentFallbackTime) ++ (globalThis.REACT_FALLBACK_THROTTLE_MS || 300) > now() - globalMostRecentFallbackTime) + ? 0 === (executionContext & 2) && prepareFreshStack(root, 0) + : (workInProgressRootPingedLanes |= pingedLanes), + workInProgressSuspendedRetryLanes === workInProgressRootRenderLanes && +diff --git a/node_modules/react-dom-19/cjs/react-dom-profiling.development.js b/node_modules/react-dom-19/cjs/react-dom-profiling.development.js +index 7847cbd..78c1fa2 100644 +--- a/node_modules/react-dom-19/cjs/react-dom-profiling.development.js ++++ b/node_modules/react-dom-19/cjs/react-dom-profiling.development.js +@@ -14467,7 +14467,7 @@ + (lanes & 62914560) === lanes && + ((exitStatus = + globalMostRecentFallbackTime + +- FALLBACK_THROTTLE_MS - ++ (globalThis.REACT_FALLBACK_THROTTLE_MS || FALLBACK_THROTTLE_MS) - + now$1()), + 10 < exitStatus) + ) { +@@ -15608,7 +15608,7 @@ + (workInProgressRootExitStatus === RootSuspended && + (workInProgressRootRenderLanes & 62914560) === + workInProgressRootRenderLanes && +- now$1() - globalMostRecentFallbackTime < FALLBACK_THROTTLE_MS) ++ now$1() - globalMostRecentFallbackTime < (globalThis.REACT_FALLBACK_THROTTLE_MS || FALLBACK_THROTTLE_MS)) + ? (executionContext & RenderContext) === NoContext && + prepareFreshStack(root, 0) + : (workInProgressRootPingedLanes |= pingedLanes), +diff --git a/node_modules/react-dom-19/cjs/react-dom-profiling.profiling.js b/node_modules/react-dom-19/cjs/react-dom-profiling.profiling.js +index 98a9f0b..8fae178 100644 +--- a/node_modules/react-dom-19/cjs/react-dom-profiling.profiling.js ++++ b/node_modules/react-dom-19/cjs/react-dom-profiling.profiling.js +@@ -10913,7 +10913,7 @@ function performWorkOnRoot(root$jscomp$0, lanes, forceSync) { + shouldTimeSlice.finishedLanes = lanes; + if ( + (lanes & 62914560) === lanes && +- ((renderWasConcurrent = globalMostRecentFallbackTime + 300 - now$1()), ++ ((renderWasConcurrent = globalMostRecentFallbackTime + (globalThis.REACT_FALLBACK_THROTTLE_MS || 300) - now$1()), + 10 < renderWasConcurrent) + ) { + markRootSuspended( +@@ -11881,7 +11881,7 @@ function pingSuspendedRoot(root, wakeable, pingedLanes) { + (3 === workInProgressRootExitStatus && + (workInProgressRootRenderLanes & 62914560) === + workInProgressRootRenderLanes && +- 300 > now$1() - globalMostRecentFallbackTime) ++ (globalThis.REACT_FALLBACK_THROTTLE_MS || 300) > now$1() - globalMostRecentFallbackTime) + ? 0 === (executionContext & 2) && prepareFreshStack(root, 0) + : (workInProgressRootPingedLanes |= pingedLanes), + workInProgressSuspendedRetryLanes === workInProgressRootRenderLanes && From db33a3bd404fea102939bee08bda4b510bfb27f5 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Tue, 26 Nov 2024 11:52:37 +0100 Subject: [PATCH 03/58] swap sync usages of `render` to their async counterparts --- package-lock.json | 75 +-- package.json | 4 +- .../hooks/__tests__/useSuspenseQuery.test.tsx | 473 +++++++++--------- 3 files changed, 267 insertions(+), 285 deletions(-) diff --git a/package-lock.json b/package-lock.json index fde11a6de7c..bd53bea1271 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,9 +38,9 @@ "@size-limit/esbuild-why": "11.1.4", "@size-limit/preset-small-lib": "11.1.4", "@testing-library/jest-dom": "6.4.6", - "@testing-library/react": "15.0.7", + "@testing-library/react": "https://pkg.csb.dev/testing-library/react-testing-library/commit/571fbc81/@testing-library/react", "@testing-library/react-12": "npm:@testing-library/react@^12", - "@testing-library/react-render-stream": "1.0.3", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@551d54f", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", @@ -3514,27 +3514,30 @@ "license": "MIT" }, "node_modules/@testing-library/react": { - "version": "15.0.7", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-15.0.7.tgz", - "integrity": "sha512-cg0RvEdD1TIhhkm1IeYMQxrzy0MtUNfa3minv4MjbgcYzJAZ7yD0i0lwoPOTPr+INtiXFezt2o8xMSnyHhEn2Q==", + "version": "0.0.0-semantically-released", + "resolved": "https://pkg.csb.dev/testing-library/react-testing-library/commit/571fbc81/@testing-library/react", + "integrity": "sha512-CX9zVmnIHb7JWdruCx8m2aQ8suxv+6X0VChTFvYg0YT7s+ZuTKLjfFOTJ2zpe0/y6xOAA3tlCVBzUAfYI+nMsw==", "dev": true, "license": "MIT", "dependencies": { - "@babel/runtime": "^7.12.5", - "@testing-library/dom": "^10.0.0", - "@types/react-dom": "^18.0.0" + "@babel/runtime": "^7.12.5" }, "engines": { "node": ">=18" }, "peerDependencies": { + "@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": { "@types/react": { "optional": true + }, + "@types/react-dom": { + "optional": true } } }, @@ -3578,14 +3581,14 @@ } }, "node_modules/@testing-library/react-render-stream": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@testing-library/react-render-stream/-/react-render-stream-1.0.3.tgz", - "integrity": "sha512-CltwyRRrpjZHKbAB6DwIcQo9mcPiGkmW4v3XHL7mWsI9xUHWzEbLzqiqErxuzuDQwI55LzjRF28aQLujrpMygw==", + "version": "0.0.0-semantically-released", + "resolved": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@551d54f", + "integrity": "sha512-xuN8laKyI8msW9Li0ixZrIs0EhZ/5k18/JqST2zE7zzvHBFIvjJHcPSKfUgZCkycpXeyt1dD74/zue9QkzZz2A==", "dev": true, "license": "MIT", "dependencies": { "@testing-library/dom": "^10.4.0", - "@testing-library/react": "^16.0.1", + "@testing-library/react": "https://pkg.csb.dev/testing-library/react-testing-library/commit/571fbc81/@testing-library/react/_pkg.tgz", "jsdom": "^25.0.1", "rehackt": "^0.1.0" }, @@ -3616,34 +3619,6 @@ "node": ">=18" } }, - "node_modules/@testing-library/react-render-stream/node_modules/@testing-library/react": { - "version": "16.0.1", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.0.1.tgz", - "integrity": "sha512-dSmwJVtJXmku+iocRhWOUFbrERC76TX2Mnf0ATODz8brzAZrMBbzLwQixlBSanZxR6LddK3eiwpSFZgDET1URg==", - "dev": true, - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.12.5" - }, - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "@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": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, "node_modules/@testing-library/react-render-stream/node_modules/agent-base": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz", @@ -3884,26 +3859,6 @@ "node": ">=18" } }, - "node_modules/@testing-library/react/node_modules/@testing-library/dom": { - "version": "10.3.1", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.3.1.tgz", - "integrity": "sha512-q/WL+vlXMpC0uXDyfsMtc1rmotzLV8Y0gq6q1gfrrDjQeHoeLrqHbxdPvPNAh1i+xuJl7+BezywcXArz7vLqKQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "@babel/code-frame": "^7.10.4", - "@babel/runtime": "^7.12.5", - "@types/aria-query": "^5.0.1", - "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": ">=18" - } - }, "node_modules/@testing-library/user-event": { "version": "14.5.2", "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz", diff --git a/package.json b/package.json index e10ac2d3fdb..41e03ce0a18 100644 --- a/package.json +++ b/package.json @@ -120,9 +120,9 @@ "@size-limit/esbuild-why": "11.1.4", "@size-limit/preset-small-lib": "11.1.4", "@testing-library/jest-dom": "6.4.6", - "@testing-library/react": "15.0.7", + "@testing-library/react": "https://pkg.csb.dev/testing-library/react-testing-library/commit/571fbc81/@testing-library/react", "@testing-library/react-12": "npm:@testing-library/react@^12", - "@testing-library/react-render-stream": "1.0.3", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@551d54f", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", diff --git a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx index 89621552d5c..c385403b475 100644 --- a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx +++ b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx @@ -3,10 +3,12 @@ import React, { Fragment, StrictMode, Suspense, useTransition } from "react"; import { act, screen, - render, - renderHook, + renderAsync, waitFor, RenderHookOptions, + renderHookAsync, + renderHook, + actAsync, } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { ErrorBoundary, FallbackProps } from "react-error-boundary"; @@ -61,10 +63,12 @@ import { import { createRenderStream, - renderToRenderStream, + renderToAsyncRenderStream, useTrackRenders, } from "@testing-library/react-render-stream"; +const IS_REACT_19 = React.version.startsWith("19"); + type RenderSuspenseHookOptions = Omit< RenderHookOptions, "wrapper" @@ -88,7 +92,7 @@ interface SimpleQueryData { greeting: string; } -function renderSuspenseHook( +async function renderSuspenseHook( render: (initialProps: Props) => Result, options: RenderSuspenseHookOptions = Object.create(null) ) { @@ -115,7 +119,7 @@ function renderSuspenseHook( link: options.link || new MockLink(mocks), }); - const view = renderHook( + const { rerender, ...view } = await renderHookAsync( (props) => { renders.count++; @@ -149,7 +153,12 @@ function renderSuspenseHook( } ); - return { ...view, renders }; + return { + ...view, + renders, + rerenderAsync: (props?: Props | undefined) => + actAsync(() => rerender(props)), + }; } function useSimpleQueryCase() { @@ -386,7 +395,7 @@ describe("useSuspenseQuery", () => { link: new MockLink(mocks), }); - const { takeRender, replaceSnapshot } = renderToRenderStream< + const { takeRender, replaceSnapshot } = await renderToAsyncRenderStream< UseSuspenseQueryResult >(, { snapshotDOM: true, @@ -417,7 +426,7 @@ describe("useSuspenseQuery", () => { it("suspends a query with variables and returns results", async () => { const { query, mocks } = useVariablesQueryCase(); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { variables: { id: "1" } }), { mocks } ); @@ -430,7 +439,7 @@ describe("useSuspenseQuery", () => { }); expect(renders.suspenseCount).toBe(1); - expect(renders.count).toBe(2); + expect(renders.count).toBe(IS_REACT_19 ? 3 : 2); expect(renders.frames).toMatchObject([ { ...mocks[0].result, @@ -443,7 +452,7 @@ describe("useSuspenseQuery", () => { it("returns the same results for the same variables", async () => { const { query, mocks } = useVariablesQueryCase(); - const { result, rerender, renders } = renderSuspenseHook( + const { result, rerenderAsync, renders } = await renderSuspenseHook( ({ id }) => useSuspenseQuery(query, { variables: { id } }), { mocks, initialProps: { id: "1" } } ); @@ -457,10 +466,10 @@ describe("useSuspenseQuery", () => { const previousResult = result.current; - rerender({ id: "1" }); + await rerenderAsync({ id: "1" }); expect(result.current).toBe(previousResult); - expect(renders.count).toBe(3); + expect(renders.count).toBe(4); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -479,7 +488,7 @@ describe("useSuspenseQuery", () => { it("ensures result is referentially stable", async () => { const { query, mocks } = useVariablesQueryCase(); - const { result, rerender } = renderSuspenseHook( + const { result, rerenderAsync } = await renderSuspenseHook( ({ id }) => useSuspenseQuery(query, { variables: { id } }), { mocks, initialProps: { id: "1" } } ); @@ -495,7 +504,7 @@ describe("useSuspenseQuery", () => { const previousResult = result.current; - rerender({ id: "1" }); + await rerenderAsync({ id: "1" }); expect(result.current).toBe(previousResult); }); @@ -508,7 +517,7 @@ describe("useSuspenseQuery", () => { cache: new InMemoryCache(), }); - const { result } = renderSuspenseHook(() => useSuspenseQuery(query), { + const { result } = await renderSuspenseHook(() => useSuspenseQuery(query), { client, }); @@ -573,7 +582,7 @@ describe("useSuspenseQuery", () => { data: { results }, }); - const { result } = renderSuspenseHook( + const { result } = await renderSuspenseHook( () => useSuspenseQuery(query, { canonizeResults: true }), { cache } ); @@ -625,7 +634,7 @@ describe("useSuspenseQuery", () => { data: { results }, }); - const { result } = renderSuspenseHook( + const { result } = await renderSuspenseHook( () => useSuspenseQuery(query, { canonizeResults: false }), { cache } ); @@ -648,7 +657,7 @@ describe("useSuspenseQuery", () => { cache: new InMemoryCache(), }); - const { result, unmount } = renderSuspenseHook( + const { result, unmount } = await renderSuspenseHook( () => useSuspenseQuery(query), { client } ); @@ -678,7 +687,7 @@ describe("useSuspenseQuery", () => { cache: new InMemoryCache(), }); - const { rerender, result, unmount } = renderSuspenseHook( + const { rerenderAsync, result, unmount } = await renderSuspenseHook( ({ id }) => useSuspenseQuery(query, { variables: { id } }), { client, initialProps: { id: "1" } } ); @@ -687,7 +696,7 @@ describe("useSuspenseQuery", () => { expect(result.current.data).toEqual(mocks[0].result.data) ); - rerender({ id: "2" }); + await rerenderAsync({ id: "2" }); await waitFor(() => { expect(result.current.data).toEqual(mocks[1].result.data); @@ -732,7 +741,7 @@ describe("useSuspenseQuery", () => { cache: new InMemoryCache(), }); - const { rerender, result, unmount } = renderSuspenseHook( + const { rerenderAsync, result, unmount } = await renderSuspenseHook( ({ client }) => useSuspenseQuery(query, { client, variables: { id: "1" } }), { initialProps: { client: client1 } } @@ -744,7 +753,7 @@ describe("useSuspenseQuery", () => { }) ); - rerender({ client: client2 }); + await rerenderAsync({ client: client2 }); await waitFor(() => { expect(result.current.data).toEqual({ @@ -801,7 +810,7 @@ describe("useSuspenseQuery", () => { return {data.greeting}; } - render(); + await renderAsync(); // Ensure suspends immediately expect(screen.getByText("Loading greeting...")).toBeInTheDocument(); @@ -867,7 +876,7 @@ describe("useSuspenseQuery", () => { return {data.greeting}; } - render(); + await renderAsync(); // Ensure suspends immediately expect(screen.getByText("Loading greeting...")).toBeInTheDocument(); @@ -927,7 +936,7 @@ describe("useSuspenseQuery", () => { return {data.greeting}; } - render(); + await renderAsync(); // Ensure suspends immediately expect(screen.getByText("Loading greeting...")).toBeInTheDocument(); @@ -979,7 +988,7 @@ describe("useSuspenseQuery", () => { return {data.greeting}; } - render(); + await renderAsync(); // Ensure suspends immediately expect(screen.getByText("Loading greeting...")).toBeInTheDocument(); @@ -1014,7 +1023,7 @@ describe("useSuspenseQuery", () => { cache: new InMemoryCache(), }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { client: localClient }), { client: globalClient } ); @@ -1049,7 +1058,7 @@ describe("useSuspenseQuery", () => { cache: new InMemoryCache(), }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { client: localClient }), { strictMode: true, client: globalClient } ); @@ -1084,7 +1093,7 @@ describe("useSuspenseQuery", () => { cache: new InMemoryCache(), }); - const { result } = renderSuspenseHook(() => useSuspenseQuery(query), { + const { result } = await renderSuspenseHook(() => useSuspenseQuery(query), { client, }); @@ -1099,7 +1108,7 @@ describe("useSuspenseQuery", () => { it("suspends when changing variables", async () => { const { query, mocks } = useVariablesQueryCase(); - const { result, rerender, renders } = renderSuspenseHook( + const { result, rerenderAsync, renders } = await renderSuspenseHook( ({ id }) => useSuspenseQuery(query, { variables: { id } }), { mocks, initialProps: { id: "1" } } ); @@ -1112,7 +1121,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ id: "2" }); + await rerenderAsync({ id: "2" }); await waitFor(() => { expect(result.current).toMatchObject({ @@ -1161,7 +1170,7 @@ describe("useSuspenseQuery", () => { ]), }); - const { result, rerender, renders } = renderSuspenseHook( + const { result, rerenderAsync, renders } = await renderSuspenseHook( ({ client }) => useSuspenseQuery(query, { client }), { initialProps: { client: client1 } } ); @@ -1174,7 +1183,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ client: client2 }); + await rerenderAsync({ client: client2 }); await waitFor(() => { expect(result.current).toMatchObject({ @@ -1284,7 +1293,7 @@ describe("useSuspenseQuery", () => { ); } - render(); + await renderAsync(); expect(screen.getByText("Loading first")).toBeInTheDocument(); expect(screen.getByText("Loading second")).toBeInTheDocument(); @@ -1334,7 +1343,7 @@ describe("useSuspenseQuery", () => { }, ]; - const { result, rerender, renders } = renderSuspenseHook( + const { result, rerenderAsync, renders } = await renderSuspenseHook( ({ queryKey }) => // intentionally use a fetch policy that will execute a network request useSuspenseQuery(query, { queryKey, fetchPolicy: "network-only" }), @@ -1349,7 +1358,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ queryKey: ["second"] }); + await rerenderAsync({ queryKey: ["second"] }); await waitFor(() => { expect(result.current).toMatchObject({ @@ -1391,7 +1400,7 @@ describe("useSuspenseQuery", () => { }, ]; - const { result, rerender, renders } = renderSuspenseHook( + const { result, rerenderAsync, renders } = await renderSuspenseHook( ({ queryKey }) => // intentionally use a fetch policy that will execute a network request useSuspenseQuery(query, { queryKey, fetchPolicy: "network-only" }), @@ -1406,7 +1415,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ queryKey: ["greeting", 2] }); + await rerenderAsync({ queryKey: ["greeting", 2] }); await waitFor(() => { expect(result.current).toMatchObject({ @@ -1448,7 +1457,7 @@ describe("useSuspenseQuery", () => { }, ]; - const { result, rerender, renders } = renderSuspenseHook( + const { result, rerenderAsync, renders } = await renderSuspenseHook( ({ queryKey }) => // intentionally use a fetch policy that will execute a network request useSuspenseQuery(query, { queryKey, fetchPolicy: "network-only" }), @@ -1463,7 +1472,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ queryKey: "second" }); + await rerenderAsync({ queryKey: "second" }); await waitFor(() => { expect(result.current).toMatchObject({ @@ -1505,7 +1514,7 @@ describe("useSuspenseQuery", () => { }, ]; - const { result, rerender, renders } = renderSuspenseHook( + const { result, rerenderAsync, renders } = await renderSuspenseHook( ({ queryKey }) => // intentionally use a fetch policy that will execute a network request useSuspenseQuery(query, { queryKey, fetchPolicy: "network-only" }), @@ -1520,7 +1529,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ queryKey: 2 }); + await rerenderAsync({ queryKey: 2 }); await waitFor(() => { expect(result.current).toMatchObject({ @@ -1554,7 +1563,7 @@ describe("useSuspenseQuery", () => { link: new MockLink(mocks), }); - const { result, rerender, renders } = renderSuspenseHook( + const { result, rerenderAsync, renders } = await renderSuspenseHook( ({ id }) => useSuspenseQuery(query, { variables: { id } }), { client, initialProps: { id: "1" } } ); @@ -1567,7 +1576,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ id: "2" }); + await rerenderAsync({ id: "2" }); await waitFor(() => { expect(result.current).toMatchObject({ @@ -1615,7 +1624,7 @@ describe("useSuspenseQuery", () => { it("uses cached result and does not suspend when switching back to already used variables while using `cache-first` fetch policy", async () => { const { query, mocks } = useVariablesQueryCase(); - const { result, rerender, renders } = renderSuspenseHook( + const { result, rerenderAsync, renders } = await renderSuspenseHook( ({ id }) => useSuspenseQuery(query, { fetchPolicy: "cache-first", @@ -1632,7 +1641,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ id: "2" }); + await rerenderAsync({ id: "2" }); await waitFor(() => { expect(result.current).toMatchObject({ @@ -1642,7 +1651,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ id: "1" }); + await rerenderAsync({ id: "1" }); expect(result.current).toMatchObject({ ...mocks[0].result, @@ -1717,7 +1726,7 @@ describe("useSuspenseQuery", () => { }, ]; - const { result, rerender, renders } = renderSuspenseHook( + const { result, rerenderAsync, renders } = await renderSuspenseHook( ({ id }) => useSuspenseQuery(query, { fetchPolicy: "cache-and-network", @@ -1734,7 +1743,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ id: "2" }); + await rerenderAsync({ id: "2" }); await waitFor(() => { expect(result.current).toMatchObject({ @@ -1744,7 +1753,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ id: "1" }); + await rerenderAsync({ id: "1" }); expect(result.current).toMatchObject({ ...mocks[0].result, @@ -1832,7 +1841,7 @@ describe("useSuspenseQuery", () => { }, ]; - const { result, rerender, renders } = renderSuspenseHook( + const { result, rerenderAsync, renders } = await renderSuspenseHook( ({ id }) => useSuspenseQuery(query, { fetchPolicy: "network-only", @@ -1849,7 +1858,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ id: "2" }); + await rerenderAsync({ id: "2" }); await waitFor(() => { expect(result.current).toMatchObject({ @@ -1859,7 +1868,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ id: "1" }); + await rerenderAsync({ id: "1" }); await waitFor(() => { expect(result.current).toMatchObject({ @@ -1936,7 +1945,7 @@ describe("useSuspenseQuery", () => { }, ]; - const { result, rerender, renders } = renderSuspenseHook( + const { result, rerenderAsync, renders } = await renderSuspenseHook( ({ id }) => useSuspenseQuery(query, { fetchPolicy: "no-cache", @@ -1953,7 +1962,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ id: "2" }); + await rerenderAsync({ id: "2" }); await waitFor(() => { expect(result.current).toMatchObject({ @@ -1963,7 +1972,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ id: "1" }); + await rerenderAsync({ id: "1" }); await waitFor(() => { expect(result.current).toMatchObject({ @@ -2002,7 +2011,7 @@ describe("useSuspenseQuery", () => { link: new MockLink(mocks), }); - const { result, rerender, renders } = renderSuspenseHook( + const { result, rerenderAsync, renders } = await renderSuspenseHook( ({ id }) => useSuspenseQuery(query, { variables: { id } }), { client, initialProps: { id: "1" } } ); @@ -2015,7 +2024,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ id: "2" }); + await rerenderAsync({ id: "2" }); await waitFor(() => { expect(result.current).toMatchObject({ @@ -2025,7 +2034,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ id: "1" }); + await rerenderAsync({ id: "1" }); await waitFor(() => { expect(result.current).toMatchObject({ @@ -2085,7 +2094,7 @@ describe("useSuspenseQuery", () => { data: { greeting: "hello from cache" }, }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { fetchPolicy: "cache-first" }), { cache, mocks } ); @@ -2129,7 +2138,7 @@ describe("useSuspenseQuery", () => { data: { greeting: "hello from cache" }, }); - renderSuspenseHook( + await renderSuspenseHook( () => useSuspenseQuery(query, { fetchPolicy: "cache-first" }), { cache, link, initialProps: { id: "1" } } ); @@ -2169,7 +2178,7 @@ describe("useSuspenseQuery", () => { data: { character: { id: "1" } }, }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(fullQuery, { fetchPolicy: "cache-first" }), { cache, mocks } ); @@ -2225,7 +2234,7 @@ describe("useSuspenseQuery", () => { data: { character: { id: "1" } }, }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(fullQuery, { fetchPolicy: "cache-first", @@ -2284,7 +2293,7 @@ describe("useSuspenseQuery", () => { variables: { id: "1" }, }); - const { result, renders, rerender } = renderSuspenseHook( + const { result, renders, rerenderAsync } = await renderSuspenseHook( ({ id }) => useSuspenseQuery(fullQuery, { fetchPolicy: "cache-first", @@ -2309,7 +2318,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ id: "2" }); + await rerenderAsync({ id: "2" }); await waitFor(() => { expect(result.current).toMatchObject({ @@ -2350,7 +2359,7 @@ describe("useSuspenseQuery", () => { data: { greeting: "hello from cache" }, }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { fetchPolicy: "network-only" }), { cache, mocks } ); @@ -2406,7 +2415,7 @@ describe("useSuspenseQuery", () => { data: { character: { id: "1" } }, }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(fullQuery, { fetchPolicy: "network-only", @@ -2446,7 +2455,7 @@ describe("useSuspenseQuery", () => { data: { greeting: "hello from cache" }, }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { fetchPolicy: "no-cache" }), { cache, mocks } ); @@ -2478,7 +2487,7 @@ describe("useSuspenseQuery", () => { const cache = new InMemoryCache(); - const { result, rerender, renders } = renderSuspenseHook( + const { result, rerenderAsync, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { fetchPolicy: "no-cache" }), { cache, mocks } ); @@ -2501,7 +2510,7 @@ describe("useSuspenseQuery", () => { }, ]); - rerender(); + await rerenderAsync(); expect(result.current).toMatchObject({ ...mocks[0].result, @@ -2558,7 +2567,7 @@ describe("useSuspenseQuery", () => { data: { character: { id: "1" } }, }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(fullQuery, { fetchPolicy: "no-cache", @@ -2593,7 +2602,7 @@ describe("useSuspenseQuery", () => { const { query, mocks } = useSimpleQueryCase(); - renderSuspenseHook( + await renderSuspenseHook( () => useSuspenseQuery(query, { fetchPolicy: "no-cache", @@ -2618,7 +2627,7 @@ describe("useSuspenseQuery", () => { data: { greeting: "hello from cache" }, }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { fetchPolicy: "cache-and-network" }), { cache, mocks } ); @@ -2685,7 +2694,7 @@ describe("useSuspenseQuery", () => { data: { character: { id: "1" } }, }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(fullQuery, { fetchPolicy: "cache-and-network", @@ -2744,7 +2753,7 @@ describe("useSuspenseQuery", () => { variables: { id: "1" }, }); - const { result, renders, rerender } = renderSuspenseHook( + const { result, renders, rerenderAsync } = await renderSuspenseHook( ({ id }) => useSuspenseQuery(fullQuery, { fetchPolicy: "cache-and-network", @@ -2769,7 +2778,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ id: "2" }); + await rerenderAsync({ id: "2" }); await waitFor(() => { expect(result.current).toMatchObject({ @@ -2811,7 +2820,7 @@ describe("useSuspenseQuery", () => { const cache = new InMemoryCache(); - const { result } = renderSuspenseHook( + const { result } = await renderSuspenseHook( ({ id }) => useSuspenseQuery(query, { fetchPolicy, variables: { id } }), { cache, mocks, initialProps: { id: "1" } } ); @@ -2831,7 +2840,7 @@ describe("useSuspenseQuery", () => { const cache = new InMemoryCache(); - const { result } = renderSuspenseHook( + const { result } = await renderSuspenseHook( ({ id }) => useSuspenseQuery(query, { fetchPolicy: "no-cache", variables: { id } }), { cache, mocks, initialProps: { id: "1" } } @@ -2860,7 +2869,7 @@ describe("useSuspenseQuery", () => { link: new MockLink(mocks), }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { fetchPolicy }), { client } ); @@ -2906,7 +2915,7 @@ describe("useSuspenseQuery", () => { link: new MockLink(mocks), }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { fetchPolicy: "no-cache" }), { client } ); @@ -2949,7 +2958,7 @@ describe("useSuspenseQuery", () => { async (fetchPolicy) => { const { query, mocks } = useVariablesQueryCase(); - const { result, rerender, renders } = renderSuspenseHook( + const { result, rerenderAsync, renders } = await renderSuspenseHook( ({ id }) => useSuspenseQuery(query, { fetchPolicy, variables: { id } }), { mocks, initialProps: { id: "1" } } ); @@ -2962,7 +2971,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ id: "2" }); + await rerenderAsync({ id: "2" }); await waitFor(() => { expect(result.current).toMatchObject({ @@ -3025,7 +3034,7 @@ describe("useSuspenseQuery", () => { }, ]; - const { result, rerender, renders } = renderSuspenseHook( + const { result, rerenderAsync, renders } = await renderSuspenseHook( ({ query }) => useSuspenseQuery(query, { fetchPolicy }), { mocks, initialProps: { query: query1 as DocumentNode } } ); @@ -3039,7 +3048,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ query: query2 }); + await rerenderAsync({ query: query2 }); await waitFor(() => { expect(result.current).toMatchObject({ @@ -3100,7 +3109,7 @@ describe("useSuspenseQuery", () => { }); }); - const { result, rerender } = renderSuspenseHook( + const { result, rerenderAsync } = await renderSuspenseHook( ({ id }) => useSuspenseQuery(query, { fetchPolicy, variables: { id } }), { link, initialProps: { id: "1" } } ); @@ -3111,7 +3120,7 @@ describe("useSuspenseQuery", () => { expect(fetchCount).toBe(1); - rerender({ id: "2" }); + await rerenderAsync({ id: "2" }); await waitFor(() => { expect(result.current.data).toEqual(mocks[1].result.data); @@ -3150,7 +3159,7 @@ describe("useSuspenseQuery", () => { }); }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( ({ id }) => useSuspenseQuery(query, { fetchPolicy, variables: { id } }), { strictMode: true, link, initialProps: { id: "1" } } ); @@ -3182,7 +3191,7 @@ describe("useSuspenseQuery", () => { link: new MockLink(mocks), }); - const { result } = renderSuspenseHook( + const { result } = await renderSuspenseHook( () => useSuspenseQuery(query, { fetchPolicy }), { strictMode: true, client } ); @@ -3220,7 +3229,7 @@ describe("useSuspenseQuery", () => { data: { greeting: "Hello from cache" }, }); - const { result } = renderSuspenseHook( + const { result } = await renderSuspenseHook( () => useSuspenseQuery(query, { fetchPolicy: "cache-first" }), { client } ); @@ -3264,7 +3273,7 @@ describe("useSuspenseQuery", () => { client.writeQuery({ query, data: { greeting: "hello from cache" } }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query), { client } ); @@ -3297,7 +3306,7 @@ describe("useSuspenseQuery", () => { }, }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query), { client } ); @@ -3332,7 +3341,7 @@ describe("useSuspenseQuery", () => { }, }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query), { strictMode: true, client } ); @@ -3383,7 +3392,7 @@ describe("useSuspenseQuery", () => { }, }); - const { result, rerender, renders } = renderSuspenseHook( + const { result, rerenderAsync, renders } = await renderSuspenseHook( ({ source }) => useSuspenseQuery(query, { fetchPolicy: "network-only", @@ -3402,7 +3411,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ source: "rerender" }); + await rerenderAsync({ source: "rerender" }); await waitFor(() => { expect(result.current).toMatchObject({ @@ -3454,7 +3463,7 @@ describe("useSuspenseQuery", () => { }, }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { variables: { source: "local", globalOnlyVar: undefined }, @@ -3504,7 +3513,7 @@ describe("useSuspenseQuery", () => { }), }); - const { result } = renderSuspenseHook( + const { result } = await renderSuspenseHook( () => useSuspenseQuery(query, { context: { valueA: "A", valueB: "B" }, @@ -3528,9 +3537,12 @@ describe("useSuspenseQuery", () => { networkError: new Error("Could not fetch"), }); - const { renders } = renderSuspenseHook(() => useSuspenseQuery(query), { - mocks, - }); + const { renders } = await renderSuspenseHook( + () => useSuspenseQuery(query), + { + mocks, + } + ); await waitFor(() => expect(renders.errorCount).toBe(1)); @@ -3552,9 +3564,12 @@ describe("useSuspenseQuery", () => { graphQLErrors: [new GraphQLError("`id` should not be null")], }); - const { renders } = renderSuspenseHook(() => useSuspenseQuery(query), { - mocks, - }); + const { renders } = await renderSuspenseHook( + () => useSuspenseQuery(query), + { + mocks, + } + ); await waitFor(() => expect(renders.errorCount).toBe(1)); @@ -3584,9 +3599,12 @@ describe("useSuspenseQuery", () => { link: new MockLink(mocks), }); - const { renders } = renderSuspenseHook(() => useSuspenseQuery(query), { - client, - }); + const { renders } = await renderSuspenseHook( + () => useSuspenseQuery(query), + { + client, + } + ); await waitFor(() => expect(renders.errorCount).toBe(1)); @@ -3632,7 +3650,7 @@ describe("useSuspenseQuery", () => { link: new MockLink(mocks), }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { variables: { id: "1" } }), { client } ); @@ -3660,7 +3678,7 @@ describe("useSuspenseQuery", () => { networkError: new Error("Could not fetch"), }); - const { renders } = renderSuspenseHook( + const { renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { errorPolicy: "none" }), { mocks } ); @@ -3685,7 +3703,7 @@ describe("useSuspenseQuery", () => { graphQLErrors: [new GraphQLError("`id` should not be null")], }); - const { renders } = renderSuspenseHook( + const { renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { errorPolicy: "none" }), { mocks } ); @@ -3715,7 +3733,7 @@ describe("useSuspenseQuery", () => { const { query, mocks } = useErrorCase({ graphQLErrors }); - const { renders } = renderSuspenseHook( + const { renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { errorPolicy: "none" }), { mocks } ); @@ -3739,7 +3757,7 @@ describe("useSuspenseQuery", () => { const { query, mocks } = useErrorCase({ networkError }); - const { renders } = renderSuspenseHook( + const { renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { errorPolicy: "ignore" }), { mocks } ); @@ -3764,7 +3782,7 @@ describe("useSuspenseQuery", () => { graphQLErrors: [new GraphQLError("`id` should not be null")], }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { errorPolicy: "ignore" }), { mocks } ); @@ -3792,7 +3810,7 @@ describe("useSuspenseQuery", () => { graphQLErrors: [new GraphQLError("`name` could not be found")], }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { errorPolicy: "ignore" }), { mocks } ); @@ -3822,7 +3840,7 @@ describe("useSuspenseQuery", () => { ], }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { errorPolicy: "ignore" }), { mocks } ); @@ -3850,7 +3868,7 @@ describe("useSuspenseQuery", () => { cache: new InMemoryCache(), }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { errorPolicy: "ignore" }), { client } ); @@ -3908,7 +3926,7 @@ describe("useSuspenseQuery", () => { const { query, mocks } = useErrorCase({ networkError }); - const { renders } = renderSuspenseHook( + const { renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { errorPolicy: "all" }), { mocks } ); @@ -3933,7 +3951,7 @@ describe("useSuspenseQuery", () => { const { query, mocks } = useErrorCase({ graphQLErrors: [graphQLError] }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { errorPolicy: "all" }), { mocks } ); @@ -3974,7 +3992,7 @@ describe("useSuspenseQuery", () => { cache: new InMemoryCache(), }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { errorPolicy: "all" }), { client } ); @@ -4033,7 +4051,7 @@ describe("useSuspenseQuery", () => { const { query, mocks } = useErrorCase({ graphQLErrors }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { errorPolicy: "all" }), { mocks } ); @@ -4074,7 +4092,7 @@ describe("useSuspenseQuery", () => { graphQLErrors: [graphQLError], }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { errorPolicy: "all" }), { mocks } ); @@ -4105,7 +4123,7 @@ describe("useSuspenseQuery", () => { graphQLErrors: [graphQLError], }); - const { result, rerender } = renderSuspenseHook( + const { result, rerenderAsync } = await renderSuspenseHook( () => useSuspenseQuery(query, { errorPolicy: "all" }), { mocks } ); @@ -4116,7 +4134,7 @@ describe("useSuspenseQuery", () => { expect(result.current.error).toEqual(expectedError); }); - rerender(); + await rerenderAsync(); expect(result.current.error).toEqual(expectedError); }); @@ -4148,7 +4166,7 @@ describe("useSuspenseQuery", () => { }, ]; - const { result, renders, rerender } = renderSuspenseHook( + const { result, renders, rerenderAsync } = await renderSuspenseHook( ({ id }) => useSuspenseQuery(query, { errorPolicy: "all", variables: { id } }), { mocks, initialProps: { id: "1" } } @@ -4164,7 +4182,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ id: "2" }); + await rerenderAsync({ id: "2" }); await waitFor(() => { expect(result.current).toMatchObject({ @@ -4217,7 +4235,7 @@ describe("useSuspenseQuery", () => { }, ]; - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { variables: { id: "1" } }), { mocks, initialProps: { id: "1" } } ); @@ -4334,7 +4352,7 @@ describe("useSuspenseQuery", () => { ); } - render(); + await renderAsync(); expect(await screen.findByText("Loading")).toBeInTheDocument(); @@ -4380,7 +4398,7 @@ describe("useSuspenseQuery", () => { }, ]; - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { variables: { id: "1" } }), { mocks } ); @@ -4451,7 +4469,7 @@ describe("useSuspenseQuery", () => { }, ]; - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { variables: { id: "1" } }), { mocks, initialProps: { id: "1" } } ); @@ -4535,7 +4553,7 @@ describe("useSuspenseQuery", () => { }, ]; - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { variables: { id: "1" } }), { mocks } ); @@ -4595,7 +4613,7 @@ describe("useSuspenseQuery", () => { }, ]; - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { errorPolicy: "ignore", @@ -4657,7 +4675,7 @@ describe("useSuspenseQuery", () => { }, ]; - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { errorPolicy: "all", @@ -4732,7 +4750,7 @@ describe("useSuspenseQuery", () => { }, ]; - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { errorPolicy: "all", @@ -4783,7 +4801,7 @@ describe("useSuspenseQuery", () => { it("re-suspends when calling `fetchMore` with different variables", async () => { const { data, query, link } = usePaginatedCase(); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { variables: { limit: 2 } }), { link } ); @@ -4865,7 +4883,7 @@ describe("useSuspenseQuery", () => { ); } - render(); + await renderAsync(); expect(await screen.findByText("Loading")).toBeInTheDocument(); @@ -4896,7 +4914,7 @@ describe("useSuspenseQuery", () => { data: { greeting: "hello from cache" }, }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query), { cache, mocks } ); @@ -4938,7 +4956,7 @@ describe("useSuspenseQuery", () => { it("properly uses `updateQuery` when calling `fetchMore`", async () => { const { data, query, link } = usePaginatedCase(); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { variables: { limit: 2 } }), { link } ); @@ -4993,7 +5011,7 @@ describe("useSuspenseQuery", () => { }, }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { variables: { limit: 2 } }), { cache, link } ); @@ -5071,7 +5089,7 @@ describe("useSuspenseQuery", () => { }, }); - const { result } = renderSuspenseHook( + const { result } = await renderSuspenseHook( () => useSuspenseQuery(query, { variables: { min: 0, max: 12 }, @@ -5147,7 +5165,7 @@ describe("useSuspenseQuery", () => { }, }); - const { result } = renderSuspenseHook( + const { result } = await renderSuspenseHook( () => useSuspenseQuery(query, { variables: { min: 0, max: 12 }, @@ -5226,7 +5244,7 @@ describe("useSuspenseQuery", () => { }, }); - const { result } = renderSuspenseHook( + const { result } = await renderSuspenseHook( () => useSuspenseQuery(query, { variables: { min: 0, max: 12 } }), { cache, mocks } ); @@ -5264,7 +5282,7 @@ describe("useSuspenseQuery", () => { const cache = new InMemoryCache(); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { skip: true }), { cache, mocks } ); @@ -5282,7 +5300,7 @@ describe("useSuspenseQuery", () => { const cache = new InMemoryCache(); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, skipToken), { cache, mocks } ); @@ -5300,7 +5318,7 @@ describe("useSuspenseQuery", () => { const cache = new InMemoryCache(); - const { result, renders, rerender } = renderSuspenseHook( + const { result, renders, rerenderAsync } = await renderSuspenseHook( ({ skip }) => useSuspenseQuery(query, { skip }), { cache, mocks, initialProps: { skip: true } } ); @@ -5312,7 +5330,7 @@ describe("useSuspenseQuery", () => { error: undefined, }); - rerender({ skip: false }); + await rerenderAsync({ skip: false }); expect(renders.suspenseCount).toBe(1); @@ -5339,7 +5357,7 @@ describe("useSuspenseQuery", () => { it("suspends when switching away from `skipToken` in options", async () => { const { query, mocks } = useSimpleQueryCase(); - const { result, renders, rerender } = renderSuspenseHook( + const { result, renders, rerenderAsync } = await renderSuspenseHook( ({ skip }) => useSuspenseQuery(query, skip ? skipToken : void 0), { mocks, initialProps: { skip: true } } ); @@ -5351,7 +5369,7 @@ describe("useSuspenseQuery", () => { error: undefined, }); - rerender({ skip: false }); + await rerenderAsync({ skip: false }); expect(renders.suspenseCount).toBe(1); @@ -5380,7 +5398,7 @@ describe("useSuspenseQuery", () => { const cache = new InMemoryCache(); - const { result, renders, rerender } = renderSuspenseHook( + const { result, renders, rerenderAsync } = await renderSuspenseHook( ({ skip }) => useSuspenseQuery(query, { skip }), { cache, mocks, initialProps: { skip: false } } ); @@ -5395,7 +5413,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ skip: true }); + await rerenderAsync({ skip: true }); expect(renders.suspenseCount).toBe(1); @@ -5426,7 +5444,7 @@ describe("useSuspenseQuery", () => { const cache = new InMemoryCache(); - const { result, renders, rerender } = renderSuspenseHook( + const { result, renders, rerenderAsync } = await renderSuspenseHook( ({ skip }) => useSuspenseQuery(query, skip ? skipToken : void 0), { cache, mocks, initialProps: { skip: false } } ); @@ -5441,7 +5459,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ skip: true }); + await rerenderAsync({ skip: true }); expect(renders.suspenseCount).toBe(1); @@ -5489,14 +5507,14 @@ describe("useSuspenseQuery", () => { }); }); - const { result, rerender } = renderSuspenseHook( + const { result, rerenderAsync } = await renderSuspenseHook( ({ skip, id }) => useSuspenseQuery(query, { skip, variables: { id } }), { mocks, link, initialProps: { skip: true, id: "1" } } ); expect(fetchCount).toBe(0); - rerender({ skip: false, id: "1" }); + await rerenderAsync({ skip: false, id: "1" }); expect(fetchCount).toBe(1); @@ -5508,7 +5526,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ skip: true, id: "2" }); + await rerenderAsync({ skip: true, id: "2" }); expect(fetchCount).toBe(1); }); @@ -5535,7 +5553,7 @@ describe("useSuspenseQuery", () => { }); }); - const { result, rerender } = renderSuspenseHook( + const { result, rerenderAsync } = await renderSuspenseHook( ({ skip, id }) => useSuspenseQuery(query, skip ? skipToken : { variables: { id } }), { mocks, link, initialProps: { skip: true, id: "1" } } @@ -5543,7 +5561,7 @@ describe("useSuspenseQuery", () => { expect(fetchCount).toBe(0); - rerender({ skip: false, id: "1" }); + await rerenderAsync({ skip: false, id: "1" }); expect(fetchCount).toBe(1); @@ -5555,7 +5573,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ skip: true, id: "2" }); + await rerenderAsync({ skip: true, id: "2" }); expect(fetchCount).toBe(1); }); @@ -5583,7 +5601,7 @@ describe("useSuspenseQuery", () => { }); }); - const { result, rerender } = renderSuspenseHook( + const { result, rerenderAsync } = await renderSuspenseHook( ({ skip, id }) => useSuspenseQuery(query, skip ? skipToken : { variables: { id } }), { mocks, link, strictMode: true, initialProps: { skip: true, id: "1" } } @@ -5591,7 +5609,7 @@ describe("useSuspenseQuery", () => { expect(fetchCount).toBe(0); - rerender({ skip: false, id: "1" }); + await rerenderAsync({ skip: false, id: "1" }); expect(fetchCount).toBe(1); @@ -5603,7 +5621,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ skip: true, id: "2" }); + await rerenderAsync({ skip: true, id: "2" }); expect(fetchCount).toBe(1); }); @@ -5630,14 +5648,14 @@ describe("useSuspenseQuery", () => { }); }); - const { result, rerender } = renderSuspenseHook( + const { result, rerenderAsync } = await renderSuspenseHook( ({ skip, id }) => useSuspenseQuery(query, { skip, variables: { id } }), { mocks, link, strictMode: true, initialProps: { skip: true, id: "1" } } ); expect(fetchCount).toBe(0); - rerender({ skip: false, id: "1" }); + await rerenderAsync({ skip: false, id: "1" }); expect(fetchCount).toBe(1); @@ -5649,7 +5667,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ skip: true, id: "2" }); + await rerenderAsync({ skip: true, id: "2" }); expect(fetchCount).toBe(1); }); @@ -5657,18 +5675,18 @@ describe("useSuspenseQuery", () => { it("`skip` result is referentially stable", async () => { const { query, mocks } = useSimpleQueryCase(); - const { result, rerender } = renderSuspenseHook( + const { result, rerenderAsync } = await renderSuspenseHook( ({ skip }) => useSuspenseQuery(query, { skip }), { mocks, initialProps: { skip: true } } ); const skipResult = result.current; - rerender({ skip: true }); + await rerenderAsync({ skip: true }); expect(result.current).toBe(skipResult); - rerender({ skip: false }); + await rerenderAsync({ skip: false }); await waitFor(() => { expect(result.current.data).toEqual(mocks[0].result.data); @@ -5676,7 +5694,7 @@ describe("useSuspenseQuery", () => { const fetchedSkipResult = result.current; - rerender({ skip: false }); + await rerenderAsync({ skip: false }); expect(fetchedSkipResult).toBe(fetchedSkipResult); }); @@ -5684,18 +5702,18 @@ describe("useSuspenseQuery", () => { it("`skip` result is referentially stable when using `skipToken` as options", async () => { const { query, mocks } = useSimpleQueryCase(); - const { result, rerender } = renderSuspenseHook( + const { result, rerenderAsync } = await renderSuspenseHook( ({ skip }) => useSuspenseQuery(query, skip ? skipToken : void 0), { mocks, initialProps: { skip: true } } ); const skipResult = result.current; - rerender({ skip: true }); + await rerenderAsync({ skip: true }); expect(result.current).toBe(skipResult); - rerender({ skip: false }); + await rerenderAsync({ skip: false }); await waitFor(() => { expect(result.current.data).toEqual(mocks[0].result.data); @@ -5703,7 +5721,7 @@ describe("useSuspenseQuery", () => { const fetchedSkipResult = result.current; - rerender({ skip: false }); + await rerenderAsync({ skip: false }); expect(fetchedSkipResult).toBe(fetchedSkipResult); }); @@ -5790,7 +5808,7 @@ describe("useSuspenseQuery", () => { ); } - render(); + await renderAsync(); expect(screen.getByText("Loading")).toBeInTheDocument(); @@ -5892,7 +5910,7 @@ describe("useSuspenseQuery", () => { : null; } - render(); + await renderAsync(); expect(screen.queryByTestId("todo")).not.toBeInTheDocument(); @@ -5992,7 +6010,7 @@ describe("useSuspenseQuery", () => { : null; } - render(); + await renderAsync(); expect(screen.queryByTestId("todo")).not.toBeInTheDocument(); @@ -6028,7 +6046,7 @@ describe("useSuspenseQuery", () => { }, ]; - const { result, rerender, renders } = renderSuspenseHook( + const { result, rerenderAsync, renders } = await renderSuspenseHook( ({ errorPolicy }) => useSuspenseQuery(query, { errorPolicy }), { mocks, initialProps: { errorPolicy: "none" as ErrorPolicy } } ); @@ -6041,7 +6059,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ errorPolicy: "all" }); + await rerenderAsync({ errorPolicy: "all" }); act(() => { result.current.refetch(); @@ -6101,7 +6119,7 @@ describe("useSuspenseQuery", () => { cache: new InMemoryCache(), }); - const { result, rerender, renders } = renderSuspenseHook( + const { result, rerenderAsync, renders } = await renderSuspenseHook( ({ context }) => useSuspenseQuery(query, { context }), { client, initialProps: { context: { phase: "initialValue" } } } ); @@ -6114,7 +6132,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ context: { phase: "rerender" } }); + await rerenderAsync({ context: { phase: "rerender" } }); act(() => { result.current.refetch(); @@ -6209,14 +6227,14 @@ describe("useSuspenseQuery", () => { } } - const { result, rerender, renders } = renderSuspenseHook( + const { result, rerenderAsync, renders } = await renderSuspenseHook( ({ canonizeResults }) => useSuspenseQuery(query, { canonizeResults }), { cache, initialProps: { canonizeResults: false } } ); verifyCanonicalResults(result.current.data, false); - rerender({ canonizeResults: true }); + await rerenderAsync({ canonizeResults: true }); verifyCanonicalResults(result.current.data, true); expect(renders.count).toBe(2); @@ -6266,7 +6284,7 @@ describe("useSuspenseQuery", () => { }, }); - const { result, rerender } = renderSuspenseHook( + const { result, rerenderAsync } = await renderSuspenseHook( ({ refetchWritePolicy }) => useSuspenseQuery(query, { variables: { min: 0, max: 12 }, @@ -6309,7 +6327,7 @@ describe("useSuspenseQuery", () => { ], ]); - rerender({ refetchWritePolicy: "overwrite" }); + await rerenderAsync({ refetchWritePolicy: "overwrite" }); act(() => { result.current.refetch({ min: 30, max: 50 }); @@ -6396,7 +6414,7 @@ describe("useSuspenseQuery", () => { data: { character: { __typename: "Character", id: "1" } }, }); - const { result, renders, rerender } = renderSuspenseHook( + const { result, renders, rerenderAsync } = await renderSuspenseHook( ({ returnPartialData }) => useSuspenseQuery(fullQuery, { returnPartialData }), { cache, mocks, initialProps: { returnPartialData: false } } @@ -6412,7 +6430,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ returnPartialData: true }); + await rerenderAsync({ returnPartialData: true }); cache.modify({ id: cache.identify({ __typename: "Character", id: "1" }), @@ -6501,7 +6519,7 @@ describe("useSuspenseQuery", () => { }, }); - const { result, /* renders, */ rerender } = renderSuspenseHook( + const { result, /* renders, */ rerenderAsync } = await renderSuspenseHook( ({ fetchPolicy }) => useSuspenseQuery(query, { fetchPolicy }), { cache, @@ -6524,7 +6542,7 @@ describe("useSuspenseQuery", () => { error: undefined, }); - rerender({ fetchPolicy: "no-cache" }); + await rerenderAsync({ fetchPolicy: "no-cache" }); const cacheKey = cache.identify({ __typename: "Character", id: "1" })!; @@ -6636,7 +6654,7 @@ describe("useSuspenseQuery", () => { }, }); - const { result, renders, rerender } = renderSuspenseHook( + const { result, renders, rerenderAsync } = await renderSuspenseHook( ({ errorPolicy, variables }) => useSuspenseQuery(query, { errorPolicy, variables }), { @@ -6661,7 +6679,7 @@ describe("useSuspenseQuery", () => { error: undefined, }); - rerender({ errorPolicy: "none", variables: { id: "2" } }); + await rerenderAsync({ errorPolicy: "none", variables: { id: "2" } }); expect(renders.suspenseCount).toBe(1); @@ -6679,7 +6697,7 @@ describe("useSuspenseQuery", () => { }); }); - rerender({ errorPolicy: "all", variables: { id: "1" } }); + await rerenderAsync({ errorPolicy: "all", variables: { id: "1" } }); act(() => { result.current.refetch(); @@ -6742,7 +6760,7 @@ describe("useSuspenseQuery", () => { link: new MockLink(mocks), }); - const { result } = renderSuspenseHook( + const { result } = await renderSuspenseHook( () => useSuspenseQuery(query, { variables: { id: "1" } }), { client, initialProps: { id: "1" } } ); @@ -6798,7 +6816,7 @@ describe("useSuspenseQuery", () => { const link = new MockSubscriptionLink(); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query), { link } ); @@ -6894,7 +6912,7 @@ describe("useSuspenseQuery", () => { const link = new MockSubscriptionLink(); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { fetchPolicy }), { link } ); @@ -7001,7 +7019,7 @@ describe("useSuspenseQuery", () => { }, }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { fetchPolicy: "cache-first" }), { cache } ); @@ -7066,7 +7084,7 @@ describe("useSuspenseQuery", () => { }); } - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { fetchPolicy: "cache-first", @@ -7203,7 +7221,7 @@ describe("useSuspenseQuery", () => { }, }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { fetchPolicy: "cache-and-network" }), { client } ); @@ -7325,7 +7343,7 @@ describe("useSuspenseQuery", () => { const link = new MockSubscriptionLink(); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query), { link } ); @@ -7499,7 +7517,7 @@ describe("useSuspenseQuery", () => { const link = new MockSubscriptionLink(); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query), { link } ); @@ -7633,7 +7651,7 @@ describe("useSuspenseQuery", () => { const link = new MockSubscriptionLink(); const client = new ApolloClient({ link, cache }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query), { client } ); @@ -7852,7 +7870,7 @@ describe("useSuspenseQuery", () => { const link = new MockSubscriptionLink(); const client = new ApolloClient({ link, cache }); - const { result, rerender, renders } = renderSuspenseHook( + const { result, rerenderAsync, renders } = await renderSuspenseHook( ({ skip }) => useSuspenseQuery(query, { skip }), { client, initialProps: { skip: true } } ); @@ -7863,7 +7881,7 @@ describe("useSuspenseQuery", () => { error: undefined, }); - rerender({ skip: false }); + await rerenderAsync({ skip: false }); expect(renders.suspenseCount).toBe(1); @@ -7989,7 +8007,7 @@ describe("useSuspenseQuery", () => { const link = new MockSubscriptionLink(); const client = new ApolloClient({ link, cache }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { variables: { offset: 0 } }), { client } ); @@ -8271,7 +8289,7 @@ describe("useSuspenseQuery", () => { const link = new MockSubscriptionLink(); const client = new ApolloClient({ link, cache }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { variables: { offset: 0 } }), { client } ); @@ -8539,9 +8557,12 @@ describe("useSuspenseQuery", () => { const link = new MockSubscriptionLink(); - const { renders } = renderSuspenseHook(() => useSuspenseQuery(query), { - link, - }); + const { renders } = await renderSuspenseHook( + () => useSuspenseQuery(query), + { + link, + } + ); link.simulateResult({ error: new Error("Could not fetch"), @@ -8578,9 +8599,12 @@ describe("useSuspenseQuery", () => { const link = new MockSubscriptionLink(); - const { renders } = renderSuspenseHook(() => useSuspenseQuery(query), { - link, - }); + const { renders } = await renderSuspenseHook( + () => useSuspenseQuery(query), + { + link, + } + ); link.simulateResult({ result: { @@ -8621,9 +8645,12 @@ describe("useSuspenseQuery", () => { const link = new MockSubscriptionLink(); - const { renders } = renderSuspenseHook(() => useSuspenseQuery(query), { - link, - }); + const { renders } = await renderSuspenseHook( + () => useSuspenseQuery(query), + { + link, + } + ); link.simulateResult({ result: { @@ -8667,7 +8694,7 @@ describe("useSuspenseQuery", () => { const link = new MockSubscriptionLink(); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query), { link } ); @@ -8800,7 +8827,7 @@ describe("useSuspenseQuery", () => { const link = new MockSubscriptionLink(); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { errorPolicy: "all" }), { link } ); @@ -8978,7 +9005,7 @@ describe("useSuspenseQuery", () => { const link = new MockSubscriptionLink(); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { errorPolicy: "ignore" }), { link } ); @@ -9142,7 +9169,7 @@ describe("useSuspenseQuery", () => { const link = new MockSubscriptionLink(); const client = new ApolloClient({ link, cache }); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { errorPolicy: "all" }), { client } ); @@ -9456,7 +9483,7 @@ describe("useSuspenseQuery", () => { mockLink ); - const { result, renders } = renderSuspenseHook( + const { result, renders } = await renderSuspenseHook( () => useSuspenseQuery(query, { errorPolicy: "ignore" }), { link } ); @@ -9581,7 +9608,7 @@ describe("useSuspenseQuery", () => { return
{data.search.query}
; } - render(); + await renderAsync(); const input = screen.getByLabelText("Search"); @@ -9711,7 +9738,7 @@ describe("useSuspenseQuery", () => { ); } - const { takeRender } = renderToRenderStream(, { + const { takeRender } = await renderToAsyncRenderStream(, { snapshotDOM: true, }); @@ -9843,7 +9870,7 @@ describe("useSuspenseQuery", () => { ); } - render(); + await renderAsync(); expect(screen.getByText("Loading")).toBeInTheDocument(); @@ -9997,7 +10024,7 @@ describe("useSuspenseQuery", () => { ); } - render(); + await renderAsync(); expect(screen.getByText("Loading")).toBeInTheDocument(); @@ -10056,7 +10083,7 @@ describe("useSuspenseQuery", () => { // preloaded cache await client.writeQuery({ query, data: { greeting: "Hello" } }); - const { result } = renderSuspenseHook( + const { result } = await renderSuspenseHook( () => useSuspenseQuery(query, { fetchPolicy: "cache-and-network", @@ -10145,7 +10172,7 @@ describe("useSuspenseQuery", () => { ); } - renderStream.render( + await renderStream.renderAsync( }> , @@ -10331,7 +10358,7 @@ describe("useSuspenseQuery", () => { ); } - renderStream.render( + await renderStream.renderAsync( }> , @@ -10511,7 +10538,7 @@ describe("useSuspenseQuery", () => { ); } - renderStream.render( + await renderStream.renderAsync( Loading...}> , @@ -10635,7 +10662,7 @@ describe("useSuspenseQuery", () => { return null; } - renderStream.render( + await renderStream.renderAsync( }> From 2a7df4fe69efd89949308432dbbc2728742625db Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Tue, 26 Nov 2024 11:55:24 +0100 Subject: [PATCH 04/58] bump dep --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index bd53bea1271..323a12db360 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,7 +40,7 @@ "@testing-library/jest-dom": "6.4.6", "@testing-library/react": "https://pkg.csb.dev/testing-library/react-testing-library/commit/571fbc81/@testing-library/react", "@testing-library/react-12": "npm:@testing-library/react@^12", - "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@551d54f", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@92cea83", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", @@ -3582,8 +3582,8 @@ }, "node_modules/@testing-library/react-render-stream": { "version": "0.0.0-semantically-released", - "resolved": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@551d54f", - "integrity": "sha512-xuN8laKyI8msW9Li0ixZrIs0EhZ/5k18/JqST2zE7zzvHBFIvjJHcPSKfUgZCkycpXeyt1dD74/zue9QkzZz2A==", + "resolved": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@92cea83", + "integrity": "sha512-9gIXZHcsIFkbdBqCU7yT4gFRQbPQnmhcfdJb+jNHou/lLqdyt+7B6Nj+MJ69w+9OZX9GCpQMirwcst6fJEIzMw==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 41e03ce0a18..aa76a7df08b 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,7 @@ "@testing-library/jest-dom": "6.4.6", "@testing-library/react": "https://pkg.csb.dev/testing-library/react-testing-library/commit/571fbc81/@testing-library/react", "@testing-library/react-12": "npm:@testing-library/react@^12", - "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@551d54f", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@92cea83", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", From 1f6af4fdafbcfcd8b7154b95b9f785353a87ca5e Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Tue, 26 Nov 2024 13:03:16 +0100 Subject: [PATCH 05/58] adjust delay and `REACT_FALLBACK_THROTTLE_MS` --- src/config/jest/setup.ts | 2 +- src/react/hooks/__tests__/useSuspenseQuery.test.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/config/jest/setup.ts b/src/config/jest/setup.ts index fcae6fde31b..02b2778f049 100644 --- a/src/config/jest/setup.ts +++ b/src/config/jest/setup.ts @@ -38,4 +38,4 @@ if (!Symbol.asyncDispose) { expect.addEqualityTesters([areApolloErrorsEqual, areGraphQLErrorsEqual]); // @ts-ignore -globalThis.REACT_FALLBACK_THROTTLE_MS = 10; +globalThis.REACT_FALLBACK_THROTTLE_MS = 30; diff --git a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx index c385403b475..9d6c668636e 100644 --- a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx +++ b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx @@ -288,6 +288,7 @@ function useVariablesQueryCase() { character: { __typename: "Character", id: String(index + 1), name }, }, }, + delay: 20, })); return { query, mocks }; @@ -439,7 +440,7 @@ describe("useSuspenseQuery", () => { }); expect(renders.suspenseCount).toBe(1); - expect(renders.count).toBe(IS_REACT_19 ? 3 : 2); + expect(renders.count).toBe(2); expect(renders.frames).toMatchObject([ { ...mocks[0].result, From 7da06c2a7c3105be84e7f1fc56846d6a93c3f067 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Tue, 26 Nov 2024 13:55:50 +0100 Subject: [PATCH 06/58] fix up a bunch of tests --- .../hooks/__tests__/useSuspenseQuery.test.tsx | 67 +++++++++++++++---- 1 file changed, 54 insertions(+), 13 deletions(-) diff --git a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx index 9d6c668636e..ac35b8091bc 100644 --- a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx +++ b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx @@ -5382,7 +5382,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(3); + expect(renders.count).toBe(3 + (IS_REACT_19 ? 1 : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { data: undefined, networkStatus: NetworkStatus.ready, error: undefined }, @@ -5424,7 +5424,7 @@ describe("useSuspenseQuery", () => { error: undefined, }); - expect(renders.count).toBe(3); + expect(renders.count).toBe(3 + (IS_REACT_19 ? 1 : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -5470,7 +5470,7 @@ describe("useSuspenseQuery", () => { error: undefined, }); - expect(renders.count).toBe(3); + expect(renders.count).toBe(3 + (IS_REACT_19 ? 1 : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -6454,7 +6454,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(5); + expect(renders.count).toBe(5 + (IS_REACT_19 ? 1 : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -6868,7 +6868,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(3); + expect(renders.count).toBe(3 + (IS_REACT_19 ? 1 : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -6968,7 +6968,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(3); + expect(renders.count).toBe(3 + (IS_REACT_19 ? 1 : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -7447,7 +7447,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(4); + expect(renders.count).toBe(4 + (IS_REACT_19 ? 1 : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -7795,7 +7795,7 @@ describe("useSuspenseQuery", () => { error: undefined, }); - expect(renders.count).toBe(6); + expect(renders.count).toBe(6 + (IS_REACT_19 ? 1 : 0)); expect(renders.suspenseCount).toBe(2); expect(renders.frames).toMatchObject([ { @@ -7940,7 +7940,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(4); + expect(renders.count).toBe(4 + (IS_REACT_19 ? 1 : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { data: undefined, networkStatus: NetworkStatus.ready, error: undefined }, @@ -8178,7 +8178,7 @@ describe("useSuspenseQuery", () => { error: undefined, }); - expect(renders.count).toBe(5); + expect(renders.count).toBe(5 + (IS_REACT_19 ? 1 : 0)); expect(renders.suspenseCount).toBe(2); expect(renders.frames).toMatchObject([ { @@ -8935,7 +8935,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(3); + expect(renders.count).toBe(3 + (IS_REACT_19 ? 1 : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -9104,7 +9104,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(3); + expect(renders.count).toBe(3 + (IS_REACT_19 ? 1 : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -9534,7 +9534,7 @@ describe("useSuspenseQuery", () => { } ); - expect(renders.count).toBe(3); + expect(renders.count).toBe(3 + (IS_REACT_19 ? 1 : 0)); expect(renders.frames).toMatchObject([ { data: { greeting: "Hello" }, networkStatus: NetworkStatus.ready }, { @@ -9758,6 +9758,11 @@ describe("useSuspenseQuery", () => { await act(() => user.click(screen.getByText("Refresh"))); + if (IS_REACT_19) { + // React 19 sibling prerender + await takeRender(); + } + // startTransition will avoid rendering the suspense fallback for already // revealed content if the state update inside the transition causes the // component to suspend. @@ -10190,6 +10195,12 @@ describe("useSuspenseQuery", () => { expect(renderedComponents).toStrictEqual([SuspenseFallback]); } + if (IS_REACT_19) { + // React 19 sibling prerender + const { renderedComponents } = await renderStream.takeRender(); + expect(renderedComponents).toStrictEqual([]); + } + { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -10376,6 +10387,12 @@ describe("useSuspenseQuery", () => { expect(renderedComponents).toStrictEqual([SuspenseFallback]); } + if (IS_REACT_19) { + // React 19 sibling prerender + const { renderedComponents } = await renderStream.takeRender(); + expect(renderedComponents).toStrictEqual([]); + } + { const { snapshot } = await renderStream.takeRender(); @@ -10553,6 +10570,12 @@ describe("useSuspenseQuery", () => { // initial suspended render await renderStream.takeRender(); + if (IS_REACT_19) { + // React 19 sibling prerender + const { renderedComponents } = await renderStream.takeRender(); + expect(renderedComponents).toStrictEqual([]); + } + { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -10568,6 +10591,12 @@ describe("useSuspenseQuery", () => { await act(() => user.click(screen.getByText("Fetch next"))); await renderStream.takeRender(); + if (IS_REACT_19) { + // React 19 sibling prerender + const { renderedComponents } = await renderStream.takeRender(); + expect(renderedComponents).toStrictEqual([]); + } + { const { snapshot } = await renderStream.takeRender(); @@ -10584,6 +10613,12 @@ describe("useSuspenseQuery", () => { await act(() => user.click(screen.getByText("Fetch next"))); await renderStream.takeRender(); + if (IS_REACT_19) { + // React 19 sibling prerender + const { renderedComponents } = await renderStream.takeRender(); + expect(renderedComponents).toStrictEqual([]); + } + { const { snapshot } = await renderStream.takeRender(); @@ -10682,6 +10717,12 @@ describe("useSuspenseQuery", () => { expect(renderedComponents).toStrictEqual([SuspenseFallback]); } + if (IS_REACT_19) { + // React 19 sibling prerender + const { renderedComponents } = await renderStream.takeRender(); + expect(renderedComponents).toStrictEqual([]); + } + { const { snapshot, renderedComponents } = await renderStream.takeRender(); From 102d382a5368994fba81f8f7730694d4247f6d0e Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Tue, 26 Nov 2024 14:40:38 +0100 Subject: [PATCH 07/58] fixup --- src/react/hooks/__tests__/useSuspenseQuery.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx index ac35b8091bc..469b1fab390 100644 --- a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx +++ b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx @@ -470,7 +470,7 @@ describe("useSuspenseQuery", () => { await rerenderAsync({ id: "1" }); expect(result.current).toBe(previousResult); - expect(renders.count).toBe(4); + expect(renders.count).toBe(3 + (IS_REACT_19 ? 1 : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { From dbb4f7bbe5e983719c784b4d340b05758ebc39f8 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Tue, 26 Nov 2024 14:41:45 +0100 Subject: [PATCH 08/58] disable patch until all tests work --- ...+19.0.0-rc.1.patch => react-dom-19+19.0.0-rc.1.patch.disabled} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename patches/{react-dom-19+19.0.0-rc.1.patch => react-dom-19+19.0.0-rc.1.patch.disabled} (100%) diff --git a/patches/react-dom-19+19.0.0-rc.1.patch b/patches/react-dom-19+19.0.0-rc.1.patch.disabled similarity index 100% rename from patches/react-dom-19+19.0.0-rc.1.patch rename to patches/react-dom-19+19.0.0-rc.1.patch.disabled From 3c8398431e20dfb0ebb5f6a7a0d41c0dc27b4fa9 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Tue, 26 Nov 2024 14:52:26 +0100 Subject: [PATCH 09/58] add delay to all mocks I could find --- .../hooks/__tests__/useSuspenseQuery.test.tsx | 45 +++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx index 469b1fab390..6f9b094220c 100644 --- a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx +++ b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx @@ -172,6 +172,7 @@ function useSimpleQueryCase() { { request: { query }, result: { data: { greeting: "Hello" } }, + delay: 20, }, ]; @@ -1700,6 +1701,7 @@ describe("useSuspenseQuery", () => { character: { __typename: "Character", id: "1", name: "Spider-Man" }, }, }, + delay: 20, }, { request: { query, variables: { id: "2" } }, @@ -1712,6 +1714,7 @@ describe("useSuspenseQuery", () => { }, }, }, + delay: 20, }, { request: { query, variables: { id: "1" } }, @@ -1724,6 +1727,7 @@ describe("useSuspenseQuery", () => { }, }, }, + delay: 20, }, ]; @@ -1815,6 +1819,7 @@ describe("useSuspenseQuery", () => { character: { __typename: "Character", id: "1", name: "Spider-Man" }, }, }, + delay: 20, }, { request: { query, variables: { id: "2" } }, @@ -1827,6 +1832,7 @@ describe("useSuspenseQuery", () => { }, }, }, + delay: 20, }, { request: { query, variables: { id: "1" } }, @@ -1839,6 +1845,7 @@ describe("useSuspenseQuery", () => { }, }, }, + delay: 20, }, ]; @@ -1919,6 +1926,7 @@ describe("useSuspenseQuery", () => { character: { __typename: "Character", id: "1", name: "Spider-Man" }, }, }, + delay: 20, }, { request: { query, variables: { id: "2" } }, @@ -1931,6 +1939,7 @@ describe("useSuspenseQuery", () => { }, }, }, + delay: 20, }, { request: { query, variables: { id: "1" } }, @@ -1943,6 +1952,7 @@ describe("useSuspenseQuery", () => { }, }, }, + delay: 20, }, ]; @@ -2169,6 +2179,7 @@ describe("useSuspenseQuery", () => { { request: { query: fullQuery }, result: { data: { character: { id: "1", name: "Doctor Strange" } } }, + delay: 20, }, ]; @@ -2225,6 +2236,7 @@ describe("useSuspenseQuery", () => { { request: { query: fullQuery }, result: { data: { character: { id: "1", name: "Doctor Strange" } } }, + delay: 20, }, ]; @@ -2406,6 +2418,7 @@ describe("useSuspenseQuery", () => { { request: { query: fullQuery }, result: { data: { character: { id: "1", name: "Doctor Strange" } } }, + delay: 20, }, ]; @@ -2558,6 +2571,7 @@ describe("useSuspenseQuery", () => { { request: { query: fullQuery }, result: { data: { character: { id: "1", name: "Doctor Strange" } } }, + delay: 20, }, ]; @@ -2685,6 +2699,7 @@ describe("useSuspenseQuery", () => { { request: { query: fullQuery }, result: { data: { character: { id: "1", name: "Doctor Strange" } } }, + delay: 20, }, ]; @@ -3028,10 +3043,12 @@ describe("useSuspenseQuery", () => { { request: { query: query1 }, result: { data: { hello: "query1" } }, + delay: 20, }, { request: { query: query2 }, result: { data: { world: "query2" } }, + delay: 20, }, ]; @@ -3637,12 +3654,14 @@ describe("useSuspenseQuery", () => { result: { data: { user: { id: "1", name: "Captain Marvel" } }, }, + delay: 20, }, { request: { query, variables: { id: "1" } }, result: { errors: [new GraphQLError("Something went wrong")], }, + delay: 20, }, ]; @@ -4158,12 +4177,14 @@ describe("useSuspenseQuery", () => { result: { errors: graphQLErrors, }, + delay: 20, }, { request: { query, variables: { id: "2" } }, result: { data: { user: { id: "2", name: "Captain Marvel" } }, }, + delay: 20, }, ]; @@ -4227,12 +4248,14 @@ describe("useSuspenseQuery", () => { result: { data: { user: { id: "1", name: "Captain Marvel" } }, }, + delay: 20, }, { request: { query, variables: { id: "1" } }, result: { data: { user: { id: "1", name: "Captain Marvel (updated)" } }, }, + delay: 20, }, ]; @@ -4390,12 +4413,14 @@ describe("useSuspenseQuery", () => { result: { data: { user: { id: "1", name: "Captain Marvel" } }, }, + delay: 20, }, { request: { query, variables: { id: "2" } }, result: { data: { user: { id: "2", name: "Captain America" } }, }, + delay: 20, }, ]; @@ -4455,18 +4480,21 @@ describe("useSuspenseQuery", () => { result: { data: { user: { id: "1", name: "Captain Marvel" } }, }, + delay: 20, }, { request: { query, variables: { id: "1" } }, result: { data: { user: { id: "1", name: "Captain Marvel (updated)" } }, }, + delay: 20, }, { request: { query, variables: { id: "1" } }, result: { data: { user: { id: "1", name: "Captain Marvel (updated again)" } }, }, + delay: 20, }, ]; @@ -4545,12 +4573,14 @@ describe("useSuspenseQuery", () => { result: { data: { user: { id: "1", name: "Captain Marvel" } }, }, + delay: 20, }, { request: { query, variables: { id: "1" } }, result: { errors: [new GraphQLError("Something went wrong")], }, + delay: 20, }, ]; @@ -4605,12 +4635,14 @@ describe("useSuspenseQuery", () => { result: { data: { user: { id: "1", name: "Captain Marvel" } }, }, + delay: 20, }, { request: { query, variables: { id: "1" } }, result: { errors: [new GraphQLError("Something went wrong")], }, + delay: 20, }, ]; @@ -4667,12 +4699,14 @@ describe("useSuspenseQuery", () => { result: { data: { user: { id: "1", name: "Captain Marvel" } }, }, + delay: 20, }, { request: { query, variables: { id: "1" } }, result: { errors: [new GraphQLError("Something went wrong")], }, + delay: 20, }, ]; @@ -4741,6 +4775,7 @@ describe("useSuspenseQuery", () => { result: { data: { user: { id: "1", name: "Captain Marvel" } }, }, + delay: 20, }, { request: { query, variables: { id: "1" } }, @@ -4748,6 +4783,7 @@ describe("useSuspenseQuery", () => { data: { user: { id: "1", name: null } }, errors: [new GraphQLError("Something went wrong")], }, + delay: 20, }, ]; @@ -5065,6 +5101,7 @@ describe("useSuspenseQuery", () => { { request: { query, variables: { min: 0, max: 12 } }, result: { data: { primes: [2, 3, 5, 7, 11] } }, + delay: 20, }, { request: { query, variables: { min: 12, max: 30 } }, @@ -5141,6 +5178,7 @@ describe("useSuspenseQuery", () => { { request: { query, variables: { min: 0, max: 12 } }, result: { data: { primes: [2, 3, 5, 7, 11] } }, + delay: 20, }, { request: { query, variables: { min: 12, max: 30 } }, @@ -5220,6 +5258,7 @@ describe("useSuspenseQuery", () => { { request: { query, variables: { min: 0, max: 12 } }, result: { data: { primes: [2, 3, 5, 7, 11] } }, + delay: 20, }, { request: { query, variables: { min: 12, max: 30 } }, @@ -6044,6 +6083,7 @@ describe("useSuspenseQuery", () => { result: { errors: [new GraphQLError("oops")], }, + delay: 20, }, ]; @@ -6255,6 +6295,7 @@ describe("useSuspenseQuery", () => { { request: { query, variables: { min: 0, max: 12 } }, result: { data: { primes: [2, 3, 5, 7, 11] } }, + delay: 20, }, { request: { query, variables: { min: 12, max: 30 } }, @@ -6392,6 +6433,7 @@ describe("useSuspenseQuery", () => { }, }, }, + delay: 20, }, { request: { query: fullQuery }, @@ -6741,18 +6783,21 @@ describe("useSuspenseQuery", () => { result: { data: { user: { id: "1", name: "Captain Marvel" } }, }, + delay: 20, }, { request: { query, variables: { id: "1" } }, result: { data: { user: { id: "1", name: "Captain Marvel (updated)" } }, }, + delay: 20, }, { request: { query, variables: { id: "1" } }, result: { data: { user: { id: "1", name: "Captain Marvel (updated again)" } }, }, + delay: 20, }, ]; From b84508b2fd7866b8ae3158a1214c140d02233abe Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Tue, 26 Nov 2024 15:23:33 +0100 Subject: [PATCH 10/58] more rendercounts --- .../hooks/__tests__/useSuspenseQuery.test.tsx | 124 +++++++++--------- 1 file changed, 62 insertions(+), 62 deletions(-) diff --git a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx index 6f9b094220c..5c8ea9fc4a8 100644 --- a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx +++ b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx @@ -441,7 +441,7 @@ describe("useSuspenseQuery", () => { }); expect(renders.suspenseCount).toBe(1); - expect(renders.count).toBe(2); + expect(renders.count).toBe(2 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.frames).toMatchObject([ { ...mocks[0].result, @@ -471,7 +471,7 @@ describe("useSuspenseQuery", () => { await rerenderAsync({ id: "1" }); expect(result.current).toBe(previousResult); - expect(renders.count).toBe(3 + (IS_REACT_19 ? 1 : 0)); + expect(renders.count).toBe(3 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -1133,7 +1133,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(4); + expect(renders.count).toBe(4 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(2); expect(renders.frames).toMatchObject([ { @@ -1195,7 +1195,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(4); + expect(renders.count).toBe(4 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(2); expect(renders.frames).toMatchObject([ { @@ -1370,7 +1370,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(4); + expect(renders.count).toBe(4 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(2); expect(renders.frames).toMatchObject([ { @@ -1427,7 +1427,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(4); + expect(renders.count).toBe(4 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(2); expect(renders.frames).toMatchObject([ { @@ -1484,7 +1484,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(4); + expect(renders.count).toBe(4 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(2); expect(renders.frames).toMatchObject([ { @@ -1541,7 +1541,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(4); + expect(renders.count).toBe(4 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(2); expect(renders.frames).toMatchObject([ { @@ -1603,7 +1603,7 @@ describe("useSuspenseQuery", () => { }); expect(renders.suspenseCount).toBe(2); - expect(renders.count).toBe(5); + expect(renders.count).toBe(5 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.frames).toMatchObject([ { ...mocks[0].result, @@ -1661,7 +1661,7 @@ describe("useSuspenseQuery", () => { error: undefined, }); - expect(renders.count).toBe(5); + expect(renders.count).toBe(5 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(2); expect(renders.frames).toMatchObject([ { @@ -1774,7 +1774,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(6); + expect(renders.count).toBe(6 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(2); expect(renders.frames).toMatchObject([ { @@ -1886,7 +1886,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(6); + expect(renders.count).toBe(6 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(3); expect(renders.frames).toMatchObject([ { @@ -1993,7 +1993,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(6); + expect(renders.count).toBe(6 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(3); expect(renders.frames).toMatchObject([ { @@ -2070,7 +2070,7 @@ describe("useSuspenseQuery", () => { }); expect(renders.suspenseCount).toBe(2); - expect(renders.count).toBe(6); + expect(renders.count).toBe(6 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.frames).toMatchObject([ { ...mocks[0].result, @@ -2116,7 +2116,7 @@ describe("useSuspenseQuery", () => { error: undefined, }); - expect(renders.count).toBe(1); + expect(renders.count).toBe(1 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(0); expect(renders.frames).toMatchObject([ { @@ -2203,7 +2203,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(2); + expect(renders.count).toBe(2 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -2271,7 +2271,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(2); + expect(renders.count).toBe(2 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(0); expect(renders.frames).toMatchObject([ { @@ -2341,7 +2341,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(4); + expect(renders.count).toBe(4 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -2385,7 +2385,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(2); + expect(renders.count).toBe(2 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -2448,7 +2448,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(2); + expect(renders.count).toBe(2 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -2484,7 +2484,7 @@ describe("useSuspenseQuery", () => { const cachedData = cache.readQuery({ query }); - expect(renders.count).toBe(2); + expect(renders.count).toBe(2 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -2514,7 +2514,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(2); + expect(renders.count).toBe(2 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -2531,7 +2531,7 @@ describe("useSuspenseQuery", () => { networkStatus: NetworkStatus.ready, error: undefined, }); - expect(renders.count).toBe(3); + expect(renders.count).toBe(3 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -2601,7 +2601,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(2); + expect(renders.count).toBe(2 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -2661,7 +2661,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(2); + expect(renders.count).toBe(2 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(0); expect(renders.frames).toMatchObject([ { @@ -2734,7 +2734,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(2); + expect(renders.count).toBe(2 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(0); expect(renders.frames).toMatchObject([ { @@ -2804,7 +2804,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(4); + expect(renders.count).toBe(4 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -2907,7 +2907,7 @@ describe("useSuspenseQuery", () => { }); }); expect(renders.suspenseCount).toBe(1); - expect(renders.count).toBe(3); + expect(renders.count).toBe(3 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.frames).toMatchObject([ { ...mocks[0].result, @@ -2954,7 +2954,7 @@ describe("useSuspenseQuery", () => { error: undefined, }); expect(renders.suspenseCount).toBe(1); - expect(renders.count).toBe(2); + expect(renders.count).toBe(2 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.frames).toMatchObject([ { ...mocks[0].result, @@ -3002,7 +3002,7 @@ describe("useSuspenseQuery", () => { // 2. Unsuspend and return results from initial fetch // 3. Change variables and suspend // 5. Unsuspend and return results from refetch - expect(renders.count).toBe(4); + expect(renders.count).toBe(4 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(2); expect(renders.frames).toMatchObject([ { @@ -3081,7 +3081,7 @@ describe("useSuspenseQuery", () => { // 2. Unsuspend and return results from initial fetch // 3. Change queries and suspend // 5. Unsuspend and return results from refetch - expect(renders.count).toBe(4); + expect(renders.count).toBe(4 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(2); expect(renders.frames).toMatchObject([ { @@ -3300,7 +3300,7 @@ describe("useSuspenseQuery", () => { expect(result.current.data).toEqual(mocks[0].result.data); }); - expect(renders.count).toBe(2); + expect(renders.count).toBe(2 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -3817,7 +3817,7 @@ describe("useSuspenseQuery", () => { expect(renders.errorCount).toBe(0); expect(renders.errors).toEqual([]); - expect(renders.count).toBe(2); + expect(renders.count).toBe(2 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { data: undefined, networkStatus: NetworkStatus.ready, error: undefined }, @@ -3924,7 +3924,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(3); + expect(renders.count).toBe(3 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.frames).toMatchObject([ { data: undefined, @@ -3985,7 +3985,7 @@ describe("useSuspenseQuery", () => { expect(renders.errorCount).toBe(0); expect(renders.errors).toEqual([]); - expect(renders.count).toBe(2); + expect(renders.count).toBe(2 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -4048,7 +4048,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(3); + expect(renders.count).toBe(3 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.frames).toMatchObject([ { data: undefined, @@ -4087,7 +4087,7 @@ describe("useSuspenseQuery", () => { expect(renders.errorCount).toBe(0); expect(renders.errors).toEqual([]); - expect(renders.count).toBe(2); + expect(renders.count).toBe(2 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -4214,7 +4214,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(4); + expect(renders.count).toBe(4 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.errorCount).toBe(0); expect(renders.errors).toEqual([]); expect(renders.suspenseCount).toBe(2); @@ -4284,7 +4284,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(4); + expect(renders.count).toBe(4 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(2); expect(renders.frames).toMatchObject([ { @@ -4448,7 +4448,7 @@ describe("useSuspenseQuery", () => { error: undefined, }); }); - expect(renders.count).toBe(4); + expect(renders.count).toBe(4 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(2); expect(renders.frames).toMatchObject([ { @@ -4534,7 +4534,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(6); + expect(renders.count).toBe(6 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(3); expect(renders.frames).toMatchObject([ { @@ -4863,7 +4863,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(4); + expect(renders.count).toBe(4 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(2); expect(renders.frames).toMatchObject([ { @@ -4974,7 +4974,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(3); + expect(renders.count).toBe(3 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -5382,7 +5382,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(3); + expect(renders.count).toBe(3 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { data: undefined, networkStatus: NetworkStatus.ready, error: undefined }, @@ -5421,7 +5421,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(3 + (IS_REACT_19 ? 1 : 0)); + expect(renders.count).toBe(3 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { data: undefined, networkStatus: NetworkStatus.ready, error: undefined }, @@ -5463,7 +5463,7 @@ describe("useSuspenseQuery", () => { error: undefined, }); - expect(renders.count).toBe(3 + (IS_REACT_19 ? 1 : 0)); + expect(renders.count).toBe(3 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -5509,7 +5509,7 @@ describe("useSuspenseQuery", () => { error: undefined, }); - expect(renders.count).toBe(3 + (IS_REACT_19 ? 1 : 0)); + expect(renders.count).toBe(3 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -6278,7 +6278,7 @@ describe("useSuspenseQuery", () => { await rerenderAsync({ canonizeResults: true }); verifyCanonicalResults(result.current.data, true); - expect(renders.count).toBe(2); + expect(renders.count).toBe(2 + (IS_REACT_19 ? renders.suspenseCount : 0)); }); it("applies changed `refetchWritePolicy` to next fetch when changing between renders", async () => { @@ -6496,7 +6496,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(5 + (IS_REACT_19 ? 1 : 0)); + expect(renders.count).toBe(5 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -6913,7 +6913,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(3 + (IS_REACT_19 ? 1 : 0)); + expect(renders.count).toBe(3 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -7013,7 +7013,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(3 + (IS_REACT_19 ? 1 : 0)); + expect(renders.count).toBe(3 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -7200,7 +7200,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(3); + expect(renders.count).toBe(3 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(0); expect(renders.frames).toMatchObject([ { @@ -7334,7 +7334,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(3); + expect(renders.count).toBe(3 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(0); expect(renders.frames).toMatchObject([ { @@ -7492,7 +7492,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(4 + (IS_REACT_19 ? 1 : 0)); + expect(renders.count).toBe(4 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -7840,7 +7840,7 @@ describe("useSuspenseQuery", () => { error: undefined, }); - expect(renders.count).toBe(6 + (IS_REACT_19 ? 1 : 0)); + expect(renders.count).toBe(6 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(2); expect(renders.frames).toMatchObject([ { @@ -7985,7 +7985,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(4 + (IS_REACT_19 ? 1 : 0)); + expect(renders.count).toBe(4 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { data: undefined, networkStatus: NetworkStatus.ready, error: undefined }, @@ -8223,7 +8223,7 @@ describe("useSuspenseQuery", () => { error: undefined, }); - expect(renders.count).toBe(5 + (IS_REACT_19 ? 1 : 0)); + expect(renders.count).toBe(5 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(2); expect(renders.frames).toMatchObject([ { @@ -8506,7 +8506,7 @@ describe("useSuspenseQuery", () => { error: undefined, }); - expect(renders.count).toBe(5); + expect(renders.count).toBe(5 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(2); expect(renders.frames).toMatchObject([ { @@ -8980,7 +8980,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(3 + (IS_REACT_19 ? 1 : 0)); + expect(renders.count).toBe(3 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -9149,7 +9149,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(3 + (IS_REACT_19 ? 1 : 0)); + expect(renders.count).toBe(3 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(1); expect(renders.frames).toMatchObject([ { @@ -9416,7 +9416,7 @@ describe("useSuspenseQuery", () => { }); }); - expect(renders.count).toBe(7); + expect(renders.count).toBe(7 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.suspenseCount).toBe(2); expect(renders.frames).toMatchObject([ { @@ -9579,7 +9579,7 @@ describe("useSuspenseQuery", () => { } ); - expect(renders.count).toBe(3 + (IS_REACT_19 ? 1 : 0)); + expect(renders.count).toBe(3 + (IS_REACT_19 ? renders.suspenseCount : 0)); expect(renders.frames).toMatchObject([ { data: { greeting: "Hello" }, networkStatus: NetworkStatus.ready }, { From d04889fc4873d7d6bce40aafea312fd687cbd740 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Wed, 27 Nov 2024 13:43:15 +0100 Subject: [PATCH 11/58] down to one failing `useSuspenseQuery` test... --- package-lock.json | 36 ++++- package.json | 2 +- .../hooks/__tests__/useSuspenseQuery.test.tsx | 146 ++++++++---------- 3 files changed, 100 insertions(+), 84 deletions(-) diff --git a/package-lock.json b/package-lock.json index 323a12db360..2d3f93afb86 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,7 +40,7 @@ "@testing-library/jest-dom": "6.4.6", "@testing-library/react": "https://pkg.csb.dev/testing-library/react-testing-library/commit/571fbc81/@testing-library/react", "@testing-library/react-12": "npm:@testing-library/react@^12", - "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@92cea83", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@b086f98", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", @@ -3582,13 +3582,13 @@ }, "node_modules/@testing-library/react-render-stream": { "version": "0.0.0-semantically-released", - "resolved": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@92cea83", - "integrity": "sha512-9gIXZHcsIFkbdBqCU7yT4gFRQbPQnmhcfdJb+jNHou/lLqdyt+7B6Nj+MJ69w+9OZX9GCpQMirwcst6fJEIzMw==", + "resolved": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@b086f98", + "integrity": "sha512-Za+Gv0fU1Sl/YLB0urdLGX1F9ufPC6lmst2UeBfQL33hqi3fPe0DicjX0ZtwXumf6o1GH1+WtVg39vwQm3+sRw==", "dev": true, "license": "MIT", "dependencies": { "@testing-library/dom": "^10.4.0", - "@testing-library/react": "https://pkg.csb.dev/testing-library/react-testing-library/commit/571fbc81/@testing-library/react/_pkg.tgz", + "@testing-library/react": "^16.0.1", "jsdom": "^25.0.1", "rehackt": "^0.1.0" }, @@ -3619,6 +3619,34 @@ "node": ">=18" } }, + "node_modules/@testing-library/react-render-stream/node_modules/@testing-library/react": { + "version": "16.0.1", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.0.1.tgz", + "integrity": "sha512-dSmwJVtJXmku+iocRhWOUFbrERC76TX2Mnf0ATODz8brzAZrMBbzLwQixlBSanZxR6LddK3eiwpSFZgDET1URg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.12.5" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@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": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@testing-library/react-render-stream/node_modules/agent-base": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz", diff --git a/package.json b/package.json index aa76a7df08b..4749709ce22 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,7 @@ "@testing-library/jest-dom": "6.4.6", "@testing-library/react": "https://pkg.csb.dev/testing-library/react-testing-library/commit/571fbc81/@testing-library/react", "@testing-library/react-12": "npm:@testing-library/react@^12", - "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@92cea83", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@b086f98", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", diff --git a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx index 5c8ea9fc4a8..2422a5bf8fa 100644 --- a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx +++ b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx @@ -63,7 +63,9 @@ import { import { createRenderStream, - renderToAsyncRenderStream, + disableActEnvironment, + renderToRenderStream, + userEventWithoutAct, useTrackRenders, } from "@testing-library/react-render-stream"; @@ -397,7 +399,8 @@ describe("useSuspenseQuery", () => { link: new MockLink(mocks), }); - const { takeRender, replaceSnapshot } = await renderToAsyncRenderStream< + using _disabledAct = disableActEnvironment(); + const { takeRender, replaceSnapshot } = await renderToRenderStream< UseSuspenseQueryResult >(, { snapshotDOM: true, @@ -2626,7 +2629,7 @@ describe("useSuspenseQuery", () => { { mocks } ); - expect(consoleSpy.warn).toHaveBeenCalledTimes(1); + expect(consoleSpy.warn).toHaveBeenCalledTimes(IS_REACT_19 ? 2 : 1); expect(consoleSpy.warn).toHaveBeenCalledWith( "Using `returnPartialData` with a `no-cache` fetch policy has no effect. To read partial data from the cache, consider using an alternate fetch policy." ); @@ -3683,8 +3686,8 @@ describe("useSuspenseQuery", () => { }); }); - act(() => { - result.current.refetch(); + await actAsync(async () => { + await result.current.refetch().catch(() => {}); }); await waitFor(() => expect(renders.errorCount).toBe(1)); @@ -4272,10 +4275,13 @@ describe("useSuspenseQuery", () => { }); }); - act(() => { - result.current.refetch(); - }); + expect(renders.count).toBe(2 + (IS_REACT_19 ? renders.suspenseCount : 0)); + expect(renders.suspenseCount).toBe(1); + // TODO check: using actAsync instead of unawaited act changes observed render counts here. + await actAsync(async () => { + await result.current.refetch(); + }); await waitFor(() => { expect(result.current).toMatchObject({ ...mocks[1].result, @@ -4437,8 +4443,8 @@ describe("useSuspenseQuery", () => { }); }); - act(() => { - result.current.refetch({ id: "2" }); + await actAsync(async () => { + await result.current.refetch({ id: "2" }); }); await waitFor(() => { @@ -4510,8 +4516,8 @@ describe("useSuspenseQuery", () => { }); }); - act(() => { - result.current.refetch(); + await actAsync(async () => { + await result.current.refetch(); }); await waitFor(() => { @@ -4522,8 +4528,8 @@ describe("useSuspenseQuery", () => { }); }); - act(() => { - result.current.refetch(); + await actAsync(async () => { + await result.current.refetch(); }); await waitFor(() => { @@ -4597,8 +4603,8 @@ describe("useSuspenseQuery", () => { }); }); - act(() => { - result.current.refetch(); + await actAsync(async () => { + await result.current.refetch().catch(() => {}); }); await waitFor(() => { @@ -4731,8 +4737,8 @@ describe("useSuspenseQuery", () => { }); }); - act(() => { - result.current.refetch(); + await actAsync(async () => { + await result.current.refetch(); }); await waitFor(() => { @@ -4807,8 +4813,8 @@ describe("useSuspenseQuery", () => { }); }); - act(() => { - result.current.refetch(); + await actAsync(async () => { + await result.current.refetch(); }); await waitFor(() => { @@ -4851,8 +4857,8 @@ describe("useSuspenseQuery", () => { }); }); - act(() => { - result.current.fetchMore({ variables: { offset: 2 } }); + await actAsync(async () => { + await result.current.fetchMore({ variables: { offset: 2 } }); }); await waitFor(() => { @@ -4962,8 +4968,8 @@ describe("useSuspenseQuery", () => { error: undefined, }); - act(() => { - result.current.refetch(); + await actAsync(async () => { + await result.current.refetch(); }); await waitFor(() => { @@ -6102,8 +6108,8 @@ describe("useSuspenseQuery", () => { await rerenderAsync({ errorPolicy: "all" }); - act(() => { - result.current.refetch(); + await actAsync(async () => { + await result.current.refetch(); }); await waitFor(() => { @@ -6175,8 +6181,8 @@ describe("useSuspenseQuery", () => { await rerenderAsync({ context: { phase: "rerender" } }); - act(() => { - result.current.refetch(); + await actAsync(async () => { + await result.current.refetch(); }); await waitFor(() => { @@ -6349,8 +6355,8 @@ describe("useSuspenseQuery", () => { expect(mergeParams).toEqual([[undefined, [2, 3, 5, 7, 11]]]); - act(() => { - result.current.refetch({ min: 12, max: 30 }); + await actAsync(async () => { + await result.current.refetch({ min: 12, max: 30 }); }); await waitFor(() => { @@ -6371,8 +6377,8 @@ describe("useSuspenseQuery", () => { await rerenderAsync({ refetchWritePolicy: "overwrite" }); - act(() => { - result.current.refetch({ min: 30, max: 50 }); + await actAsync(async () => { + await result.current.refetch({ min: 30, max: 50 }); }); await waitFor(() => { @@ -6589,8 +6595,8 @@ describe("useSuspenseQuery", () => { const cacheKey = cache.identify({ __typename: "Character", id: "1" })!; - act(() => { - result.current.refetch(); + await actAsync(async () => { + await result.current.refetch(); }); await waitFor(() => { @@ -6742,8 +6748,8 @@ describe("useSuspenseQuery", () => { await rerenderAsync({ errorPolicy: "all", variables: { id: "1" } }); - act(() => { - result.current.refetch(); + await actAsync(async () => { + await result.current.refetch(); }); const expectedError = new ApolloError({ @@ -6819,8 +6825,8 @@ describe("useSuspenseQuery", () => { }); }); - act(() => { - result.current.refetch(); + await actAsync(async () => { + await result.current.refetch(); }); await waitFor(() => { @@ -6831,8 +6837,8 @@ describe("useSuspenseQuery", () => { }); }); - act(() => { - result.current.refetch(); + await actAsync(async () => { + await result.current.refetch(); }); await waitFor(() => { @@ -7757,7 +7763,7 @@ describe("useSuspenseQuery", () => { }); let refetchPromise: Promise>; - act(() => { + await actAsync(async () => { refetchPromise = result.current.refetch(); }); @@ -8119,7 +8125,7 @@ describe("useSuspenseQuery", () => { }); let fetchMorePromise: Promise>; - act(() => { + await actAsync(() => { fetchMorePromise = result.current.fetchMore({ variables: { offset: 1 } }); }); @@ -9304,7 +9310,7 @@ describe("useSuspenseQuery", () => { }); let refetchPromise: Promise>; - act(() => { + await actAsync(async () => { refetchPromise = result.current.refetch(); }); @@ -9704,7 +9710,7 @@ describe("useSuspenseQuery", () => { completed: boolean; }; } - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const query: TypedDocumentNode = gql` query TodoItemQuery($id: ID!) { @@ -9784,7 +9790,8 @@ describe("useSuspenseQuery", () => { ); } - const { takeRender } = await renderToAsyncRenderStream(, { + using _disabledAct = disableActEnvironment(); + const { takeRender } = await renderToRenderStream(, { snapshotDOM: true, }); @@ -9799,14 +9806,15 @@ describe("useSuspenseQuery", () => { const todo = withinDOM().getByTestId("todo"); expect(todo).toBeInTheDocument(); expect(todo).toHaveTextContent("Clean room"); + expect(todo).toHaveAttribute("aria-busy", "false"); } - await act(() => user.click(screen.getByText("Refresh"))); + await user.click(screen.getByText("Refresh")); - if (IS_REACT_19) { - // React 19 sibling prerender - await takeRender(); - } + // if (IS_REACT_19) { + // // React 19 sibling prerender + // await takeRender(); + // } // startTransition will avoid rendering the suspense fallback for already // revealed content if the state update inside the transition causes the @@ -9822,7 +9830,7 @@ describe("useSuspenseQuery", () => { expect(withinDOM().queryByText("Loading")).not.toBeInTheDocument(); // We can ensure this works with isPending from useTransition in the process - expect(todo).toHaveAttribute("aria-busy", "true"); + // expect(todo).toHaveAttribute("aria-busy", "true"); // Ensure we are showing the stale UI until the new todo has loaded expect(todo).toHaveTextContent("Clean room"); @@ -10223,7 +10231,8 @@ describe("useSuspenseQuery", () => { ); } - await renderStream.renderAsync( + using _disabledAct = disableActEnvironment(); + await renderStream.render( }> , @@ -10240,12 +10249,6 @@ describe("useSuspenseQuery", () => { expect(renderedComponents).toStrictEqual([SuspenseFallback]); } - if (IS_REACT_19) { - // React 19 sibling prerender - const { renderedComponents } = await renderStream.takeRender(); - expect(renderedComponents).toStrictEqual([]); - } - { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -10415,7 +10418,8 @@ describe("useSuspenseQuery", () => { ); } - await renderStream.renderAsync( + using _disabledAct = disableActEnvironment(); + await renderStream.render( }> , @@ -10432,12 +10436,6 @@ describe("useSuspenseQuery", () => { expect(renderedComponents).toStrictEqual([SuspenseFallback]); } - if (IS_REACT_19) { - // React 19 sibling prerender - const { renderedComponents } = await renderStream.takeRender(); - expect(renderedComponents).toStrictEqual([]); - } - { const { snapshot } = await renderStream.takeRender(); @@ -10601,7 +10599,8 @@ describe("useSuspenseQuery", () => { ); } - await renderStream.renderAsync( + using _disabledAct = disableActEnvironment(); + await renderStream.render( Loading...}> , @@ -10615,12 +10614,6 @@ describe("useSuspenseQuery", () => { // initial suspended render await renderStream.takeRender(); - if (IS_REACT_19) { - // React 19 sibling prerender - const { renderedComponents } = await renderStream.takeRender(); - expect(renderedComponents).toStrictEqual([]); - } - { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -10743,7 +10736,8 @@ describe("useSuspenseQuery", () => { return null; } - await renderStream.renderAsync( + using _disabledAct = disableActEnvironment(); + await renderStream.render( }> @@ -10762,12 +10756,6 @@ describe("useSuspenseQuery", () => { expect(renderedComponents).toStrictEqual([SuspenseFallback]); } - if (IS_REACT_19) { - // React 19 sibling prerender - const { renderedComponents } = await renderStream.takeRender(); - expect(renderedComponents).toStrictEqual([]); - } - { const { snapshot, renderedComponents } = await renderStream.takeRender(); From cccfae9204925d4b4b60f85ec0f597e7531b8dd1 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Wed, 27 Nov 2024 14:10:40 +0100 Subject: [PATCH 12/58] `useSuspenseQuery` not failing anymore --- package-lock.json | 227 ++---------------- package.json | 6 +- .../hooks/__tests__/useSuspenseQuery.test.tsx | 15 +- 3 files changed, 28 insertions(+), 220 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2d3f93afb86..eabb4ce2904 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,10 +37,11 @@ "@rollup/plugin-node-resolve": "11.2.1", "@size-limit/esbuild-why": "11.1.4", "@size-limit/preset-small-lib": "11.1.4", + "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "6.4.6", "@testing-library/react": "https://pkg.csb.dev/testing-library/react-testing-library/commit/571fbc81/@testing-library/react", "@testing-library/react-12": "npm:@testing-library/react@^12", - "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@b086f98", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@6fb6fb1", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", @@ -3383,31 +3384,23 @@ } }, "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, + "license": "MIT", "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_modules/@testing-library/dom/node_modules/aria-query": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz", - "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==", - "dev": true, - "dependencies": { - "deep-equal": "^2.0.5" + "node": ">=18" } }, "node_modules/@testing-library/jest-dom": { @@ -3582,8 +3575,8 @@ }, "node_modules/@testing-library/react-render-stream": { "version": "0.0.0-semantically-released", - "resolved": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@b086f98", - "integrity": "sha512-Za+Gv0fU1Sl/YLB0urdLGX1F9ufPC6lmst2UeBfQL33hqi3fPe0DicjX0ZtwXumf6o1GH1+WtVg39vwQm3+sRw==", + "resolved": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@6fb6fb1", + "integrity": "sha512-VKK5D+qtza1iv8+Ky8sRGUFRIo77CycdAjZzW9ttpRcbV+KW4+c+gL7K0zFevwW8ZK+QNxa9XkMs2cQC/99WZA==", "dev": true, "license": "MIT", "dependencies": { @@ -3599,26 +3592,6 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0" } }, - "node_modules/@testing-library/react-render-stream/node_modules/@testing-library/dom": { - "version": "10.4.0", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", - "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "@babel/code-frame": "^7.10.4", - "@babel/runtime": "^7.12.5", - "@types/aria-query": "^5.0.1", - "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": ">=18" - } - }, "node_modules/@testing-library/react-render-stream/node_modules/@testing-library/react": { "version": "16.0.1", "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.0.1.tgz", @@ -5777,38 +5750,6 @@ } } }, - "node_modules/deep-equal": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz", - "integrity": "sha512-ZIwpnevOurS8bpT4192sqAowWM76JDKSHYzMLty3BZGSswgq6pBaH3DhCSW5xVAZICZyKdOBPjwww5wfgT/6PA==", - "dev": true, - "dependencies": { - "array-buffer-byte-length": "^1.0.0", - "call-bind": "^1.0.5", - "es-get-iterator": "^1.1.3", - "get-intrinsic": "^1.2.2", - "is-arguments": "^1.1.1", - "is-array-buffer": "^3.0.2", - "is-date-object": "^1.0.5", - "is-regex": "^1.1.4", - "is-shared-array-buffer": "^1.0.2", - "isarray": "^2.0.5", - "object-is": "^1.1.5", - "object-keys": "^1.1.1", - "object.assign": "^4.1.4", - "regexp.prototype.flags": "^1.5.1", - "side-channel": "^1.0.4", - "which-boxed-primitive": "^1.0.2", - "which-collection": "^1.0.1", - "which-typed-array": "^1.1.13" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/deep-is": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", @@ -6200,26 +6141,6 @@ "node": ">= 0.4" } }, - "node_modules/es-get-iterator": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz", - "integrity": "sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==", - "dev": true, - "dependencies": { - "call-bind": "^1.0.2", - "get-intrinsic": "^1.1.3", - "has-symbols": "^1.0.3", - "is-arguments": "^1.1.1", - "is-map": "^2.0.2", - "is-set": "^2.0.2", - "is-string": "^1.0.7", - "isarray": "^2.0.5", - "stop-iteration-iterator": "^1.0.0" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/es-set-tostringtag": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz", @@ -8101,22 +8022,6 @@ "node": ">= 0.4" } }, - "node_modules/is-arguments": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz", - "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==", - "dev": true, - "dependencies": { - "call-bind": "^1.0.2", - "has-tostringtag": "^1.0.0" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/is-array-buffer": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz", @@ -8303,18 +8208,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/is-map": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz", - "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==", - "dev": true, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/is-module": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz", @@ -8388,18 +8281,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/is-set": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz", - "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==", - "dev": true, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/is-shared-array-buffer": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz", @@ -8487,18 +8368,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/is-weakmap": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz", - "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==", - "dev": true, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/is-weakref": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz", @@ -8511,22 +8380,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/is-weakset": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.3.tgz", - "integrity": "sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==", - "dev": true, - "dependencies": { - "call-bind": "^1.0.7", - "get-intrinsic": "^1.2.4" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/is-windows": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz", @@ -10192,22 +10045,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/object-is": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz", - "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==", - "dev": true, - "dependencies": { - "call-bind": "^1.0.7", - "define-properties": "^1.2.1" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/object-keys": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz", @@ -11992,18 +11829,6 @@ "node": ">=8" } }, - "node_modules/stop-iteration-iterator": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz", - "integrity": "sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==", - "dev": true, - "dependencies": { - "internal-slot": "^1.0.4" - }, - "engines": { - "node": ">= 0.4" - } - }, "node_modules/string-argv": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz", @@ -12357,22 +12182,22 @@ } }, "node_modules/tldts": { - "version": "6.1.50", - "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.50.tgz", - "integrity": "sha512-q9GOap6q3KCsLMdOjXhWU5jVZ8/1dIib898JBRLsN+tBhENpBDcAVQbE0epADOjw11FhQQy9AcbqKGBQPUfTQA==", + "version": "6.1.64", + "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.64.tgz", + "integrity": "sha512-ph4AE5BXWIOsSy9stpoeo7bYe/Cy7VfpciIH4RhVZUPItCJmhqWCN0EVzxd8BOHiyNb42vuJc6NWTjJkg91Tuw==", "dev": true, "license": "MIT", "dependencies": { - "tldts-core": "^6.1.50" + "tldts-core": "^6.1.64" }, "bin": { "tldts": "bin/cli.js" } }, "node_modules/tldts-core": { - "version": "6.1.50", - "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.50.tgz", - "integrity": "sha512-na2EcZqmdA2iV9zHV7OHQDxxdciEpxrjbkp+aHmZgnZKHzoElLajP59np5/4+sare9fQBfixgvXKx8ev1d7ytw==", + "version": "6.1.64", + "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.64.tgz", + "integrity": "sha512-uqnl8vGV16KsyflHOzqrYjjArjfXaU6rMPXYy2/ZWoRKCkXtghgB4VwTDXUG+t0OTGeSewNAG31/x1gCTfLt+Q==", "dev": true, "license": "MIT" }, @@ -13163,24 +12988,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/which-collection": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz", - "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==", - "dev": true, - "dependencies": { - "is-map": "^2.0.3", - "is-set": "^2.0.3", - "is-weakmap": "^2.0.2", - "is-weakset": "^2.0.3" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/which-pm": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/which-pm/-/which-pm-2.0.0.tgz", diff --git a/package.json b/package.json index 4749709ce22..3587267bf99 100644 --- a/package.json +++ b/package.json @@ -119,10 +119,11 @@ "@rollup/plugin-node-resolve": "11.2.1", "@size-limit/esbuild-why": "11.1.4", "@size-limit/preset-small-lib": "11.1.4", + "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "6.4.6", "@testing-library/react": "https://pkg.csb.dev/testing-library/react-testing-library/commit/571fbc81/@testing-library/react", "@testing-library/react-12": "npm:@testing-library/react@^12", - "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@b086f98", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@6fb6fb1", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", @@ -209,6 +210,7 @@ "**/*.json" ], "overrides": { - "pretty-format": "^29.7.0" + "pretty-format": "^29.7.0", + "@testing-library/dom": "$@testing-library/dom" } } diff --git a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx index 2422a5bf8fa..f517e25de41 100644 --- a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx +++ b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx @@ -9808,13 +9808,12 @@ describe("useSuspenseQuery", () => { expect(todo).toHaveTextContent("Clean room"); expect(todo).toHaveAttribute("aria-busy", "false"); } - - await user.click(screen.getByText("Refresh")); - - // if (IS_REACT_19) { - // // React 19 sibling prerender - // await takeRender(); - // } + const el = screen.getByText("Refresh"); + await user.click(el); + if (IS_REACT_19) { + // React 19 sibling prerender + await takeRender(); + } // startTransition will avoid rendering the suspense fallback for already // revealed content if the state update inside the transition causes the @@ -9830,7 +9829,7 @@ describe("useSuspenseQuery", () => { expect(withinDOM().queryByText("Loading")).not.toBeInTheDocument(); // We can ensure this works with isPending from useTransition in the process - // expect(todo).toHaveAttribute("aria-busy", "true"); + expect(todo).toHaveAttribute("aria-busy", "true"); // Ensure we are showing the stale UI until the new todo has loaded expect(todo).toHaveTextContent("Clean room"); From ca0a7516e4ccab006aa7ab52607d31b0aa7f4394 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Wed, 27 Nov 2024 14:34:50 +0100 Subject: [PATCH 13/58] add this to a lot more test files --- package-lock.json | 6 +- package.json | 2 +- .../__tests__/useBackgroundQuery.test.tsx | 18 +-- .../hooks/__tests__/useFragment.test.tsx | 8 +- .../hooks/__tests__/useLazyQuery.test.tsx | 153 +++++++++--------- .../hooks/__tests__/useLoadableQuery.test.tsx | 125 +++++++------- .../hooks/__tests__/useMutation.test.tsx | 2 +- .../__tests__/useQueryRefHandlers.test.tsx | 2 +- .../__tests__/createQueryPreloader.test.tsx | 36 ++--- 9 files changed, 178 insertions(+), 174 deletions(-) diff --git a/package-lock.json b/package-lock.json index eabb4ce2904..fef3a46a565 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,7 +41,7 @@ "@testing-library/jest-dom": "6.4.6", "@testing-library/react": "https://pkg.csb.dev/testing-library/react-testing-library/commit/571fbc81/@testing-library/react", "@testing-library/react-12": "npm:@testing-library/react@^12", - "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@6fb6fb1", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@8474b54", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", @@ -3575,8 +3575,8 @@ }, "node_modules/@testing-library/react-render-stream": { "version": "0.0.0-semantically-released", - "resolved": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@6fb6fb1", - "integrity": "sha512-VKK5D+qtza1iv8+Ky8sRGUFRIo77CycdAjZzW9ttpRcbV+KW4+c+gL7K0zFevwW8ZK+QNxa9XkMs2cQC/99WZA==", + "resolved": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@8474b54", + "integrity": "sha512-Ttj8X8cogMuKH71lJaC4dk3M/VNlBjnH3Xag2GB7iq37dsqYsBoyECypzyU0v4HQe41RaW33TtnvnKIVvgB5cw==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 3587267bf99..76bc85a4050 100644 --- a/package.json +++ b/package.json @@ -123,7 +123,7 @@ "@testing-library/jest-dom": "6.4.6", "@testing-library/react": "https://pkg.csb.dev/testing-library/react-testing-library/commit/571fbc81/@testing-library/react", "@testing-library/react-12": "npm:@testing-library/react@^12", - "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@6fb6fb1", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@8474b54", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", diff --git a/src/react/hooks/__tests__/useBackgroundQuery.test.tsx b/src/react/hooks/__tests__/useBackgroundQuery.test.tsx index d0ebaa39016..97fec74d997 100644 --- a/src/react/hooks/__tests__/useBackgroundQuery.test.tsx +++ b/src/react/hooks/__tests__/useBackgroundQuery.test.tsx @@ -190,7 +190,7 @@ it("tears down the query on unmount", async () => { ); } - const { unmount } = renderStream.render(, { + const { unmount } = await renderStream.render(, { wrapper: createClientWrapper(client), }); @@ -499,7 +499,7 @@ it("does not recreate queryRef and execute a network request when rerendering us ); } - const { rerender } = renderStream.render(, { + const { rerender } = await renderStream.render(, { wrapper: createClientWrapper(client), }); @@ -641,7 +641,7 @@ it("disposes of the queryRef when unmounting before it is used by useReadQuery", return null; } - const { unmount } = renderStream.render(, { + const { unmount } = await renderStream.render(, { wrapper: createClientWrapper(client), }); @@ -677,7 +677,7 @@ it("disposes of old queryRefs when changing variables before the queryRef is use return null; } - const { rerender } = renderStream.render(, { + const { rerender } = await renderStream.render(, { wrapper: createClientWrapper(client), }); @@ -760,7 +760,7 @@ it("disposes of the queryRef when unmounting before it is used by useReadQuery e ); } - const { unmount } = renderStream.render(, { + const { unmount } = await renderStream.render(, { wrapper: createClientWrapper(client), }); const button = screen.getByText("Increment"); @@ -1692,7 +1692,7 @@ it("reacts to variables updates", async () => { ); } - const { rerender } = renderStream.render(, { + const { rerender } = await renderStream.render(, { wrapper: createMockWrapper({ mocks }), }); @@ -2379,7 +2379,7 @@ it("result is referentially stable", async () => { ); } - const { rerender } = renderStream.render(, { + const { rerender } = await renderStream.render(, { wrapper: createMockWrapper({ mocks }), }); @@ -3493,7 +3493,7 @@ it('suspends and does not use partial data from other variables in the cache whe ); } - const { rerender } = renderStream.render(, { + const { rerender } = await renderStream.render(, { wrapper: createMockWrapper({ cache, mocks }), }); @@ -3821,7 +3821,7 @@ it('suspends and does not use partial data when changing variables and using a " ); } - const { rerender } = renderStream.render(, { + const { rerender } = await renderStream.render(, { wrapper: createMockWrapper({ cache, mocks }), }); diff --git a/src/react/hooks/__tests__/useFragment.test.tsx b/src/react/hooks/__tests__/useFragment.test.tsx index bd0c6ad74a5..e9ed03c6d63 100644 --- a/src/react/hooks/__tests__/useFragment.test.tsx +++ b/src/react/hooks/__tests__/useFragment.test.tsx @@ -1425,7 +1425,7 @@ describe("useFragment", () => { data: { __typename: "User", id: 2, name: "Charlie" }, }); - const { takeSnapshot, rerender } = renderHookToSnapshotStream( + const { takeSnapshot, rerender } = await renderHookToSnapshotStream( ({ id }: { id: number }) => useFragment({ fragment, from: { __typename: "User", id } }), { @@ -1489,7 +1489,7 @@ describe("useFragment", () => { }, }); - const { takeSnapshot } = renderHookToSnapshotStream( + const { takeSnapshot } = await renderHookToSnapshotStream( () => useFragment({ fragment, from: { __typename: "Post", id: 1 } }), { wrapper: ({ children }) => ( @@ -1560,7 +1560,7 @@ describe("useFragment", () => { }, }); - const { takeSnapshot } = renderHookToSnapshotStream( + const { takeSnapshot } = await renderHookToSnapshotStream( () => useFragment({ fragment, @@ -1736,7 +1736,7 @@ describe("useFragment", () => { using _ = spyOnConsole("warn"); const cache = new InMemoryCache(); - const { takeSnapshot } = renderHookToSnapshotStream( + const { takeSnapshot } = await renderHookToSnapshotStream( () => useFragment({ fragment: ItemFragment, diff --git a/src/react/hooks/__tests__/useLazyQuery.test.tsx b/src/react/hooks/__tests__/useLazyQuery.test.tsx index 7d296aada1e..5fe701aa3b9 100644 --- a/src/react/hooks/__tests__/useLazyQuery.test.tsx +++ b/src/react/hooks/__tests__/useLazyQuery.test.tsx @@ -99,14 +99,12 @@ describe("useLazyQuery Hook", () => { }, ]; - const { takeSnapshot, getCurrentSnapshot } = renderHookToSnapshotStream( - () => useLazyQuery(helloQuery), - { + const { takeSnapshot, getCurrentSnapshot } = + await renderHookToSnapshotStream(() => useLazyQuery(helloQuery), { wrapper: ({ children }) => ( {children} ), - } - ); + }); { const [, result] = await takeSnapshot(); @@ -139,15 +137,16 @@ describe("useLazyQuery Hook", () => { }, ]; - const { takeSnapshot, getCurrentSnapshot } = renderHookToSnapshotStream( - // skip isn’t actually an option on the types - () => useLazyQuery(helloQuery, { skip: true } as any), - { - wrapper: ({ children }) => ( - {children} - ), - } - ); + const { takeSnapshot, getCurrentSnapshot } = + await renderHookToSnapshotStream( + // skip isn’t actually an option on the types + () => useLazyQuery(helloQuery, { skip: true } as any), + { + wrapper: ({ children }) => ( + {children} + ), + } + ); { const [, result] = await takeSnapshot(); @@ -185,17 +184,18 @@ describe("useLazyQuery Hook", () => { }, ]; - const { takeSnapshot, getCurrentSnapshot } = renderHookToSnapshotStream( - () => - useLazyQuery(query, { - variables: { id: 1 }, - }), - { - wrapper: ({ children }) => ( - {children} - ), - } - ); + const { takeSnapshot, getCurrentSnapshot } = + await renderHookToSnapshotStream( + () => + useLazyQuery(query, { + variables: { id: 1 }, + }), + { + wrapper: ({ children }) => ( + {children} + ), + } + ); { const [, result] = await takeSnapshot(); @@ -544,16 +544,14 @@ describe("useLazyQuery Hook", () => { ]; const cache = new InMemoryCache(); - const { takeSnapshot, getCurrentSnapshot } = renderHookToSnapshotStream( - () => useLazyQuery(query1), - { + const { takeSnapshot, getCurrentSnapshot } = + await renderHookToSnapshotStream(() => useLazyQuery(query1), { wrapper: ({ children }) => ( {children} ), - } - ); + }); { const [, result] = await takeSnapshot(); @@ -602,17 +600,18 @@ describe("useLazyQuery Hook", () => { }, ]; - const { takeSnapshot, getCurrentSnapshot } = renderHookToSnapshotStream( - () => - useLazyQuery(helloQuery, { - fetchPolicy: "network-only", - }), - { - wrapper: ({ children }) => ( - {children} - ), - } - ); + const { takeSnapshot, getCurrentSnapshot } = + await renderHookToSnapshotStream( + () => + useLazyQuery(helloQuery, { + fetchPolicy: "network-only", + }), + { + wrapper: ({ children }) => ( + {children} + ), + } + ); { const [, result] = await takeSnapshot(); @@ -660,17 +659,18 @@ describe("useLazyQuery Hook", () => { }, ]; - const { takeSnapshot, getCurrentSnapshot } = renderHookToSnapshotStream( - () => - useLazyQuery(helloQuery, { - notifyOnNetworkStatusChange: true, - }), - { - wrapper: ({ children }) => ( - {children} - ), - } - ); + const { takeSnapshot, getCurrentSnapshot } = + await renderHookToSnapshotStream( + () => + useLazyQuery(helloQuery, { + notifyOnNetworkStatusChange: true, + }), + { + wrapper: ({ children }) => ( + {children} + ), + } + ); { const [, result] = await takeSnapshot(); @@ -732,10 +732,10 @@ describe("useLazyQuery Hook", () => { {children} ); - const { takeSnapshot, getCurrentSnapshot } = renderHookToSnapshotStream( - () => useLazyQuery(helloQuery), - { wrapper } - ); + const { takeSnapshot, getCurrentSnapshot } = + await renderHookToSnapshotStream(() => useLazyQuery(helloQuery), { + wrapper, + }); { const [, result] = await takeSnapshot(); @@ -813,14 +813,12 @@ describe("useLazyQuery Hook", () => { }, ]; - const { takeSnapshot, getCurrentSnapshot } = renderHookToSnapshotStream( - () => useLazyQuery(CAR_QUERY_BY_ID), - { + const { takeSnapshot, getCurrentSnapshot } = + await renderHookToSnapshotStream(() => useLazyQuery(CAR_QUERY_BY_ID), { wrapper: ({ children }) => ( {children} ), - } - ); + }); { const [, result] = await takeSnapshot(); @@ -1090,7 +1088,7 @@ describe("useLazyQuery Hook", () => { }, ]; - const { takeSnapshot, peekSnapshot } = renderHookToSnapshotStream( + const { takeSnapshot, peekSnapshot } = await renderHookToSnapshotStream( () => useLazyQuery(helloQuery), { wrapper: ({ children }) => ( @@ -1757,17 +1755,18 @@ describe("useLazyQuery Hook", () => { ), }); - const { takeSnapshot, getCurrentSnapshot } = renderHookToSnapshotStream( - () => - useLazyQuery(helloQuery, { - errorPolicy, - }), - { - wrapper: ({ children }) => ( - {children} - ), - } - ); + const { takeSnapshot, getCurrentSnapshot } = + await renderHookToSnapshotStream( + () => + useLazyQuery(helloQuery, { + errorPolicy, + }), + { + wrapper: ({ children }) => ( + {children} + ), + } + ); { const [, result] = await takeSnapshot(); @@ -1942,14 +1941,12 @@ describe("useLazyQuery Hook", () => { link, cache: new InMemoryCache(), }); - const { takeSnapshot, getCurrentSnapshot } = renderHookToSnapshotStream( - () => useLazyQuery(helloQuery), - { + const { takeSnapshot, getCurrentSnapshot } = + await renderHookToSnapshotStream(() => useLazyQuery(helloQuery), { wrapper: ({ children }) => ( {children} ), - } - ); + }); { const [, result] = await takeSnapshot(); diff --git a/src/react/hooks/__tests__/useLoadableQuery.test.tsx b/src/react/hooks/__tests__/useLoadableQuery.test.tsx index 50d228fb0ed..f87ddb21892 100644 --- a/src/react/hooks/__tests__/useLoadableQuery.test.tsx +++ b/src/react/hooks/__tests__/useLoadableQuery.test.tsx @@ -1,10 +1,10 @@ import React, { Suspense, useState } from "react"; import { act, - render, screen, renderHook, waitFor, + renderAsync, } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { ErrorBoundary as ReactErrorBoundary } from "react-error-boundary"; @@ -60,6 +60,7 @@ import { import { RenderStream, + RenderWithoutActAsync, createRenderStream, useTrackRenders, } from "@testing-library/react-render-stream"; @@ -225,14 +226,16 @@ function createDefaultProfiledComponents< }; } -function renderWithMocks( +async function renderWithMocks( ui: React.ReactElement, props: MockedProviderProps, - { render: doRender } = { render } + { render: doRender }: { render: RenderWithoutActAsync } = { + render: renderAsync, + } ) { const user = userEvent.setup(); - const utils = doRender(ui, { + const utils = await doRender(ui, { wrapper: ({ children }) => ( {children} ), @@ -241,16 +244,18 @@ function renderWithMocks( return { ...utils, user }; } -function renderWithClient( +async function renderWithClient( ui: React.ReactElement, options: { client: ApolloClient }, - { render: doRender } = { render } + { render: doRender }: { render: RenderWithoutActAsync } = { + render: renderAsync, + } ) { const { client } = options; const user = userEvent.setup(); - const utils = doRender(ui, { - wrapper: ({ children }) => ( + const utils = await doRender(ui, { + wrapper: ({ children }: { children: React.ReactNode }) => ( {children} ), }); @@ -280,7 +285,7 @@ it("loads a query and suspends when the load query function is called", async () ); } - const { user } = renderWithMocks( + const { user } = await renderWithMocks( , { mocks, @@ -337,7 +342,7 @@ it("loads a query with variables and suspends by passing variables to the loadQu ); } - const { user } = renderWithMocks( + const { user } = await renderWithMocks( , { mocks, @@ -399,7 +404,7 @@ it("tears down the query on unmount", async () => { ); } - const { user, unmount } = renderWithClient( + const { user, unmount } = await renderWithClient( , { client, @@ -536,7 +541,7 @@ it("will resubscribe after disposed when mounting useReadQuery", async () => { ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client, @@ -622,7 +627,7 @@ it("auto resubscribes when mounting useReadQuery after naturally disposed by use ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client, @@ -726,7 +731,7 @@ it("changes variables on a query and resuspends when passing new variables to th ); }; - const { user } = renderWithMocks( + const { user } = await renderWithMocks( , { mocks, @@ -812,7 +817,7 @@ it("resets the `queryRef` to null and disposes of it when calling the `reset` fu ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client, @@ -898,7 +903,7 @@ it("allows the client to be overridden", async () => { ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client: globalClient, @@ -966,7 +971,7 @@ it("passes context to the link", async () => { ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client, @@ -1055,7 +1060,7 @@ it('enables canonical results when canonizeResults is "true"', async () => { ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client, @@ -1143,7 +1148,7 @@ it("can disable canonical results when the cache's canonizeResults setting is tr ); } - const { user } = renderWithMocks( + const { user } = await renderWithMocks( , { cache, @@ -1210,7 +1215,7 @@ it("returns initial cache data followed by network data when the fetch policy is ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client, @@ -1286,7 +1291,7 @@ it("all data is present in the cache, no network request is made", async () => { ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client, @@ -1357,7 +1362,7 @@ it("partial data is present in the cache so it is ignored and network request is ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client, @@ -1429,7 +1434,7 @@ it("existing data in the cache is ignored when `fetchPolicy` is 'network-only'", ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client, @@ -1498,7 +1503,7 @@ it("fetches data from the network but does not update the cache when `fetchPolic ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client, @@ -1628,7 +1633,7 @@ it("works with startTransition to change variables", async () => { ); } - const { user } = renderWithClient(, { client }); + const { user } = await renderWithClient(, { client }); await act(() => user.click(screen.getByText("Load first todo"))); @@ -1719,7 +1724,7 @@ it('does not suspend deferred queries with data in the cache and using a "cache- ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client, @@ -1844,7 +1849,7 @@ it("reacts to cache updates", async () => { ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client, @@ -1933,7 +1938,7 @@ it("applies `errorPolicy` on next fetch when it changes between renders", async ); } - const { user } = renderWithMocks( + const { user } = await renderWithMocks( , { mocks, @@ -2029,7 +2034,7 @@ it("applies `context` on next fetch when it changes between renders", async () = ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client, @@ -2138,7 +2143,7 @@ it("returns canonical results immediately when `canonizeResults` changes from `f ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client, @@ -2262,7 +2267,7 @@ it("applies changed `refetchWritePolicy` to next fetch when changing between ren ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client, @@ -2424,7 +2429,7 @@ it("applies `returnPartialData` on next fetch when it changes between renders", ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client, @@ -2571,7 +2576,7 @@ it("applies updated `fetchPolicy` on next fetch when it changes between renders" ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client, @@ -2673,7 +2678,7 @@ it("re-suspends when calling `refetch`", async () => { ); } - const { user } = renderWithMocks( + const { user } = await renderWithMocks( , { mocks, @@ -2762,7 +2767,7 @@ it("re-suspends when calling `refetch` with new variables", async () => { ); } - const { user } = renderWithMocks( + const { user } = await renderWithMocks( , { mocks, @@ -2846,7 +2851,7 @@ it("re-suspends multiple times when calling `refetch` multiple times", async () ); } - const { user } = renderWithMocks( + const { user } = await renderWithMocks( , { mocks, @@ -2960,7 +2965,7 @@ it("throws errors when errors are returned after calling `refetch`", async () => ); } - const { user } = renderWithMocks( + const { user } = await renderWithMocks( , { mocks, @@ -3043,7 +3048,7 @@ it('ignores errors returned after calling `refetch` when errorPolicy is set to " ); } - const { user } = renderWithMocks( + const { user } = await renderWithMocks( , { mocks, @@ -3130,7 +3135,7 @@ it('returns errors after calling `refetch` when errorPolicy is set to "all"', as ); } - const { user } = renderWithMocks( + const { user } = await renderWithMocks( , { mocks, @@ -3219,7 +3224,7 @@ it('handles partial data results after calling `refetch` when errorPolicy is set ); } - const { user } = renderWithMocks( + const { user } = await renderWithMocks( , { mocks, @@ -3354,7 +3359,7 @@ it("`refetch` works with startTransition to allow React to show stale UI until f ); } - const { user } = renderWithMocks(, { mocks }); + const { user } = await renderWithMocks(, { mocks }); await act(() => user.click(screen.getByText("Load query"))); @@ -3431,7 +3436,7 @@ it("re-suspends when calling `fetchMore` with different variables", async () => ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client, @@ -3519,7 +3524,7 @@ it("properly uses `updateQuery` when calling `fetchMore`", async () => { ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client, @@ -3612,7 +3617,7 @@ it("properly uses cache field policies when calling `fetchMore` without `updateQ ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client, @@ -3791,7 +3796,7 @@ it("`fetchMore` works with startTransition to allow React to show stale UI until ); } - const { user } = renderWithClient(, { client }); + const { user } = await renderWithClient(, { client }); await act(() => user.click(screen.getByText("Load query"))); @@ -3904,7 +3909,7 @@ it('honors refetchWritePolicy set to "merge"', async () => { ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client, @@ -4022,7 +4027,7 @@ it('defaults refetchWritePolicy to "overwrite"', async () => { ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client, @@ -4127,7 +4132,7 @@ it('does not suspend when partial data is in the cache and using a "cache-first" ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client, @@ -4208,7 +4213,7 @@ it('suspends and does not use partial data from other variables in the cache whe ); } - const { user } = renderWithMocks( + const { user } = await renderWithMocks( , { mocks, @@ -4329,7 +4334,7 @@ it('suspends when partial data is in the cache and using a "network-only" fetch ); } - const { user } = renderWithMocks( + const { user } = await renderWithMocks( , { mocks, @@ -4424,7 +4429,7 @@ it('suspends when partial data is in the cache and using a "no-cache" fetch poli ); } - const { user } = renderWithMocks( + const { user } = await renderWithMocks( , { mocks, @@ -4543,7 +4548,7 @@ it('does not suspend when partial data is in the cache and using a "cache-and-ne ); } - const { user } = renderWithMocks( + const { user } = await renderWithMocks( , { mocks, @@ -4620,7 +4625,7 @@ it('suspends and does not use partial data when changing variables and using a " ); } - const { user } = renderWithMocks( + const { user } = await renderWithMocks( , { mocks, @@ -4742,7 +4747,7 @@ it('does not suspend deferred queries with partial data in the cache and using a ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client, @@ -4849,7 +4854,7 @@ it("throws when calling loadQuery on first render", async () => { return null; } - expect(() => renderWithMocks(, { mocks })).toThrow( + await expect(() => renderWithMocks(, { mocks })).rejects.toThrow( new InvariantError( "useLoadableQuery: 'loadQuery' should not be called during render. To start a query during render, use the 'useBackgroundQuery' hook." ) @@ -4875,7 +4880,7 @@ it("throws when calling loadQuery on subsequent render", async () => { return ; } - const { user } = renderWithMocks( + const { user } = await renderWithMocks( (error = e)} fallback={
Oops
}> , @@ -4904,7 +4909,9 @@ it("allows loadQuery to be called in useEffect on first render", async () => { return null; } - expect(() => renderWithMocks(, { mocks })).not.toThrow(); + await expect(() => + renderWithMocks(, { mocks }) + ).resolves.not.toThrow(); }); it("can subscribe to subscriptions and react to cache updates via `subscribeToMore`", async () => { @@ -4978,7 +4985,7 @@ it("can subscribe to subscriptions and react to cache updates via `subscribeToMo ); } - const { user } = renderWithClient( + const { user } = await renderWithClient( , { client, @@ -5112,7 +5119,7 @@ it("throws when calling `subscribeToMore` before loading the query", async () => ); } - renderWithClient(, { client }, renderStream); + await renderWithClient(, { client }, renderStream); // initial render await renderStream.takeRender(); diff --git a/src/react/hooks/__tests__/useMutation.test.tsx b/src/react/hooks/__tests__/useMutation.test.tsx index 2e3d22856fd..51f33c3991b 100644 --- a/src/react/hooks/__tests__/useMutation.test.tsx +++ b/src/react/hooks/__tests__/useMutation.test.tsx @@ -751,7 +751,7 @@ describe("useMutation Hook", () => { }, ]; - const { takeSnapshot } = renderHookToSnapshotStream( + const { takeSnapshot } = await renderHookToSnapshotStream( () => useMutation< { createTodo: Todo }, diff --git a/src/react/hooks/__tests__/useQueryRefHandlers.test.tsx b/src/react/hooks/__tests__/useQueryRefHandlers.test.tsx index e22c2256128..557af527ec5 100644 --- a/src/react/hooks/__tests__/useQueryRefHandlers.test.tsx +++ b/src/react/hooks/__tests__/useQueryRefHandlers.test.tsx @@ -79,7 +79,7 @@ test("does not interfere with updates from useReadQuery", async () => { ); } - const { rerender } = renderStream.render(, { + const { rerender } = await renderStream.render(, { wrapper: createClientWrapper(client), }); { diff --git a/src/react/query-preloader/__tests__/createQueryPreloader.test.tsx b/src/react/query-preloader/__tests__/createQueryPreloader.test.tsx index a0d60a66a96..97b49e07db8 100644 --- a/src/react/query-preloader/__tests__/createQueryPreloader.test.tsx +++ b/src/react/query-preloader/__tests__/createQueryPreloader.test.tsx @@ -45,7 +45,7 @@ function createDefaultClient(mocks: MockedResponse[]) { }); } -function renderDefaultTestApp({ +async function renderDefaultTestApp({ client, queryRef, }: { @@ -90,7 +90,7 @@ function renderDefaultTestApp({ ); } - const utils = renderStream.render(, { + const utils = await renderStream.render(, { wrapper: ({ children }) => ( {children} ), @@ -110,7 +110,7 @@ test("loads a query and suspends when passed to useReadQuery", async () => { const queryRef = preloadQuery(query); - const { renderStream } = renderDefaultTestApp({ client, queryRef }); + const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { const { renderedComponents } = await renderStream.takeRender(); @@ -138,7 +138,7 @@ test("loads a query with variables and suspends when passed to useReadQuery", as variables: { id: "1" }, }); - const { renderStream } = renderDefaultTestApp({ client, queryRef }); + const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { const { renderedComponents } = await renderStream.takeRender(); @@ -1233,7 +1233,7 @@ test("reacts to cache updates", async () => { const preloadQuery = createQueryPreloader(client); const queryRef = preloadQuery(query); - const { renderStream } = renderDefaultTestApp({ client, queryRef }); + const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { const { renderedComponents } = await renderStream.takeRender(); @@ -1278,7 +1278,7 @@ test("ignores cached result and suspends when `fetchPolicy` is network-only", as fetchPolicy: "network-only", }); - const { renderStream } = renderDefaultTestApp({ client, queryRef }); + const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { const { renderedComponents } = await renderStream.takeRender(); @@ -1307,7 +1307,7 @@ test("does not cache results when `fetchPolicy` is no-cache", async () => { fetchPolicy: "no-cache", }); - const { renderStream } = renderDefaultTestApp({ client, queryRef }); + const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { const { renderedComponents } = await renderStream.takeRender(); @@ -1339,7 +1339,7 @@ test("returns initial cache data followed by network data when `fetchPolicy` is fetchPolicy: "cache-and-network", }); - const { renderStream } = renderDefaultTestApp({ client, queryRef }); + const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -1373,7 +1373,7 @@ test("returns cached data when all data is present in the cache", async () => { const preloadQuery = createQueryPreloader(client); const queryRef = preloadQuery(query); - const { renderStream } = renderDefaultTestApp({ client, queryRef }); + const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -1417,7 +1417,7 @@ test("suspends and ignores partial data in the cache", async () => { const preloadQuery = createQueryPreloader(client); const queryRef = preloadQuery(query); - const { renderStream } = renderDefaultTestApp({ client, queryRef }); + const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { const { renderedComponents } = await renderStream.takeRender(); @@ -1452,7 +1452,7 @@ test("throws when error is returned", async () => { const preloadQuery = createQueryPreloader(client); const queryRef = preloadQuery(query); - const { renderStream } = renderDefaultTestApp({ client, queryRef }); + const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { const { renderedComponents } = await renderStream.takeRender(); @@ -1483,7 +1483,7 @@ test("returns error when error policy is 'all'", async () => { const preloadQuery = createQueryPreloader(client); const queryRef = preloadQuery(query, { errorPolicy: "all" }); - const { renderStream } = renderDefaultTestApp({ client, queryRef }); + const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { const { renderedComponents } = await renderStream.takeRender(); @@ -1517,7 +1517,7 @@ test("discards error when error policy is 'ignore'", async () => { const preloadQuery = createQueryPreloader(client); const queryRef = preloadQuery(query, { errorPolicy: "ignore" }); - const { renderStream } = renderDefaultTestApp({ client, queryRef }); + const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { const { renderedComponents } = await renderStream.takeRender(); @@ -1567,7 +1567,7 @@ test("passes context to the link", async () => { context: { valueA: "A", valueB: "B" }, }); - const { renderStream } = renderDefaultTestApp({ client, queryRef }); + const { renderStream } = await renderDefaultTestApp({ client, queryRef }); // initial render await renderStream.takeRender(); @@ -1633,7 +1633,7 @@ test("does not suspend and returns partial data when `returnPartialData` is `tru returnPartialData: true, }); - const { renderStream } = renderDefaultTestApp({ client, queryRef }); + const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -1705,7 +1705,7 @@ test('enables canonical results when canonizeResults is "true"', async () => { const preloadQuery = createQueryPreloader(client); const queryRef = preloadQuery(query, { canonizeResults: true }); - const { renderStream } = renderDefaultTestApp({ client, queryRef }); + const { renderStream } = await renderDefaultTestApp({ client, queryRef }); const { snapshot } = await renderStream.takeRender(); const resultSet = new Set(snapshot.result?.data.results); @@ -1763,7 +1763,7 @@ test("can disable canonical results when the cache's canonizeResults setting is const preloadQuery = createQueryPreloader(client); const queryRef = preloadQuery(query, { canonizeResults: false }); - const { renderStream } = renderDefaultTestApp({ client, queryRef }); + const { renderStream } = await renderDefaultTestApp({ client, queryRef }); const { snapshot } = await renderStream.takeRender(); const resultSet = new Set(snapshot.result!.data.results); @@ -1798,7 +1798,7 @@ test("suspends deferred queries until initial chunk loads then rerenders with de const preloadQuery = createQueryPreloader(client); const queryRef = preloadQuery(query); - const { renderStream } = renderDefaultTestApp({ client, queryRef }); + const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { const { renderedComponents } = await renderStream.takeRender(); From 203aaaa00922e721e417ee45e8aef5455516999f Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Wed, 27 Nov 2024 15:45:48 +0100 Subject: [PATCH 14/58] useBackgroundQuery --- .../__tests__/useBackgroundQuery.test.tsx | 417 +++++++++++------- 1 file changed, 262 insertions(+), 155 deletions(-) diff --git a/src/react/hooks/__tests__/useBackgroundQuery.test.tsx b/src/react/hooks/__tests__/useBackgroundQuery.test.tsx index 97fec74d997..887a1009901 100644 --- a/src/react/hooks/__tests__/useBackgroundQuery.test.tsx +++ b/src/react/hooks/__tests__/useBackgroundQuery.test.tsx @@ -60,7 +60,9 @@ import { SubscribeToMoreFunction } from "../useSuspenseQuery"; import { RenderStream, createRenderStream, + disableActEnvironment, useTrackRenders, + userEventWithoutAct, } from "@testing-library/react-render-stream"; afterEach(() => { @@ -147,7 +149,8 @@ it("fetches a simple query with minimal config", async () => { ); } - renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); { const { renderedComponents } = await renderStream.takeRender(); @@ -190,6 +193,7 @@ it("tears down the query on unmount", async () => { ); } + using _disabledAct = disableActEnvironment(); const { unmount } = await renderStream.render(, { wrapper: createClientWrapper(client), }); @@ -283,7 +287,7 @@ it("auto disposes of the queryRef if not used within configured timeout", async it("will resubscribe after disposed when mounting useReadQuery", async () => { const { query, mocks } = setupSimpleCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const client = new ApolloClient({ link: new MockLink(mocks), cache: new InMemoryCache(), @@ -316,7 +320,8 @@ it("will resubscribe after disposed when mounting useReadQuery", async () => { ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client) }); expect(client.getObservableQueries().size).toBe(1); expect(client).toHaveSuspenseCacheEntryUsing(query); @@ -333,7 +338,7 @@ it("will resubscribe after disposed when mounting useReadQuery", async () => { expect(client.getObservableQueries().size).toBe(0); expect(client).not.toHaveSuspenseCacheEntryUsing(query); - await act(() => user.click(screen.getByText("Toggle"))); + await user.click(screen.getByText("Toggle")); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -367,7 +372,7 @@ it("will resubscribe after disposed when mounting useReadQuery", async () => { it("auto resubscribes when mounting useReadQuery after naturally disposed by useReadQuery", async () => { const { query, mocks } = setupSimpleCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const client = new ApolloClient({ link: new MockLink(mocks), cache: new InMemoryCache(), @@ -392,7 +397,8 @@ it("auto resubscribes when mounting useReadQuery after naturally disposed by use ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client) }); const toggleButton = screen.getByText("Toggle"); @@ -415,7 +421,7 @@ it("auto resubscribes when mounting useReadQuery after naturally disposed by use }); } - await act(() => user.click(toggleButton)); + await user.click(toggleButton); await renderStream.takeRender(); await wait(0); @@ -425,7 +431,7 @@ it("auto resubscribes when mounting useReadQuery after naturally disposed by use // again. expect(client).toHaveSuspenseCacheEntryUsing(query); - await act(() => user.click(toggleButton)); + await user.click(toggleButton); expect(client.getObservableQueries().size).toBe(1); expect(client).toHaveSuspenseCacheEntryUsing(query); @@ -462,7 +468,7 @@ it("auto resubscribes when mounting useReadQuery after naturally disposed by use it("does not recreate queryRef and execute a network request when rerendering useBackgroundQuery after queryRef is disposed", async () => { const { query } = setupSimpleCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); let fetchCount = 0; const client = new ApolloClient({ link: new ApolloLink(() => { @@ -499,6 +505,7 @@ it("does not recreate queryRef and execute a network request when rerendering us ); } + using _disabledAct = disableActEnvironment(); const { rerender } = await renderStream.render(, { wrapper: createClientWrapper(client), }); @@ -521,7 +528,7 @@ it("does not recreate queryRef and execute a network request when rerendering us }); } - await act(() => user.click(toggleButton)); + await user.click(toggleButton); await renderStream.takeRender(); await wait(0); @@ -530,7 +537,7 @@ it("does not recreate queryRef and execute a network request when rerendering us expect(fetchCount).toBe(1); - await act(() => user.click(toggleButton)); + await user.click(toggleButton); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -551,7 +558,7 @@ it("does not recreate queryRef and execute a network request when rerendering us // https://github.com/apollographql/apollo-client/issues/11815 it("does not recreate queryRef or execute a network request when rerendering useBackgroundQuery in strict mode", async () => { const { query } = setupSimpleCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); let fetchCount = 0; const client = new ApolloClient({ link: new ApolloLink(() => { @@ -597,7 +604,8 @@ it("does not recreate queryRef or execute a network request when rerendering use ); } - renderStream.render(, { + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client, React.StrictMode), }); @@ -613,7 +621,7 @@ it("does not recreate queryRef or execute a network request when rerendering use const firstRender = await renderStream.takeRender(); const initialQueryRef = firstRender.snapshot.queryRef; - await act(() => user.click(incrementButton)); + await user.click(incrementButton); { const { snapshot } = await renderStream.takeRender(); @@ -641,6 +649,7 @@ it("disposes of the queryRef when unmounting before it is used by useReadQuery", return null; } + using _disabledAct = disableActEnvironment(); const { unmount } = await renderStream.render(, { wrapper: createClientWrapper(client), }); @@ -677,6 +686,7 @@ it("disposes of old queryRefs when changing variables before the queryRef is use return null; } + using _disabledAct = disableActEnvironment(); const { rerender } = await renderStream.render(, { wrapper: createClientWrapper(client), }); @@ -694,7 +704,7 @@ it("disposes of old queryRefs when changing variables before the queryRef is use rerender(); - await wait(0); + await wait(10); expect(client.getObservableQueries().size).toBe(1); expect(client).toHaveSuspenseCacheEntryUsing(query, { @@ -721,7 +731,8 @@ it("does not prematurely dispose of the queryRef when using strict mode", async return null; } - renderStream.render(, { + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client, React.StrictMode), }); @@ -743,7 +754,7 @@ it("disposes of the queryRef when unmounting before it is used by useReadQuery e link: new MockLink(mocks), cache: new InMemoryCache(), }); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const renderStream = createDefaultProfiler(); @@ -760,12 +771,13 @@ it("disposes of the queryRef when unmounting before it is used by useReadQuery e ); } + using _disabledAct = disableActEnvironment(); const { unmount } = await renderStream.render(, { wrapper: createClientWrapper(client), }); const button = screen.getByText("Increment"); - await act(() => user.click(button)); + await user.click(button); { const { renderedComponents } = await renderStream.takeRender(); @@ -816,7 +828,10 @@ it("allows the client to be overridden", async () => { ); } - renderStream.render(, { wrapper: createClientWrapper(globalClient) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { + wrapper: createClientWrapper(globalClient), + }); { const { renderedComponents } = await renderStream.takeRender(); @@ -872,7 +887,8 @@ it("passes context to the link", async () => { ); } - renderStream.render(, { wrapper: createMockWrapper({ link }) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createMockWrapper({ link }) }); { const { renderedComponents } = await renderStream.takeRender(); @@ -944,7 +960,8 @@ it('enables canonical results when canonizeResults is "true"', async () => { ); } - renderStream.render(, { wrapper: createMockWrapper({ cache }) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createMockWrapper({ cache }) }); const { snapshot: { result }, @@ -1013,7 +1030,8 @@ it("can disable canonical results when the cache's canonizeResults setting is tr ); } - renderStream.render(, { wrapper: createMockWrapper({ cache }) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createMockWrapper({ cache }) }); const { snapshot } = await renderStream.takeRender(); const result = snapshot.result!; @@ -1058,7 +1076,8 @@ it("returns initial cache data followed by network data when the fetch policy is ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client) }); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -1122,7 +1141,8 @@ it("all data is present in the cache, no network request is made", async () => { ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client) }); const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -1179,7 +1199,8 @@ it("partial data is present in the cache so it is ignored and network request is ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client) }); { const { renderedComponents } = await renderStream.takeRender(); @@ -1231,7 +1252,8 @@ it("existing data in the cache is ignored when fetchPolicy is 'network-only'", a ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client) }); { const { renderedComponents } = await renderStream.takeRender(); @@ -1285,7 +1307,8 @@ it("fetches data from the network but does not update the cache when fetchPolicy ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client) }); { const { renderedComponents } = await renderStream.takeRender(); @@ -1323,7 +1346,7 @@ it("works with startTransition to change variables", async () => { }; } - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const query: TypedDocumentNode = gql` query TodoItemQuery($id: ID!) { @@ -1399,7 +1422,8 @@ it("works with startTransition to change variables", async () => { ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client) }); { const { renderedComponents } = await renderStream.takeRender(); @@ -1421,7 +1445,7 @@ it("works with startTransition to change variables", async () => { }); } - await act(() => user.click(screen.getByText("Change todo"))); + await user.click(screen.getByText("Change todo")); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -1516,7 +1540,8 @@ it('does not suspend deferred queries with data in the cache and using a "cache- ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client) }); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -1620,7 +1645,8 @@ it("reacts to cache updates", async () => { ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client) }); { const { renderedComponents } = await renderStream.takeRender(); @@ -1692,6 +1718,7 @@ it("reacts to variables updates", async () => { ); } + using _disabledAct = disableActEnvironment(); const { rerender } = await renderStream.render(, { wrapper: createMockWrapper({ mocks }), }); @@ -1755,7 +1782,8 @@ it("does not suspend when `skip` is true", async () => { ); } - renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); const { renderedComponents } = await renderStream.takeRender(); @@ -1782,7 +1810,8 @@ it("does not suspend when using `skipToken` in options", async () => { ); } - renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); const { renderedComponents } = await renderStream.takeRender(); @@ -1793,7 +1822,7 @@ it("does not suspend when using `skipToken` in options", async () => { it("suspends when `skip` becomes `false` after it was `true`", async () => { const { query, mocks } = setupSimpleCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = @@ -1814,7 +1843,8 @@ it("suspends when `skip` becomes `false` after it was `true`", async () => { ); } - renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); { const { renderedComponents } = await renderStream.takeRender(); @@ -1822,7 +1852,7 @@ it("suspends when `skip` becomes `false` after it was `true`", async () => { expect(renderedComponents).toStrictEqual([App]); } - await act(() => user.click(screen.getByText("Run query"))); + await user.click(screen.getByText("Run query")); { const { renderedComponents } = await renderStream.takeRender(); @@ -1846,7 +1876,7 @@ it("suspends when `skip` becomes `false` after it was `true`", async () => { it("suspends when switching away from `skipToken` in options", async () => { const { query, mocks } = setupSimpleCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultTrackedComponents(renderStream); @@ -1866,7 +1896,8 @@ it("suspends when switching away from `skipToken` in options", async () => { ); } - renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); { const { renderedComponents } = await renderStream.takeRender(); @@ -1874,7 +1905,7 @@ it("suspends when switching away from `skipToken` in options", async () => { expect(renderedComponents).toStrictEqual([App]); } - await act(() => user.click(screen.getByText("Run query"))); + await user.click(screen.getByText("Run query")); { const { renderedComponents } = await renderStream.takeRender(); @@ -1898,7 +1929,7 @@ it("suspends when switching away from `skipToken` in options", async () => { it("renders skip result, does not suspend, and maintains `data` when `skip` becomes `true` after it was `false`", async () => { const { query, mocks } = setupSimpleCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultTrackedComponents(renderStream); @@ -1918,7 +1949,8 @@ it("renders skip result, does not suspend, and maintains `data` when `skip` beco ); } - renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); { const { renderedComponents } = await renderStream.takeRender(); @@ -1936,7 +1968,7 @@ it("renders skip result, does not suspend, and maintains `data` when `skip` beco }); } - await act(() => user.click(screen.getByText("Toggle skip"))); + await user.click(screen.getByText("Toggle skip")); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -1954,7 +1986,7 @@ it("renders skip result, does not suspend, and maintains `data` when `skip` beco it("renders skip result, does not suspend, and maintains `data` when switching back to `skipToken`", async () => { const { query, mocks } = setupSimpleCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultTrackedComponents(renderStream); @@ -1974,7 +2006,8 @@ it("renders skip result, does not suspend, and maintains `data` when switching b ); } - renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); { const { renderedComponents } = await renderStream.takeRender(); @@ -1992,7 +2025,7 @@ it("renders skip result, does not suspend, and maintains `data` when switching b }); } - await act(() => user.click(screen.getByText("Toggle skip"))); + await user.click(screen.getByText("Toggle skip")); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -2010,7 +2043,7 @@ it("renders skip result, does not suspend, and maintains `data` when switching b it("does not make network requests when `skip` is `true`", async () => { const { query, mocks } = setupSimpleCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); let fetchCount = 0; @@ -2055,14 +2088,15 @@ it("does not make network requests when `skip` is `true`", async () => { ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client) }); // initial skipped result await renderStream.takeRender(); expect(fetchCount).toBe(0); // Toggle skip to `false` - await act(() => user.click(screen.getByText("Toggle skip"))); + await user.click(screen.getByText("Toggle skip")); expect(fetchCount).toBe(1); { @@ -2082,7 +2116,7 @@ it("does not make network requests when `skip` is `true`", async () => { } // Toggle skip to `true` - await act(() => user.click(screen.getByText("Toggle skip"))); + await user.click(screen.getByText("Toggle skip")); expect(fetchCount).toBe(1); { @@ -2101,7 +2135,7 @@ it("does not make network requests when `skipToken` is used", async () => { const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultTrackedComponents(renderStream); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); let fetchCount = 0; @@ -2142,14 +2176,15 @@ it("does not make network requests when `skipToken` is used", async () => { ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client) }); // initial skipped result await renderStream.takeRender(); expect(fetchCount).toBe(0); // Toggle skip to `false` - await act(() => user.click(screen.getByText("Toggle skip"))); + await user.click(screen.getByText("Toggle skip")); expect(fetchCount).toBe(1); { @@ -2169,7 +2204,7 @@ it("does not make network requests when `skipToken` is used", async () => { } // Toggle skip to `true` - await act(() => user.click(screen.getByText("Toggle skip"))); + await user.click(screen.getByText("Toggle skip")); expect(fetchCount).toBe(1); { @@ -2188,7 +2223,7 @@ it("does not make network requests when `skipToken` is used in strict mode", asy const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultTrackedComponents(renderStream); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); let fetchCount = 0; @@ -2229,7 +2264,8 @@ it("does not make network requests when `skipToken` is used in strict mode", asy ); } - renderStream.render(, { + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client, React.StrictMode), }); @@ -2238,7 +2274,7 @@ it("does not make network requests when `skipToken` is used in strict mode", asy expect(fetchCount).toBe(0); // Toggle skip to `false` - await act(() => user.click(screen.getByText("Toggle skip"))); + await user.click(screen.getByText("Toggle skip")); await renderStream.takeRender(); { @@ -2254,7 +2290,7 @@ it("does not make network requests when `skipToken` is used in strict mode", asy expect(fetchCount).toBe(1); // Toggle skip to `true` - await act(() => user.click(screen.getByText("Toggle skip"))); + await user.click(screen.getByText("Toggle skip")); { const { snapshot } = await renderStream.takeRender(); @@ -2276,7 +2312,7 @@ it("does not make network requests when using `skip` option in strict mode", asy const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultTrackedComponents(renderStream); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); let fetchCount = 0; @@ -2317,7 +2353,8 @@ it("does not make network requests when using `skip` option in strict mode", asy ); } - renderStream.render(, { + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client, React.StrictMode), }); @@ -2326,7 +2363,7 @@ it("does not make network requests when using `skip` option in strict mode", asy expect(fetchCount).toBe(0); // Toggle skip to `false` - await act(() => user.click(screen.getByText("Toggle skip"))); + await user.click(screen.getByText("Toggle skip")); await renderStream.takeRender(); { @@ -2342,7 +2379,7 @@ it("does not make network requests when using `skip` option in strict mode", asy expect(fetchCount).toBe(1); // Toggle skip to `true` - await act(() => user.click(screen.getByText("Toggle skip"))); + await user.click(screen.getByText("Toggle skip")); { const { snapshot } = await renderStream.takeRender(); @@ -2379,6 +2416,7 @@ it("result is referentially stable", async () => { ); } + using _disabledAct = disableActEnvironment(); const { rerender } = await renderStream.render(, { wrapper: createMockWrapper({ mocks }), }); @@ -2413,7 +2451,7 @@ it("result is referentially stable", async () => { it("`skip` option works with `startTransition`", async () => { const { query, mocks } = setupSimpleCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const renderStream = createRenderStream({ initialSnapshot: { isPending: false, @@ -2450,7 +2488,8 @@ it("`skip` option works with `startTransition`", async () => { ); } - renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); { const { renderedComponents } = await renderStream.takeRender(); @@ -2459,7 +2498,7 @@ it("`skip` option works with `startTransition`", async () => { } // Toggle skip to `false` - await act(() => user.click(screen.getByText("Toggle skip"))); + await user.click(screen.getByText("Toggle skip")); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -2490,7 +2529,7 @@ it("`skip` option works with `startTransition`", async () => { it("`skipToken` works with `startTransition`", async () => { const { query, mocks } = setupSimpleCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const renderStream = createRenderStream({ initialSnapshot: { @@ -2529,7 +2568,8 @@ it("`skipToken` works with `startTransition`", async () => { ); } - renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); { const { renderedComponents } = await renderStream.takeRender(); @@ -2538,7 +2578,7 @@ it("`skipToken` works with `startTransition`", async () => { } // Toggle skip to `false` - await act(() => user.click(screen.getByText("Toggle skip"))); + await user.click(screen.getByText("Toggle skip")); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -2569,7 +2609,7 @@ it("`skipToken` works with `startTransition`", async () => { it("applies `errorPolicy` on next fetch when it changes between renders", async () => { const { query } = setupSimpleCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const mocks = [ { @@ -2613,7 +2653,8 @@ it("applies `errorPolicy` on next fetch when it changes between renders", async ); } - renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); // initial render await renderStream.takeRender(); @@ -2628,10 +2669,10 @@ it("applies `errorPolicy` on next fetch when it changes between renders", async }); } - await act(() => user.click(screen.getByText("Change error policy"))); + await user.click(screen.getByText("Change error policy")); await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Refetch greeting"))); + await user.click(screen.getByText("Refetch greeting")); await renderStream.takeRender(); { @@ -2654,7 +2695,7 @@ it("applies `context` on next fetch when it changes between renders", async () = context: Record; } - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const query: TypedDocumentNode = gql` query { @@ -2696,7 +2737,8 @@ it("applies `context` on next fetch when it changes between renders", async () = ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client) }); { const { renderedComponents } = await renderStream.takeRender(); @@ -2714,10 +2756,10 @@ it("applies `context` on next fetch when it changes between renders", async () = }); } - await act(() => user.click(screen.getByText("Update context"))); + await user.click(screen.getByText("Update context")); await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); await renderStream.takeRender(); { @@ -2769,7 +2811,7 @@ it("returns canonical results immediately when `canonizeResults` changes from `f { __typename: "Result", value: 5 }, ]; - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); cache.writeQuery({ query, @@ -2799,7 +2841,8 @@ it("returns canonical results immediately when `canonizeResults` changes from `f ); } - renderStream.render(, { wrapper: createMockWrapper({ cache }) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createMockWrapper({ cache }) }); { const { snapshot } = await renderStream.takeRender(); @@ -2813,7 +2856,7 @@ it("returns canonical results immediately when `canonizeResults` changes from `f expect(values).toEqual([0, 1, 1, 2, 3, 5]); } - await act(() => user.click(screen.getByText("Canonize results"))); + await user.click(screen.getByText("Canonize results")); { const { snapshot } = await renderStream.takeRender(); @@ -2833,7 +2876,7 @@ it("applies changed `refetchWritePolicy` to next fetch when changing between ren primes: number[]; } - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const query: TypedDocumentNode = gql` query GetPrimes($min: number, $max: number) { @@ -2914,7 +2957,8 @@ it("applies changed `refetchWritePolicy` to next fetch when changing between ren ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client) }); // initial suspended render await renderStream.takeRender(); @@ -2930,7 +2974,7 @@ it("applies changed `refetchWritePolicy` to next fetch when changing between ren expect(mergeParams).toEqual([[undefined, [2, 3, 5, 7, 11]]]); } - await act(() => user.click(screen.getByText("Refetch next"))); + await user.click(screen.getByText("Refetch next")); await renderStream.takeRender(); { @@ -2950,10 +2994,10 @@ it("applies changed `refetchWritePolicy` to next fetch when changing between ren ]); } - await act(() => user.click(screen.getByText("Change refetch write policy"))); + await user.click(screen.getByText("Change refetch write policy")); await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Refetch last"))); + await user.click(screen.getByText("Refetch last")); await renderStream.takeRender(); { @@ -2985,7 +3029,7 @@ it("applies `returnPartialData` on next fetch when it changes between renders", }; } - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const partialQuery: TypedDocumentNode = gql` query { @@ -3058,7 +3102,8 @@ it("applies `returnPartialData` on next fetch when it changes between renders", ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client) }); // initial suspended render await renderStream.takeRender(); @@ -3075,7 +3120,7 @@ it("applies `returnPartialData` on next fetch when it changes between renders", }); } - await act(() => user.click(screen.getByText("Update partial data"))); + await user.click(screen.getByText("Update partial data")); await renderStream.takeRender(); cache.modify({ @@ -3115,7 +3160,7 @@ it("applies `returnPartialData` on next fetch when it changes between renders", it("applies updated `fetchPolicy` on next fetch when it changes between renders", async () => { const { query, mocks } = setupVariablesCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const cache = new InMemoryCache(); cache.writeQuery({ @@ -3161,7 +3206,8 @@ it("applies updated `fetchPolicy` on next fetch when it changes between renders" ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client) }); { const { snapshot } = await renderStream.takeRender(); @@ -3179,7 +3225,7 @@ it("applies updated `fetchPolicy` on next fetch when it changes between renders" }); } - await act(() => user.click(screen.getByText("Change fetch policy"))); + await user.click(screen.getByText("Change fetch policy")); { const { snapshot } = await renderStream.takeRender(); @@ -3197,7 +3243,7 @@ it("applies updated `fetchPolicy` on next fetch when it changes between renders" }); } - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); await renderStream.takeRender(); { @@ -3225,7 +3271,7 @@ it("applies updated `fetchPolicy` on next fetch when it changes between renders" it("properly handles changing options along with changing `variables`", async () => { const { query } = setupVariablesCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const mocks: MockedResponse[] = [ { request: { query, variables: { id: "1" } }, @@ -3298,7 +3344,8 @@ it("properly handles changing options along with changing `variables`", async () ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client) }); { const { snapshot } = await renderStream.takeRender(); @@ -3319,7 +3366,7 @@ it("properly handles changing options along with changing `variables`", async () }); } - await act(() => user.click(screen.getByText("Get second character"))); + await user.click(screen.getByText("Get second character")); await renderStream.takeRender(); { @@ -3341,7 +3388,7 @@ it("properly handles changing options along with changing `variables`", async () }); } - await act(() => user.click(screen.getByText("Get first character"))); + await user.click(screen.getByText("Get first character")); { const { snapshot } = await renderStream.takeRender(); @@ -3362,7 +3409,7 @@ it("properly handles changing options along with changing `variables`", async () }); } - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); await renderStream.takeRender(); { @@ -3427,7 +3474,8 @@ it('does not suspend when partial data is in the cache and using a "cache-first" ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client) }); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -3493,6 +3541,7 @@ it('suspends and does not use partial data from other variables in the cache whe ); } + using _disabledAct = disableActEnvironment(); const { rerender } = await renderStream.render(, { wrapper: createMockWrapper({ cache, mocks }), }); @@ -3588,7 +3637,8 @@ it('suspends when partial data is in the cache and using a "network-only" fetch ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client) }); { const { renderedComponents } = await renderStream.takeRender(); @@ -3655,7 +3705,8 @@ it('suspends when partial data is in the cache and using a "no-cache" fetch poli ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client) }); { const { renderedComponents } = await renderStream.takeRender(); @@ -3755,7 +3806,8 @@ it('does not suspend when partial data is in the cache and using a "cache-and-ne ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client) }); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -3821,6 +3873,7 @@ it('suspends and does not use partial data when changing variables and using a " ); } + using _disabledAct = disableActEnvironment(); const { rerender } = await renderStream.render(, { wrapper: createMockWrapper({ cache, mocks }), }); @@ -3936,7 +3989,8 @@ it('does not suspend deferred queries with partial data in the cache and using a ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client) }); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -4047,7 +4101,8 @@ it.each([ ); } - renderStream.render(, { + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createClientWrapper(client, React.StrictMode), }); @@ -4089,7 +4144,7 @@ it.each([ describe("refetch", () => { it("re-suspends when calling `refetch`", async () => { const { query, mocks: defaultMocks } = setupVariablesCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultTrackedComponents(renderStream); @@ -4127,7 +4182,10 @@ describe("refetch", () => { ); } - renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { + wrapper: createMockWrapper({ mocks }), + }); { const { renderedComponents } = await renderStream.takeRender(); @@ -4151,7 +4209,7 @@ describe("refetch", () => { }); } - await act(() => user.click(screen.getByText("Refetch"))); + user.click(screen.getByText("Refetch")); { // parent component re-suspends @@ -4181,7 +4239,7 @@ describe("refetch", () => { it("re-suspends when calling `refetch` with new variables", async () => { const { query, mocks } = setupVariablesCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultTrackedComponents(renderStream); @@ -4202,7 +4260,10 @@ describe("refetch", () => { ); } - renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { + wrapper: createMockWrapper({ mocks }), + }); { const { renderedComponents } = await renderStream.takeRender(); @@ -4226,7 +4287,7 @@ describe("refetch", () => { }); } - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); { const { renderedComponents } = await renderStream.takeRender(); @@ -4255,7 +4316,7 @@ describe("refetch", () => { it("re-suspends multiple times when calling `refetch` multiple times", async () => { const { query, mocks: defaultMocks } = setupVariablesCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultTrackedComponents(renderStream); @@ -4306,7 +4367,10 @@ describe("refetch", () => { ); } - renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { + wrapper: createMockWrapper({ mocks }), + }); { const { renderedComponents } = await renderStream.takeRender(); @@ -4328,7 +4392,7 @@ describe("refetch", () => { const button = screen.getByText("Refetch"); - await act(() => user.click(button)); + await user.click(button); { const { renderedComponents } = await renderStream.takeRender(); @@ -4352,7 +4416,7 @@ describe("refetch", () => { }); } - await act(() => user.click(button)); + await user.click(button); { const { renderedComponents } = await renderStream.takeRender(); @@ -4382,7 +4446,7 @@ describe("refetch", () => { it("throws errors when errors are returned after calling `refetch`", async () => { using _consoleSpy = spyOnConsole("error"); const { query, mocks: defaultMocks } = setupVariablesCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const mocks: MockedResponse[] = [ ...defaultMocks, { @@ -4417,7 +4481,10 @@ describe("refetch", () => { ); } - renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { + wrapper: createMockWrapper({ mocks }), + }); { const { renderedComponents } = await renderStream.takeRender(); @@ -4444,7 +4511,7 @@ describe("refetch", () => { }); } - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); { const { renderedComponents } = await renderStream.takeRender(); @@ -4468,7 +4535,7 @@ describe("refetch", () => { it('ignores errors returned after calling `refetch` when errorPolicy is set to "ignore"', async () => { const { query, mocks: defaultMocks } = setupVariablesCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const mocks = [ ...defaultMocks, { @@ -4504,7 +4571,10 @@ describe("refetch", () => { ); } - renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { + wrapper: createMockWrapper({ mocks }), + }); { const { renderedComponents } = await renderStream.takeRender(); @@ -4531,7 +4601,7 @@ describe("refetch", () => { }); } - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); { const { renderedComponents } = await renderStream.takeRender(); @@ -4563,7 +4633,7 @@ describe("refetch", () => { it('returns errors after calling `refetch` when errorPolicy is set to "all"', async () => { const { query, mocks: defaultMocks } = setupVariablesCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const mocks = [ ...defaultMocks, { @@ -4599,7 +4669,10 @@ describe("refetch", () => { ); } - renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { + wrapper: createMockWrapper({ mocks }), + }); { const { renderedComponents } = await renderStream.takeRender(); @@ -4626,7 +4699,7 @@ describe("refetch", () => { }); } - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); { const { renderedComponents } = await renderStream.takeRender(); @@ -4660,7 +4733,7 @@ describe("refetch", () => { it('handles partial data results after calling `refetch` when errorPolicy is set to "all"', async () => { const { query, mocks: defaultMocks } = setupVariablesCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const mocks = [ ...defaultMocks, { @@ -4697,7 +4770,10 @@ describe("refetch", () => { ); } - renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { + wrapper: createMockWrapper({ mocks }), + }); { const { renderedComponents } = await renderStream.takeRender(); @@ -4724,7 +4800,7 @@ describe("refetch", () => { }); } - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); { const { renderedComponents } = await renderStream.takeRender(); @@ -4769,7 +4845,7 @@ describe("refetch", () => { }; } - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const query: TypedDocumentNode = gql` query TodoItemQuery($id: ID!) { @@ -4834,7 +4910,10 @@ describe("refetch", () => { return null; } - renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { + wrapper: createMockWrapper({ mocks }), + }); { const { renderedComponents } = await renderStream.takeRender(); @@ -4856,7 +4935,7 @@ describe("refetch", () => { }); } - await act(() => user.click(screen.getByText("Retry"))); + await user.click(screen.getByText("Retry")); { const { renderedComponents } = await renderStream.takeRender(); @@ -4899,7 +4978,7 @@ describe("refetch", () => { }; } - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const query: TypedDocumentNode = gql` query TodoItemQuery($id: ID!) { todo(id: $id) { @@ -4964,7 +5043,10 @@ describe("refetch", () => { return null; } - renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { + wrapper: createMockWrapper({ mocks }), + }); { const { renderedComponents } = await renderStream.takeRender(); @@ -4984,7 +5066,7 @@ describe("refetch", () => { }); } - await act(() => user.click(screen.getByText("Retry"))); + await user.click(screen.getByText("Retry")); { const { renderedComponents } = await renderStream.takeRender(); @@ -5018,7 +5100,7 @@ describe("refetch", () => { }; } - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const query: TypedDocumentNode = gql` query TodoItemQuery($id: ID!) { @@ -5084,7 +5166,10 @@ describe("refetch", () => { ); } - renderStream.render(, { wrapper: createMockWrapper({ mocks }) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { + wrapper: createMockWrapper({ mocks }), + }); { const { renderedComponents } = await renderStream.takeRender(); @@ -5105,7 +5190,7 @@ describe("refetch", () => { }); } - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); { // startTransition will avoid rendering the suspense fallback for already @@ -5147,7 +5232,7 @@ describe("refetch", () => { }); it('honors refetchWritePolicy set to "merge"', async () => { - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const query: TypedDocumentNode = gql` @@ -5216,7 +5301,10 @@ describe("refetch", () => { ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { + wrapper: createClientWrapper(client), + }); { const { renderedComponents } = await renderStream.takeRender(); @@ -5235,7 +5323,7 @@ describe("refetch", () => { expect(mergeParams).toEqual([[undefined, [2, 3, 5, 7, 11]]]); } - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); { const { renderedComponents } = await renderStream.takeRender(); @@ -5262,7 +5350,7 @@ describe("refetch", () => { }); it('defaults refetchWritePolicy to "overwrite"', async () => { - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const query: TypedDocumentNode = gql` @@ -5330,7 +5418,10 @@ describe("refetch", () => { ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { + wrapper: createClientWrapper(client), + }); { const { renderedComponents } = await renderStream.takeRender(); @@ -5349,7 +5440,7 @@ describe("refetch", () => { expect(mergeParams).toEqual([[undefined, [2, 3, 5, 7, 11]]]); } - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); { const { renderedComponents } = await renderStream.takeRender(); @@ -5385,7 +5476,7 @@ describe("fetchMore", () => { }, }, }); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultTrackedComponents(renderStream); @@ -5408,7 +5499,8 @@ describe("fetchMore", () => { ); } - renderStream.render(, { + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { wrapper: createMockWrapper({ cache, link }), }); @@ -5432,7 +5524,7 @@ describe("fetchMore", () => { }); } - await act(() => user.click(screen.getByText("Fetch more"))); + await user.click(screen.getByText("Fetch more")); { const { renderedComponents } = await renderStream.takeRender(); @@ -5459,7 +5551,7 @@ describe("fetchMore", () => { it("properly uses `updateQuery` when calling `fetchMore`", async () => { const { query, link } = setupPaginatedCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultTrackedComponents(renderStream); @@ -5489,7 +5581,10 @@ describe("fetchMore", () => { ); } - renderStream.render(, { wrapper: createMockWrapper({ link }) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { + wrapper: createMockWrapper({ link }), + }); { const { renderedComponents } = await renderStream.takeRender(); @@ -5511,7 +5606,7 @@ describe("fetchMore", () => { }); } - await act(() => user.click(screen.getByText("Fetch more"))); + await user.click(screen.getByText("Fetch more")); { const { renderedComponents } = await renderStream.takeRender(); @@ -5541,7 +5636,7 @@ describe("fetchMore", () => { it("properly uses cache field policies when calling `fetchMore` without `updateQuery`", async () => { const { query, link } = setupPaginatedCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultTrackedComponents(renderStream); @@ -5577,7 +5672,10 @@ describe("fetchMore", () => { ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { + wrapper: createClientWrapper(client), + }); { const { renderedComponents } = await renderStream.takeRender(); @@ -5599,7 +5697,7 @@ describe("fetchMore", () => { }); } - await act(() => user.click(screen.getByText("Fetch more"))); + await user.click(screen.getByText("Fetch more")); { const { renderedComponents } = await renderStream.takeRender(); @@ -5643,7 +5741,7 @@ describe("fetchMore", () => { todos: Todo[]; } - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const query: TypedDocumentNode = gql` query TodosQuery($offset: Int!) { @@ -5739,7 +5837,10 @@ describe("fetchMore", () => { ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { + wrapper: createClientWrapper(client), + }); { const { renderedComponents } = await renderStream.takeRender(); @@ -5769,7 +5870,7 @@ describe("fetchMore", () => { }); } - await act(() => user.click(screen.getByText("Load more"))); + await user.click(screen.getByText("Load more")); { // startTransition will avoid rendering the suspense fallback for already @@ -5850,7 +5951,7 @@ describe("fetchMore", () => { interface Data { todos: Todo[]; } - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const query: TypedDocumentNode = gql` query TodosQuery($offset: Int!) { @@ -5952,7 +6053,10 @@ describe("fetchMore", () => { ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { + wrapper: createClientWrapper(client), + }); { const { renderedComponents } = await renderStream.takeRender(); @@ -5982,7 +6086,7 @@ describe("fetchMore", () => { }); } - await act(() => user.click(screen.getByText("Load more"))); + await user.click(screen.getByText("Load more")); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -6107,7 +6211,10 @@ describe("fetchMore", () => { ); } - renderStream.render(, { wrapper: createClientWrapper(client) }); + using _disabledAct = disableActEnvironment(); + await renderStream.render(, { + wrapper: createClientWrapper(client), + }); { const { renderedComponents } = await renderStream.takeRender(); From 670eafe88ce2d95a2f7c8254fe70a6ff874ee6a1 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Wed, 27 Nov 2024 16:08:37 +0100 Subject: [PATCH 15/58] useQuery --- src/react/hooks/__tests__/useQuery.test.tsx | 334 +++++++++++--------- 1 file changed, 192 insertions(+), 142 deletions(-) diff --git a/src/react/hooks/__tests__/useQuery.test.tsx b/src/react/hooks/__tests__/useQuery.test.tsx index 09e48b99a6e..daf4fbdad45 100644 --- a/src/react/hooks/__tests__/useQuery.test.tsx +++ b/src/react/hooks/__tests__/useQuery.test.tsx @@ -43,6 +43,7 @@ import { InvariantError } from "../../../utilities/globals"; import { createRenderStream, renderHookToSnapshotStream, + disableActEnvironment, } from "@testing-library/react-render-stream"; const IS_REACT_17 = React.version.startsWith("17"); @@ -792,7 +793,8 @@ describe("useQuery Hook", () => { link, cache: new InMemoryCache(), }); - const { takeSnapshot, rerender } = renderHookToSnapshotStream( + using _disabledAct = disableActEnvironment(); + const { takeSnapshot, rerender } = await renderHookToSnapshotStream( () => [useQuery(query1, { fetchPolicy: "no-cache" }), useQuery(query2)], { wrapper: ({ children }) => ( @@ -1697,7 +1699,8 @@ describe("useQuery Hook", () => { ]; const cache = new InMemoryCache(); - const { takeSnapshot, rerender } = renderHookToSnapshotStream( + using _disabledAct = disableActEnvironment(); + const { takeSnapshot, rerender } = await renderHookToSnapshotStream( ({ skip }: { skip?: boolean }) => useQuery(query, { pollInterval: 10, skip }), { @@ -1829,7 +1832,8 @@ describe("useQuery Hook", () => { ); - const { takeSnapshot, unmount } = renderHookToSnapshotStream( + using _disabledAct = disableActEnvironment(); + const { takeSnapshot, unmount } = await renderHookToSnapshotStream( () => useQuery(query, { pollInterval: 20 }), { wrapper } ); @@ -1911,7 +1915,8 @@ describe("useQuery Hook", () => { cache, }); - const { takeSnapshot, unmount } = renderHookToSnapshotStream( + using _disabledAct = disableActEnvironment(); + const { takeSnapshot, unmount } = await renderHookToSnapshotStream( () => useQuery(query, { pollInterval: 10, @@ -2067,7 +2072,8 @@ describe("useQuery Hook", () => { const client = new ApolloClient({ link, cache }); - const { takeSnapshot, unmount } = renderHookToSnapshotStream( + using _disabledAct = disableActEnvironment(); + const { takeSnapshot, unmount } = await renderHookToSnapshotStream( () => useQuery(query, { pollInterval: 10, @@ -3549,10 +3555,12 @@ describe("useQuery Hook", () => { ); - const { takeSnapshot, getCurrentSnapshot } = renderHookToSnapshotStream( - () => useQuery(query, { notifyOnNetworkStatusChange: true }), - { wrapper } - ); + using _disabledAct = disableActEnvironment(); + const { takeSnapshot, getCurrentSnapshot } = + await renderHookToSnapshotStream( + () => useQuery(query, { notifyOnNetworkStatusChange: true }), + { wrapper } + ); { const result = await takeSnapshot(); @@ -3692,10 +3700,12 @@ describe("useQuery Hook", () => { ); - const { takeSnapshot, getCurrentSnapshot } = renderHookToSnapshotStream( - () => useQuery(query, { notifyOnNetworkStatusChange: true }), - { wrapper } - ); + using _disabledAct = disableActEnvironment(); + const { takeSnapshot, getCurrentSnapshot } = + await renderHookToSnapshotStream( + () => useQuery(query, { notifyOnNetworkStatusChange: true }), + { wrapper } + ); { const result = await takeSnapshot(); @@ -4082,15 +4092,20 @@ describe("useQuery Hook", () => { const client = new ApolloClient({ cache: new InMemoryCache(), link }); - const { takeSnapshot, getCurrentSnapshot } = renderHookToSnapshotStream( - () => - useQuery(query, { fetchPolicy: "no-cache", variables: { limit: 2 } }), - { - wrapper: ({ children }) => ( - {children} - ), - } - ); + using _disabledAct = disableActEnvironment(); + const { takeSnapshot, getCurrentSnapshot } = + await renderHookToSnapshotStream( + () => + useQuery(query, { + fetchPolicy: "no-cache", + variables: { limit: 2 }, + }), + { + wrapper: ({ children }) => ( + {children} + ), + } + ); // loading await takeSnapshot(); @@ -4119,19 +4134,21 @@ describe("useQuery Hook", () => { const client = new ApolloClient({ cache: new InMemoryCache(), link }); - const { takeSnapshot, getCurrentSnapshot } = renderHookToSnapshotStream( - () => - useQuery(query, { - notifyOnNetworkStatusChange: true, - fetchPolicy: "no-cache", - variables: { limit: 2 }, - }), - { - wrapper: ({ children }) => ( - {children} - ), - } - ); + using _disabledAct = disableActEnvironment(); + const { takeSnapshot, getCurrentSnapshot } = + await renderHookToSnapshotStream( + () => + useQuery(query, { + notifyOnNetworkStatusChange: true, + fetchPolicy: "no-cache", + variables: { limit: 2 }, + }), + { + wrapper: ({ children }) => ( + {children} + ), + } + ); { const { loading, networkStatus, data } = await takeSnapshot(); @@ -4280,15 +4297,20 @@ describe("useQuery Hook", () => { const client = new ApolloClient({ cache: new InMemoryCache(), link }); - const { takeSnapshot, getCurrentSnapshot } = renderHookToSnapshotStream( - () => - useQuery(query, { fetchPolicy: "no-cache", variables: { limit: 2 } }), - { - wrapper: ({ children }) => ( - {children} - ), - } - ); + using _disabledAct = disableActEnvironment(); + const { takeSnapshot, getCurrentSnapshot } = + await renderHookToSnapshotStream( + () => + useQuery(query, { + fetchPolicy: "no-cache", + variables: { limit: 2 }, + }), + { + wrapper: ({ children }) => ( + {children} + ), + } + ); // loading await takeSnapshot(); @@ -4321,15 +4343,20 @@ describe("useQuery Hook", () => { const client = new ApolloClient({ cache: new InMemoryCache(), link }); - const { takeSnapshot, getCurrentSnapshot } = renderHookToSnapshotStream( - () => - useQuery(query, { fetchPolicy: "no-cache", variables: { limit: 2 } }), - { - wrapper: ({ children }) => ( - {children} - ), - } - ); + using _disabledAct = disableActEnvironment(); + const { takeSnapshot, getCurrentSnapshot } = + await renderHookToSnapshotStream( + () => + useQuery(query, { + fetchPolicy: "no-cache", + variables: { limit: 2 }, + }), + { + wrapper: ({ children }) => ( + {children} + ), + } + ); // initial loading await takeSnapshot(); @@ -4487,6 +4514,7 @@ describe("useQuery Hook", () => { } `; + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { useQueryResult: null as QueryResult | null, @@ -4546,7 +4574,7 @@ describe("useQuery Hook", () => { ); } - renderStream.render(, { + await renderStream.render(, { wrapper: ({ children }) => ( {children} ), @@ -4746,6 +4774,7 @@ describe("useQuery Hook", () => { } `; + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { useQueryResult: null as QueryResult | null, @@ -4797,7 +4826,7 @@ describe("useQuery Hook", () => { return ; } - renderStream.render(, { + await renderStream.render(, { wrapper: ({ children }) => ( {children} ), @@ -4968,6 +4997,7 @@ describe("useQuery Hook", () => { } `; + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { useQueryResult: null as QueryResult | null, @@ -5019,7 +5049,7 @@ describe("useQuery Hook", () => { return ; } - renderStream.render(, { + await renderStream.render(, { wrapper: ({ children }) => ( {children} ), @@ -5127,6 +5157,7 @@ describe("useQuery Hook", () => { } `; + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { useQueryResult: null as QueryResult | null, @@ -5177,7 +5208,7 @@ describe("useQuery Hook", () => { return null; } - renderStream.render(, { + await renderStream.render(, { wrapper: ({ children }) => ( {children} ), @@ -5246,6 +5277,7 @@ describe("useQuery Hook", () => { const user = userEvent.setup(); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { useQueryResult: null as QueryResult | null, @@ -5336,7 +5368,7 @@ describe("useQuery Hook", () => { return ; } - renderStream.render(, { + await renderStream.render(, { wrapper: ({ children }) => ( {children} ), @@ -5449,14 +5481,16 @@ describe("useQuery Hook", () => { ); - const { takeSnapshot, getCurrentSnapshot } = renderHookToSnapshotStream( - () => - useQuery(query, { - variables: { id: 1 }, - notifyOnNetworkStatusChange: true, - }), - { wrapper } - ); + using _disabledAct = disableActEnvironment(); + const { takeSnapshot, getCurrentSnapshot } = + await renderHookToSnapshotStream( + () => + useQuery(query, { + variables: { id: 1 }, + notifyOnNetworkStatusChange: true, + }), + { wrapper } + ); { const result = await takeSnapshot(); expect(result.loading).toBe(true); @@ -5505,19 +5539,21 @@ describe("useQuery Hook", () => { const cache = new InMemoryCache(); - const { takeSnapshot, getCurrentSnapshot } = renderHookToSnapshotStream( - () => - useQuery(query, { - notifyOnNetworkStatusChange: true, - }), - { - wrapper: ({ children }) => ( - - {children} - - ), - } - ); + using _disabledAct = disableActEnvironment(); + const { takeSnapshot, getCurrentSnapshot } = + await renderHookToSnapshotStream( + () => + useQuery(query, { + notifyOnNetworkStatusChange: true, + }), + { + wrapper: ({ children }) => ( + + {children} + + ), + } + ); { const result = await takeSnapshot(); @@ -5814,15 +5850,17 @@ describe("useQuery Hook", () => { {children} ); - const { takeSnapshot, getCurrentSnapshot } = renderHookToSnapshotStream( - () => - useQuery(query, { - variables: { min: 0, max: 12 }, - notifyOnNetworkStatusChange: true, - // Intentionally not passing refetchWritePolicy. - }), - { wrapper } - ); + using _disabledAct = disableActEnvironment(); + const { takeSnapshot, getCurrentSnapshot } = + await renderHookToSnapshotStream( + () => + useQuery(query, { + variables: { min: 0, max: 12 }, + notifyOnNetworkStatusChange: true, + // Intentionally not passing refetchWritePolicy. + }), + { wrapper } + ); { const result = await takeSnapshot(); @@ -6314,7 +6352,8 @@ describe("useQuery Hook", () => { const cache = new InMemoryCache(); const onCompleted = jest.fn(); - const { takeSnapshot } = renderHookToSnapshotStream( + using _disabledAct = disableActEnvironment(); + const { takeSnapshot } = await renderHookToSnapshotStream( () => useQuery(query, { onCompleted, @@ -6609,45 +6648,47 @@ describe("useQuery Hook", () => { ); const onError = jest.fn(); - const { takeSnapshot, getCurrentSnapshot } = renderHookToSnapshotStream( - () => ({ - mutation: useMutation(mutation, { - optimisticResponse: { addCar: carData }, - update(cache, { data }) { - cache.modify({ - fields: { - cars(existing, { readField }) { - const newCarRef = cache.writeFragment({ - data: data!.addCar, - fragment: gql` - fragment NewCar on Car { - id - make - model - } - `, - }); - - if ( - existing.some( - (ref: Reference) => - readField("id", ref) === data!.addCar.id - ) - ) { - return existing; - } - - return [...existing, newCarRef]; + using _disabledAct = disableActEnvironment(); + const { takeSnapshot, getCurrentSnapshot } = + await renderHookToSnapshotStream( + () => ({ + mutation: useMutation(mutation, { + optimisticResponse: { addCar: carData }, + update(cache, { data }) { + cache.modify({ + fields: { + cars(existing, { readField }) { + const newCarRef = cache.writeFragment({ + data: data!.addCar, + fragment: gql` + fragment NewCar on Car { + id + make + model + } + `, + }); + + if ( + existing.some( + (ref: Reference) => + readField("id", ref) === data!.addCar.id + ) + ) { + return existing; + } + + return [...existing, newCarRef]; + }, }, - }, - }); - }, - onError, + }); + }, + onError, + }), + query: useQuery(query), }), - query: useQuery(query), - }), - { wrapper } - ); + { wrapper } + ); { const { query } = await takeSnapshot(); @@ -6873,7 +6914,8 @@ describe("useQuery Hook", () => { {children} ); - const { takeSnapshot } = renderHookToSnapshotStream( + using _disabledAct = disableActEnvironment(); + const { takeSnapshot } = await renderHookToSnapshotStream( () => useQuery(query, { partialRefetch: true, @@ -7839,7 +7881,8 @@ describe("useQuery Hook", () => { ); - const { takeSnapshot } = renderHookToSnapshotStream( + using _disabledAct = disableActEnvironment(); + const { takeSnapshot } = await renderHookToSnapshotStream( () => useQuery(query, { notifyOnNetworkStatusChange: true }), { wrapper } ); @@ -8299,7 +8342,8 @@ describe("useQuery Hook", () => { ); - const { takeSnapshot, rerender } = renderHookToSnapshotStream( + using _disabledAct = disableActEnvironment(); + const { takeSnapshot, rerender } = await renderHookToSnapshotStream( ({ gender }: { gender: string }) => useQuery(query, { variables: { gender }, @@ -10091,11 +10135,15 @@ describe("useQuery Hook", () => { link, cache: new InMemoryCache(), }); - const { takeSnapshot } = renderHookToSnapshotStream(() => useQuery(query), { - wrapper: ({ children }) => ( - {children} - ), - }); + using _disabledAct = disableActEnvironment(); + const { takeSnapshot } = await renderHookToSnapshotStream( + () => useQuery(query), + { + wrapper: ({ children }) => ( + {children} + ), + } + ); expect(requests).toBe(1); { @@ -10149,14 +10197,16 @@ describe("useQuery Hook", () => { }, ]; - const { takeSnapshot, getCurrentSnapshot } = renderHookToSnapshotStream( - () => useQuery(query, { notifyOnNetworkStatusChange: true }), - { - wrapper: ({ children }) => ( - {children} - ), - } - ); + using _disabledAct = disableActEnvironment(); + const { takeSnapshot, getCurrentSnapshot } = + await renderHookToSnapshotStream( + () => useQuery(query, { notifyOnNetworkStatusChange: true }), + { + wrapper: ({ children }) => ( + {children} + ), + } + ); { const { loading, data, error } = await takeSnapshot(); From 3f1a659d4184421864c136f907985f825808834d Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Thu, 28 Nov 2024 10:54:07 +0100 Subject: [PATCH 16/58] fix up async calls --- .../hooks/__tests__/useSubscription.test.tsx | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/react/hooks/__tests__/useSubscription.test.tsx b/src/react/hooks/__tests__/useSubscription.test.tsx index 773c76a3ee0..6207258240f 100644 --- a/src/react/hooks/__tests__/useSubscription.test.tsx +++ b/src/react/hooks/__tests__/useSubscription.test.tsx @@ -1196,7 +1196,7 @@ followed by new in-flight setup", async () => { }); describe("errorPolicy", () => { - function setup( + async function setup( initialProps: SubscriptionHookOptions<{ totalLikes: number }, {}> ) { const subscription: TypedDocumentNode<{ totalLikes: number }, {}> = gql` @@ -1217,7 +1217,7 @@ followed by new in-flight setup", async () => { ); - const { takeSnapshot } = renderHookToSnapshotStream( + const { takeSnapshot } = await renderHookToSnapshotStream( (options: SubscriptionHookOptions<{ totalLikes: number }, {}>) => useSubscription(subscription, options), { @@ -1254,7 +1254,7 @@ followed by new in-flight setup", async () => { link, graphQlErrorResult, errorBoundaryOnError, - } = setup({ errorPolicy, onError, onData }); + } = await setup({ errorPolicy, onError, onData }); await takeSnapshot(); link.simulateResult(graphQlErrorResult); @@ -1287,7 +1287,7 @@ followed by new in-flight setup", async () => { const onData = jest.fn(); const onError = jest.fn(); const { takeSnapshot, link, graphQlErrorResult, errorBoundaryOnError } = - setup({ errorPolicy: "all", onError, onData }); + await setup({ errorPolicy: "all", onError, onData }); await takeSnapshot(); link.simulateResult(graphQlErrorResult); @@ -1321,7 +1321,7 @@ followed by new in-flight setup", async () => { const onData = jest.fn(); const onError = jest.fn(); const { takeSnapshot, link, graphQlErrorResult, errorBoundaryOnError } = - setup({ + await setup({ errorPolicy: "ignore", onError, onData, @@ -1366,7 +1366,7 @@ followed by new in-flight setup", async () => { link, protocolErrorResult, errorBoundaryOnError, - } = setup({ errorPolicy, onError, onData }); + } = await setup({ errorPolicy, onError, onData }); await takeSnapshot(); link.simulateResult(protocolErrorResult); @@ -1400,7 +1400,7 @@ followed by new in-flight setup", async () => { }); describe("`restart` callback", () => { - function setup( + async function setup( initialProps: SubscriptionHookOptions< { totalLikes: number }, { id: string } @@ -1424,7 +1424,7 @@ describe("`restart` callback", () => { cache: new Cache(), }); const { takeSnapshot, getCurrentSnapshot, rerender } = - renderHookToSnapshotStream( + await renderHookToSnapshotStream( ( options: SubscriptionHookOptions< { totalLikes: number }, @@ -1455,7 +1455,7 @@ describe("`restart` callback", () => { getCurrentSnapshot, onSubscribe, onUnsubscribe, - } = setup({ + } = await setup({ variables: { id: "1" }, }); @@ -1519,7 +1519,7 @@ describe("`restart` callback", () => { onSubscribe, onUnsubscribe, rerender, - } = setup({ + } = await setup({ variables: { id: "1" }, }); { @@ -1616,7 +1616,7 @@ describe("`restart` callback", () => { getCurrentSnapshot, onSubscribe, onUnsubscribe, - } = setup({ + } = await setup({ variables: { id: "1" }, }); { @@ -1678,7 +1678,7 @@ describe("`restart` callback", () => { getCurrentSnapshot, onSubscribe, onUnsubscribe, - } = setup({ + } = await setup({ variables: { id: "1" }, }); { @@ -1738,7 +1738,7 @@ describe("`restart` callback", () => { }); it("will not restart a subscription that has been `skip`ped", async () => { const { takeSnapshot, getCurrentSnapshot, onSubscribe, onUnsubscribe } = - setup({ + await setup({ variables: { id: "1" }, skip: true, }); @@ -1790,7 +1790,7 @@ describe("ignoreResults", () => { const onComplete = jest.fn( (() => {}) as SubscriptionHookOptions["onComplete"] ); - const { takeSnapshot } = renderHookToSnapshotStream( + const { takeSnapshot } = await renderHookToSnapshotStream( () => useSubscription(subscription, { ignoreResults: true, @@ -1863,7 +1863,7 @@ describe("ignoreResults", () => { const onComplete = jest.fn( (() => {}) as SubscriptionHookOptions["onComplete"] ); - const { takeSnapshot } = renderHookToSnapshotStream( + const { takeSnapshot } = await renderHookToSnapshotStream( () => useSubscription(subscription, { ignoreResults: true, @@ -1928,7 +1928,7 @@ describe("ignoreResults", () => { }); const onData = jest.fn((() => {}) as SubscriptionHookOptions["onData"]); - const { takeSnapshot, rerender } = renderHookToSnapshotStream( + const { takeSnapshot, rerender } = await renderHookToSnapshotStream( ({ ignoreResults }: { ignoreResults: boolean }) => useSubscription(subscription, { ignoreResults, @@ -1998,7 +1998,7 @@ describe("ignoreResults", () => { }); const onData = jest.fn((() => {}) as SubscriptionHookOptions["onData"]); - const { takeSnapshot, rerender } = renderHookToSnapshotStream( + const { takeSnapshot, rerender } = await renderHookToSnapshotStream( ({ ignoreResults }: { ignoreResults: boolean }) => useSubscription(subscription, { ignoreResults, From bcf52dffafbef70c99e1bb200d30817ad78fe517 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Thu, 28 Nov 2024 13:43:56 +0100 Subject: [PATCH 17/58] disable act environment for all render stream tests --- .eslintrc | 3 +- eslint-local-rules/index.js | 2 + .../require-disable-act-environment.test.ts | 86 +++++++++++++++++++ .../require-disable-act-environment.ts | 85 ++++++++++++++++++ .../__tests__/client/Query.test.tsx | 6 +- .../__tests__/client/Subscription.test.tsx | 9 +- .../hoc/__tests__/queries/lifecycle.test.tsx | 3 +- .../hoc/__tests__/queries/loading.test.tsx | 6 +- .../hooks/__tests__/useFragment.test.tsx | 8 ++ .../hooks/__tests__/useLazyQuery.test.tsx | 16 +++- .../hooks/__tests__/useLoadableQuery.test.tsx | 46 ++++++++++ .../hooks/__tests__/useMutation.test.tsx | 6 +- .../__tests__/useQueryRefHandlers.test.tsx | 18 ++++ .../hooks/__tests__/useSubscription.test.tsx | 18 +++- .../__tests__/createQueryPreloader.test.tsx | 22 +++++ .../__tests__/createTestSchema.test.tsx | 11 +++ 16 files changed, 337 insertions(+), 8 deletions(-) create mode 100644 eslint-local-rules/require-disable-act-environment.test.ts create mode 100644 eslint-local-rules/require-disable-act-environment.ts diff --git a/.eslintrc b/.eslintrc index e8abca31af1..74ac0df1a68 100644 --- a/.eslintrc +++ b/.eslintrc @@ -89,7 +89,8 @@ "rules": { "testing-library/prefer-user-event": "error", "testing-library/no-wait-for-multiple-assertions": "off", - "local-rules/require-using-disposable": "error" + "local-rules/require-using-disposable": "error", + "local-rules/require-disable-act-environment": "error" } } ], diff --git a/eslint-local-rules/index.js b/eslint-local-rules/index.js index 7261c8ccc40..b54f8940986 100644 --- a/eslint-local-rules/index.js +++ b/eslint-local-rules/index.js @@ -11,4 +11,6 @@ require("ts-node").register({ module.exports = { "require-using-disposable": require("./require-using-disposable").rule, + "require-disable-act-environment": + require("./require-disable-act-environment").rule, }; diff --git a/eslint-local-rules/require-disable-act-environment.test.ts b/eslint-local-rules/require-disable-act-environment.test.ts new file mode 100644 index 00000000000..6ec62c5abfb --- /dev/null +++ b/eslint-local-rules/require-disable-act-environment.test.ts @@ -0,0 +1,86 @@ +import { rule } from "./require-disable-act-environment"; +import { ruleTester } from "./testSetup"; + +ruleTester.run("require-disable-act-environment", rule, { + valid: [ + ` + () => { + using _disabledAct = disableActEnvironment(); + const { takeRender } = someCall() + const {} = takeRender() + } + `, + ` + () => { + using _disabledAct = disableActEnvironment(); + const {} = renderStream.takeRender() + } + `, + ` + () => { + using _disabledAct = disableActEnvironment(); + const { takeSnapshot } = someCall() + const {} = takeSnapshot() + } + `, + ` + () => { + using _disabledAct = disableActEnvironment(); + const {} = renderStream.takeSnapshot() + } + `, + ], + invalid: [ + ` + using _disabledAct = disableActEnvironment(); + () => { + const { takeRender } = someCall() + takeRender() + } + `, + ` + using _disabledAct = disableActEnvironment(); + () => { + renderStream.takeRender() + } + `, + ` + using _disabledAct = disableActEnvironment(); + () => { + const { takeSnapshot } = someCall() + takeSnapshot() + } + `, + ` + using _disabledAct = disableActEnvironment(); + () => { + renderStream.takeSnapshot() + } + `, + ` + () => { + const { takeRender } = someCall() + takeRender() + } + `, + ` + () => { + renderStream.takeRender() + } + `, + ` + () => { + const { takeSnapshot } = someCall() + takeSnapshot() + } + `, + ` + () => { + renderStream.takeSnapshot() + } + `, + ].map((code) => ({ + code, + errors: [{ messageId: "missingDisableActEnvironment" }], + })), +}); diff --git a/eslint-local-rules/require-disable-act-environment.ts b/eslint-local-rules/require-disable-act-environment.ts new file mode 100644 index 00000000000..ca292fcf33e --- /dev/null +++ b/eslint-local-rules/require-disable-act-environment.ts @@ -0,0 +1,85 @@ +import { ESLintUtils, ASTUtils } from "@typescript-eslint/utils"; +import type { TSESTree as AST } from "@typescript-eslint/types"; + +type Fn = + | AST.FunctionDeclaration + | AST.ArrowFunctionExpression + | AST.FunctionExpression; + +export const rule = ESLintUtils.RuleCreator.withoutDocs({ + create(context) { + const functionsWithRenderStreamCall = new WeakMap(); + const functionsWithDisabledActEnvironment = new WeakSet(); + function FunctionExitCheck(fnNode: Fn) { + const callNode = functionsWithRenderStreamCall.get(fnNode); + if (callNode) { + if (!functionsWithDisabledActEnvironment.has(fnNode)) { + context.report({ + messageId: "missingDisableActEnvironment", + node: callNode, + }); + } + } + functionsWithDisabledActEnvironment.delete(fnNode); + functionsWithRenderStreamCall.delete(fnNode); + } + + return { + CallExpression(node) { + const directCallee = + node.callee.type === "Identifier" ? node.callee + : node.callee.type === "MemberExpression" ? node.callee.property + : null; + + if ( + directCallee?.type === "Identifier" && + (directCallee.name === "takeRender" || + directCallee.name === "takeSnapshot") + ) { + const parentFunction = findParentFunction(node); + if ( + parentFunction && + !functionsWithRenderStreamCall.has(parentFunction) + ) { + functionsWithRenderStreamCall.set(parentFunction, node); + } + } + + if ( + directCallee?.type === "Identifier" && + directCallee.name === "disableActEnvironment" + ) { + const parentFunction = findParentFunction(node); + if (parentFunction) { + functionsWithDisabledActEnvironment.add(parentFunction); + } + } + }, + "ArrowFunctionExpression:exit": FunctionExitCheck, + "FunctionExpression:exit": FunctionExitCheck, + "FunctionDeclaration:exit": FunctionExitCheck, + }; + }, + meta: { + messages: { + missingDisableActEnvironment: + "Tests using a render stream should call `disableActEnvironment`.", + }, + type: "problem", + schema: [], + }, + defaultOptions: [], +}); + +function findParentFunction(node: AST.Node): Fn | undefined { + let parentFunction: AST.Node | undefined = node; + while ( + parentFunction != null && + parentFunction.type !== "FunctionDeclaration" && + parentFunction.type !== "FunctionExpression" && + parentFunction.type !== "ArrowFunctionExpression" + ) { + parentFunction = parentFunction.parent; + } + return parentFunction; +} diff --git a/src/react/components/__tests__/client/Query.test.tsx b/src/react/components/__tests__/client/Query.test.tsx index 3d179dc037f..0087a406ec0 100644 --- a/src/react/components/__tests__/client/Query.test.tsx +++ b/src/react/components/__tests__/client/Query.test.tsx @@ -11,7 +11,10 @@ import { ApolloProvider } from "../../../context"; import { itAsync, MockedProvider, mockSingleLink } from "../../../../testing"; import { Query } from "../../Query"; import { QueryResult } from "../../../types/types"; -import { renderToRenderStream } from "@testing-library/react-render-stream"; +import { + disableActEnvironment, + renderToRenderStream, +} from "@testing-library/react-render-stream"; const allPeopleQuery: DocumentNode = gql` query people { @@ -1500,6 +1503,7 @@ describe("Query component", () => { ); } + using _disabledAct = disableActEnvironment(); const { takeRender, replaceSnapshot } = renderToRenderStream( diff --git a/src/react/components/__tests__/client/Subscription.test.tsx b/src/react/components/__tests__/client/Subscription.test.tsx index cc95def897b..df2c85d0f92 100644 --- a/src/react/components/__tests__/client/Subscription.test.tsx +++ b/src/react/components/__tests__/client/Subscription.test.tsx @@ -9,7 +9,10 @@ import { ApolloLink, DocumentNode, Operation } from "../../../../link/core"; import { itAsync, MockSubscriptionLink } from "../../../../testing"; import { Subscription } from "../../Subscription"; import { spyOnConsole } from "../../../../testing/internal"; -import { renderToRenderStream } from "@testing-library/react-render-stream"; +import { + disableActEnvironment, + renderToRenderStream, +} from "@testing-library/react-render-stream"; const results = [ "Luke Skywalker", @@ -435,6 +438,7 @@ describe("should update", () => { ); } + using _disabledAct = disableActEnvironment(); const { takeRender, replaceSnapshot, renderResultPromise } = renderToRenderStream( @@ -531,6 +535,8 @@ describe("should update", () => { ); } + + using _disabledAct = disableActEnvironment(); const { takeRender, replaceSnapshot, renderResultPromise } = renderToRenderStream(, { wrapper: ({ children }) => ( @@ -624,6 +630,7 @@ describe("should update", () => { ); } + using _disabledAct = disableActEnvironment(); const { takeRender, renderResultPromise, replaceSnapshot } = renderToRenderStream(, { wrapper: ({ children }) => ( diff --git a/src/react/hoc/__tests__/queries/lifecycle.test.tsx b/src/react/hoc/__tests__/queries/lifecycle.test.tsx index 5fcf588c856..284c62dd90c 100644 --- a/src/react/hoc/__tests__/queries/lifecycle.test.tsx +++ b/src/react/hoc/__tests__/queries/lifecycle.test.tsx @@ -10,7 +10,7 @@ import { mockSingleLink } from "../../../../testing"; import { Query as QueryComponent } from "../../../components"; import { graphql } from "../../graphql"; import { ChildProps, DataValue } from "../../types"; -import { renderToRenderStream } from "@testing-library/react-render-stream"; +import { disableActEnvironment, renderToRenderStream } from "@testing-library/react-render-stream"; describe("[queries] lifecycle", () => { // lifecycle @@ -58,6 +58,7 @@ describe("[queries] lifecycle", () => { } ); + using _disabledAct = disableActEnvironment(); const { takeRender, replaceSnapshot, renderResultPromise } = renderToRenderStream>(, { wrapper: ({ children }) => ( diff --git a/src/react/hoc/__tests__/queries/loading.test.tsx b/src/react/hoc/__tests__/queries/loading.test.tsx index 5054d9ebb52..d9bbc68d777 100644 --- a/src/react/hoc/__tests__/queries/loading.test.tsx +++ b/src/react/hoc/__tests__/queries/loading.test.tsx @@ -13,7 +13,10 @@ import { InMemoryCache as Cache } from "../../../../cache"; import { itAsync, mockSingleLink } from "../../../../testing"; import { graphql } from "../../graphql"; import { ChildProps, DataValue } from "../../types"; -import { createRenderStream } from "@testing-library/react-render-stream"; +import { + createRenderStream, + disableActEnvironment, +} from "@testing-library/react-render-stream"; describe("[queries] loading", () => { // networkStatus / loading @@ -417,6 +420,7 @@ describe("[queries] loading", () => { {children} ); + using _disabledAct = disableActEnvironment(); const { takeRender, replaceSnapshot, render } = createRenderStream< DataValue<{ allPeople: { diff --git a/src/react/hooks/__tests__/useFragment.test.tsx b/src/react/hooks/__tests__/useFragment.test.tsx index e9ed03c6d63..3dbce16c20b 100644 --- a/src/react/hooks/__tests__/useFragment.test.tsx +++ b/src/react/hooks/__tests__/useFragment.test.tsx @@ -31,6 +31,7 @@ import assert from "assert"; import { expectTypeOf } from "expect-type"; import { SubscriptionObserver } from "zen-observable-ts"; import { + disableActEnvironment, renderHookToSnapshotStream, renderToRenderStream, } from "@testing-library/react-render-stream"; @@ -1425,6 +1426,7 @@ describe("useFragment", () => { data: { __typename: "User", id: 2, name: "Charlie" }, }); + using _disabledAct = disableActEnvironment(); const { takeSnapshot, rerender } = await renderHookToSnapshotStream( ({ id }: { id: number }) => useFragment({ fragment, from: { __typename: "User", id } }), @@ -1489,6 +1491,7 @@ describe("useFragment", () => { }, }); + using _disabledAct = disableActEnvironment(); const { takeSnapshot } = await renderHookToSnapshotStream( () => useFragment({ fragment, from: { __typename: "Post", id: 1 } }), { @@ -1560,6 +1563,7 @@ describe("useFragment", () => { }, }); + using _disabledAct = disableActEnvironment(); const { takeSnapshot } = await renderHookToSnapshotStream( () => useFragment({ @@ -1736,6 +1740,7 @@ describe("useFragment", () => { using _ = spyOnConsole("warn"); const cache = new InMemoryCache(); + using _disabledAct = disableActEnvironment(); const { takeSnapshot } = await renderHookToSnapshotStream( () => useFragment({ @@ -1801,6 +1806,7 @@ describe("has the same timing as `useQuery`", () => { return complete ? JSON.stringify(fragmentData) : "loading"; } + using _disabledAct = disableActEnvironment(); const { takeRender, replaceSnapshot } = renderToRenderStream( , { @@ -1882,6 +1888,7 @@ describe("has the same timing as `useQuery`", () => { return <>{JSON.stringify({ item: data })}; } + using _disabledAct = disableActEnvironment(); const { takeRender } = renderToRenderStream(, { snapshotDOM: true, onRender() { @@ -1973,6 +1980,7 @@ describe("has the same timing as `useQuery`", () => { return <>{JSON.stringify(data)}; } + using _disabledAct = disableActEnvironment(); const { takeRender } = renderToRenderStream(, { onRender() { const parent = screen.getByTestId("parent"); diff --git a/src/react/hooks/__tests__/useLazyQuery.test.tsx b/src/react/hooks/__tests__/useLazyQuery.test.tsx index 5fe701aa3b9..0ffddc3a675 100644 --- a/src/react/hooks/__tests__/useLazyQuery.test.tsx +++ b/src/react/hooks/__tests__/useLazyQuery.test.tsx @@ -25,7 +25,10 @@ import { import { useLazyQuery } from "../useLazyQuery"; import { QueryResult } from "../../types/types"; import { InvariantError } from "../../../utilities/globals"; -import { renderHookToSnapshotStream } from "@testing-library/react-render-stream"; +import { + disableActEnvironment, + renderHookToSnapshotStream, +} from "@testing-library/react-render-stream"; describe("useLazyQuery Hook", () => { const helloQuery: TypedDocumentNode<{ @@ -99,6 +102,7 @@ describe("useLazyQuery Hook", () => { }, ]; + using _disabledAct = disableActEnvironment(); const { takeSnapshot, getCurrentSnapshot } = await renderHookToSnapshotStream(() => useLazyQuery(helloQuery), { wrapper: ({ children }) => ( @@ -137,6 +141,7 @@ describe("useLazyQuery Hook", () => { }, ]; + using _disabledAct = disableActEnvironment(); const { takeSnapshot, getCurrentSnapshot } = await renderHookToSnapshotStream( // skip isn’t actually an option on the types @@ -184,6 +189,7 @@ describe("useLazyQuery Hook", () => { }, ]; + using _disabledAct = disableActEnvironment(); const { takeSnapshot, getCurrentSnapshot } = await renderHookToSnapshotStream( () => @@ -544,6 +550,7 @@ describe("useLazyQuery Hook", () => { ]; const cache = new InMemoryCache(); + using _disabledAct = disableActEnvironment(); const { takeSnapshot, getCurrentSnapshot } = await renderHookToSnapshotStream(() => useLazyQuery(query1), { wrapper: ({ children }) => ( @@ -600,6 +607,7 @@ describe("useLazyQuery Hook", () => { }, ]; + using _disabledAct = disableActEnvironment(); const { takeSnapshot, getCurrentSnapshot } = await renderHookToSnapshotStream( () => @@ -659,6 +667,7 @@ describe("useLazyQuery Hook", () => { }, ]; + using _disabledAct = disableActEnvironment(); const { takeSnapshot, getCurrentSnapshot } = await renderHookToSnapshotStream( () => @@ -732,6 +741,7 @@ describe("useLazyQuery Hook", () => { {children} ); + using _disabledAct = disableActEnvironment(); const { takeSnapshot, getCurrentSnapshot } = await renderHookToSnapshotStream(() => useLazyQuery(helloQuery), { wrapper, @@ -813,6 +823,7 @@ describe("useLazyQuery Hook", () => { }, ]; + using _disabledAct = disableActEnvironment(); const { takeSnapshot, getCurrentSnapshot } = await renderHookToSnapshotStream(() => useLazyQuery(CAR_QUERY_BY_ID), { wrapper: ({ children }) => ( @@ -1088,6 +1099,7 @@ describe("useLazyQuery Hook", () => { }, ]; + using _disabledAct = disableActEnvironment(); const { takeSnapshot, peekSnapshot } = await renderHookToSnapshotStream( () => useLazyQuery(helloQuery), { @@ -1755,6 +1767,7 @@ describe("useLazyQuery Hook", () => { ), }); + using _disabledAct = disableActEnvironment(); const { takeSnapshot, getCurrentSnapshot } = await renderHookToSnapshotStream( () => @@ -1941,6 +1954,7 @@ describe("useLazyQuery Hook", () => { link, cache: new InMemoryCache(), }); + using _disabledAct = disableActEnvironment(); const { takeSnapshot, getCurrentSnapshot } = await renderHookToSnapshotStream(() => useLazyQuery(helloQuery), { wrapper: ({ children }) => ( diff --git a/src/react/hooks/__tests__/useLoadableQuery.test.tsx b/src/react/hooks/__tests__/useLoadableQuery.test.tsx index f87ddb21892..80a2dfef744 100644 --- a/src/react/hooks/__tests__/useLoadableQuery.test.tsx +++ b/src/react/hooks/__tests__/useLoadableQuery.test.tsx @@ -62,6 +62,7 @@ import { RenderStream, RenderWithoutActAsync, createRenderStream, + disableActEnvironment, useTrackRenders, } from "@testing-library/react-render-stream"; const IS_REACT_19 = React.version.startsWith("19"); @@ -266,6 +267,7 @@ async function renderWithClient( it("loads a query and suspends when the load query function is called", async () => { const { query, mocks } = useSimpleQueryCase(); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = @@ -323,6 +325,7 @@ it("loads a query and suspends when the load query function is called", async () it("loads a query with variables and suspends by passing variables to the loadQuery function", async () => { const { query, mocks } = useVariablesQueryCase(); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = @@ -386,6 +389,7 @@ it("tears down the query on unmount", async () => { link: new MockLink(mocks), }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -521,6 +525,7 @@ it("will resubscribe after disposed when mounting useReadQuery", async () => { }, }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -607,6 +612,7 @@ it("auto resubscribes when mounting useReadQuery after naturally disposed by use cache: new InMemoryCache(), }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -707,6 +713,7 @@ it("auto resubscribes when mounting useReadQuery after naturally disposed by use it("changes variables on a query and resuspends when passing new variables to the loadQuery function", async () => { const { query, mocks } = useVariablesQueryCase(); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = @@ -794,6 +801,7 @@ it("resets the `queryRef` to null and disposes of it when calling the `reset` fu link: new MockLink(mocks), }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -882,6 +890,7 @@ it("allows the client to be overridden", async () => { cache: new InMemoryCache(), }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = @@ -950,6 +959,7 @@ it("passes context to the link", async () => { }), }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = @@ -1039,6 +1049,7 @@ it('enables canonical results when canonizeResults is "true"', async () => { link: new MockLink([]), }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = @@ -1128,6 +1139,7 @@ it("can disable canonical results when the cache's canonizeResults setting is tr data: { results }, }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -1194,6 +1206,7 @@ it("returns initial cache data followed by network data when the fetch policy is cache.writeQuery({ query, data: { hello: "from cache" } }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = @@ -1273,6 +1286,7 @@ it("all data is present in the cache, no network request is made", async () => { cache.writeQuery({ query, data: { hello: "from cache" } }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -1344,6 +1358,7 @@ it("partial data is present in the cache so it is ignored and network request is cache.writeQuery({ query, data: { hello: "from cache" } }); } + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -1414,6 +1429,7 @@ it("existing data in the cache is ignored when `fetchPolicy` is 'network-only'", cache.writeQuery({ query, data: { hello: "from cache" } }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -1483,6 +1499,7 @@ it("fetches data from the network but does not update the cache when `fetchPolic cache.writeQuery({ query, data: { hello: "from cache" } }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -1705,6 +1722,7 @@ it('does not suspend deferred queries with data in the cache and using a "cache- }); const client = new ApolloClient({ cache, link }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -1826,6 +1844,7 @@ it("reacts to cache updates", async () => { link: new MockLink(mocks), }); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { result: null as UseReadQueryResult | null, @@ -1911,6 +1930,7 @@ it("applies `errorPolicy` on next fetch when it changes between renders", async }, ]; + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook, ErrorBoundary, ErrorFallback } = createDefaultProfiledComponents(renderStream); @@ -2011,6 +2031,7 @@ it("applies `context` on next fetch when it changes between renders", async () = cache: new InMemoryCache(), }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -2119,6 +2140,7 @@ it("returns canonical results immediately when `canonizeResults` changes from `f cache, }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -2233,6 +2255,7 @@ it("applies changed `refetchWritePolicy` to next fetch when changing between ren cache, }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -2404,6 +2427,7 @@ it("applies `returnPartialData` on next fetch when it changes between renders", cache, }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -2549,6 +2573,7 @@ it("applies updated `fetchPolicy` on next fetch when it changes between renders" cache, }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -2659,6 +2684,7 @@ it("re-suspends when calling `refetch`", async () => { }, ]; + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -2748,6 +2774,7 @@ it("re-suspends when calling `refetch` with new variables", async () => { }, ]; + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -2831,6 +2858,7 @@ it("re-suspends multiple times when calling `refetch` multiple times", async () }, ]; + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = @@ -2943,6 +2971,7 @@ it("throws errors when errors are returned after calling `refetch`", async () => }, ]; + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook, ErrorBoundary, ErrorFallback } = @@ -3024,6 +3053,7 @@ it('ignores errors returned after calling `refetch` when errorPolicy is set to " }, ]; + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook, ErrorBoundary, ErrorFallback } = @@ -3111,6 +3141,7 @@ it('returns errors after calling `refetch` when errorPolicy is set to "all"', as }, ]; + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook, ErrorBoundary, ErrorFallback } = @@ -3200,6 +3231,7 @@ it('handles partial data results after calling `refetch` when errorPolicy is set }, ]; + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook, ErrorBoundary, ErrorFallback } = @@ -3413,6 +3445,7 @@ it("re-suspends when calling `fetchMore` with different variables", async () => }), }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -3494,6 +3527,7 @@ it("re-suspends when calling `fetchMore` with different variables", async () => it("properly uses `updateQuery` when calling `fetchMore`", async () => { const { query, client } = usePaginatedQueryCase(); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -3581,6 +3615,7 @@ it("properly uses `updateQuery` when calling `fetchMore`", async () => { it("properly uses cache field policies when calling `fetchMore` without `updateQuery`", async () => { const { query, link } = usePaginatedQueryCase(); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -3881,6 +3916,7 @@ it('honors refetchWritePolicy set to "merge"', async () => { }, }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -4001,6 +4037,7 @@ it('defaults refetchWritePolicy to "overwrite"', async () => { }, }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -4102,6 +4139,7 @@ it('does not suspend when partial data is in the cache and using a "cache-first" }, ]; + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler>(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -4191,6 +4229,7 @@ it('suspends and does not use partial data from other variables in the cache whe variables: { id: "1" }, }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler>(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -4306,6 +4345,7 @@ it('suspends when partial data is in the cache and using a "network-only" fetch }, ]; + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler>(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -4408,6 +4448,7 @@ it('suspends when partial data is in the cache and using a "no-cache" fetch poli data: { character: { id: "1" } }, }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler>(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -4527,6 +4568,7 @@ it('does not suspend when partial data is in the cache and using a "cache-and-ne data: { character: { id: "1" } }, }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler>(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -4603,6 +4645,7 @@ it('suspends and does not use partial data when changing variables and using a " variables: { id: "1" }, }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler>(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -4726,6 +4769,7 @@ it('does not suspend deferred queries with partial data in the cache and using a const client = new ApolloClient({ link, cache }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler>(); const { SuspenseFallback, ReadQueryHook } = createDefaultProfiledComponents(renderStream); @@ -4956,6 +5000,7 @@ it("can subscribe to subscriptions and react to cache updates via `subscribeToMo const client = new ApolloClient({ link, cache: new InMemoryCache() }); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { subscribeToMore: null as SubscribeToMoreFunction< @@ -5090,6 +5135,7 @@ it("throws when calling `subscribeToMore` before loading the query", async () => const client = new ApolloClient({ link, cache: new InMemoryCache() }); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { subscribeToMore: null as SubscribeToMoreFunction< diff --git a/src/react/hooks/__tests__/useMutation.test.tsx b/src/react/hooks/__tests__/useMutation.test.tsx index 51f33c3991b..4ef71758a8d 100644 --- a/src/react/hooks/__tests__/useMutation.test.tsx +++ b/src/react/hooks/__tests__/useMutation.test.tsx @@ -32,7 +32,10 @@ import { useMutation } from "../useMutation"; import { BatchHttpLink } from "../../../link/batch-http"; import { FetchResult } from "../../../link/core"; import { spyOnConsole } from "../../../testing/internal"; -import { renderHookToSnapshotStream } from "@testing-library/react-render-stream"; +import { + disableActEnvironment, + renderHookToSnapshotStream, +} from "@testing-library/react-render-stream"; describe("useMutation Hook", () => { interface Todo { @@ -751,6 +754,7 @@ describe("useMutation Hook", () => { }, ]; + using _disabledAct = disableActEnvironment(); const { takeSnapshot } = await renderHookToSnapshotStream( () => useMutation< diff --git a/src/react/hooks/__tests__/useQueryRefHandlers.test.tsx b/src/react/hooks/__tests__/useQueryRefHandlers.test.tsx index 557af527ec5..fd2f3fc939b 100644 --- a/src/react/hooks/__tests__/useQueryRefHandlers.test.tsx +++ b/src/react/hooks/__tests__/useQueryRefHandlers.test.tsx @@ -33,6 +33,7 @@ import { useLoadableQuery } from "../useLoadableQuery"; import { concatPagination, getMainDefinition } from "../../../utilities"; import { createRenderStream, + disableActEnvironment, useTrackRenders, } from "@testing-library/react-render-stream"; @@ -44,6 +45,7 @@ test("does not interfere with updates from useReadQuery", async () => { link: new MockLink(mocks), }); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { result: null as UseReadQueryResult | null, @@ -144,6 +146,7 @@ test("refetches and resuspends when calling refetch", async () => { link: new MockLink(mocks), }); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { result: null as UseReadQueryResult | null, @@ -265,6 +268,7 @@ test('honors refetchWritePolicy set to "merge"', async () => { cache, }); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { result: null as UseReadQueryResult | null, @@ -391,6 +395,7 @@ test('honors refetchWritePolicy set to "overwrite"', async () => { cache, }); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { result: null as UseReadQueryResult | null, @@ -514,6 +519,7 @@ test('defaults refetchWritePolicy to "overwrite"', async () => { cache, }); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { result: null as UseReadQueryResult | null, @@ -632,6 +638,7 @@ test("`refetch` works with startTransition", async () => { cache: new InMemoryCache(), }); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { isPending: false, @@ -767,6 +774,7 @@ test("`refetch` works with startTransition from useBackgroundQuery and usePreloa link: new MockLink(mocks), }); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { useBackgroundQueryIsPending: false, @@ -932,6 +940,7 @@ test("refetches from queryRefs produced by useBackgroundQuery", async () => { link: new MockLink(mocks), }); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { result: null as UseReadQueryResult | null, @@ -1019,6 +1028,7 @@ test("refetches from queryRefs produced by useLoadableQuery", async () => { link: new MockLink(mocks), }); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { result: null as UseReadQueryResult | null, @@ -1112,6 +1122,7 @@ test("resuspends when calling `fetchMore`", async () => { }); const preloadQuery = createQueryPreloader(client); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { result: null as UseReadQueryResult | null, @@ -1204,6 +1215,7 @@ test("properly uses `updateQuery` when calling `fetchMore`", async () => { const client = new ApolloClient({ cache: new InMemoryCache(), link }); const preloadQuery = createQueryPreloader(client); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { result: null as UseReadQueryResult | null, @@ -1316,6 +1328,7 @@ test("properly uses cache field policies when calling `fetchMore` without `updat }); const preloadQuery = createQueryPreloader(client); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { result: null as UseReadQueryResult | null, @@ -1419,6 +1432,7 @@ test("paginates from queryRefs produced by useBackgroundQuery", async () => { link, }); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { result: null as UseReadQueryResult | null, @@ -1522,6 +1536,7 @@ test("paginates from queryRefs produced by useLoadableQuery", async () => { link, }); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { result: null as UseReadQueryResult | null, @@ -1634,6 +1649,7 @@ test("`fetchMore` works with startTransition", async () => { }); const preloadQuery = createQueryPreloader(client); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { isPending: false, @@ -1763,6 +1779,7 @@ test("`fetchMore` works with startTransition from useBackgroundQuery and useQuer link, }); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { useBackgroundQueryIsPending: false, @@ -1983,6 +2000,7 @@ test("can subscribe to subscriptions and react to cache updates via `subscribeTo const preloadQuery = createQueryPreloader(client); const queryRef = preloadQuery(query); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { subscribeToMore: null as SubscribeToMoreFunction< diff --git a/src/react/hooks/__tests__/useSubscription.test.tsx b/src/react/hooks/__tests__/useSubscription.test.tsx index 6207258240f..ecb9b448c52 100644 --- a/src/react/hooks/__tests__/useSubscription.test.tsx +++ b/src/react/hooks/__tests__/useSubscription.test.tsx @@ -20,7 +20,10 @@ import { ErrorBoundary } from "react-error-boundary"; import { MockedSubscriptionResult } from "../../../testing/core/mocking/mockSubscriptionLink"; import { GraphQLError } from "graphql"; import { InvariantError } from "ts-invariant"; -import { renderHookToSnapshotStream } from "@testing-library/react-render-stream"; +import { + disableActEnvironment, + renderHookToSnapshotStream, +} from "@testing-library/react-render-stream"; describe("useSubscription Hook", () => { it("should handle a simple subscription properly", async () => { @@ -1249,6 +1252,7 @@ followed by new in-flight setup", async () => { async (errorPolicy) => { const onData = jest.fn(); const onError = jest.fn(); + using _disabledAct = disableActEnvironment(); const { takeSnapshot, link, @@ -1286,6 +1290,7 @@ followed by new in-flight setup", async () => { it("`errorPolicy: 'all'`: returns `{ error, data }`, calls `onError`", async () => { const onData = jest.fn(); const onError = jest.fn(); + using _disabledAct = disableActEnvironment(); const { takeSnapshot, link, graphQlErrorResult, errorBoundaryOnError } = await setup({ errorPolicy: "all", onError, onData }); @@ -1320,6 +1325,7 @@ followed by new in-flight setup", async () => { it("`errorPolicy: 'ignore'`: returns `{ data }`, calls `onData`", async () => { const onData = jest.fn(); const onError = jest.fn(); + using _disabledAct = disableActEnvironment(); const { takeSnapshot, link, graphQlErrorResult, errorBoundaryOnError } = await setup({ errorPolicy: "ignore", @@ -1361,6 +1367,7 @@ followed by new in-flight setup", async () => { async (errorPolicy) => { const onData = jest.fn(); const onError = jest.fn(); + using _disabledAct = disableActEnvironment(); const { takeSnapshot, link, @@ -1449,6 +1456,7 @@ describe("`restart` callback", () => { }; } it("can restart a running subscription", async () => { + using _disabledAct = disableActEnvironment(); const { link, takeSnapshot, @@ -1512,6 +1520,7 @@ describe("`restart` callback", () => { } }); it("will use the most recently passed in options", async () => { + using _disabledAct = disableActEnvironment(); const { link, takeSnapshot, @@ -1610,6 +1619,7 @@ describe("`restart` callback", () => { } }); it("can restart a subscription that has completed", async () => { + using _disabledAct = disableActEnvironment(); const { link, takeSnapshot, @@ -1672,6 +1682,7 @@ describe("`restart` callback", () => { } }); it("can restart a subscription that has errored", async () => { + using _disabledAct = disableActEnvironment(); const { link, takeSnapshot, @@ -1737,6 +1748,7 @@ describe("`restart` callback", () => { } }); it("will not restart a subscription that has been `skip`ped", async () => { + using _disabledAct = disableActEnvironment(); const { takeSnapshot, getCurrentSnapshot, onSubscribe, onUnsubscribe } = await setup({ variables: { id: "1" }, @@ -1790,6 +1802,7 @@ describe("ignoreResults", () => { const onComplete = jest.fn( (() => {}) as SubscriptionHookOptions["onComplete"] ); + using _disabledAct = disableActEnvironment(); const { takeSnapshot } = await renderHookToSnapshotStream( () => useSubscription(subscription, { @@ -1863,6 +1876,7 @@ describe("ignoreResults", () => { const onComplete = jest.fn( (() => {}) as SubscriptionHookOptions["onComplete"] ); + using _disabledAct = disableActEnvironment(); const { takeSnapshot } = await renderHookToSnapshotStream( () => useSubscription(subscription, { @@ -1928,6 +1942,7 @@ describe("ignoreResults", () => { }); const onData = jest.fn((() => {}) as SubscriptionHookOptions["onData"]); + using _disabledAct = disableActEnvironment(); const { takeSnapshot, rerender } = await renderHookToSnapshotStream( ({ ignoreResults }: { ignoreResults: boolean }) => useSubscription(subscription, { @@ -1998,6 +2013,7 @@ describe("ignoreResults", () => { }); const onData = jest.fn((() => {}) as SubscriptionHookOptions["onData"]); + using _disabledAct = disableActEnvironment(); const { takeSnapshot, rerender } = await renderHookToSnapshotStream( ({ ignoreResults }: { ignoreResults: boolean }) => useSubscription(subscription, { diff --git a/src/react/query-preloader/__tests__/createQueryPreloader.test.tsx b/src/react/query-preloader/__tests__/createQueryPreloader.test.tsx index 97b49e07db8..1d8b2ec61e0 100644 --- a/src/react/query-preloader/__tests__/createQueryPreloader.test.tsx +++ b/src/react/query-preloader/__tests__/createQueryPreloader.test.tsx @@ -35,6 +35,7 @@ import { ErrorBoundary } from "react-error-boundary"; import userEvent from "@testing-library/user-event"; import { createRenderStream, + disableActEnvironment, useTrackRenders, } from "@testing-library/react-render-stream"; @@ -110,6 +111,7 @@ test("loads a query and suspends when passed to useReadQuery", async () => { const queryRef = preloadQuery(query); + using _disabledAct = disableActEnvironment(); const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { @@ -138,6 +140,7 @@ test("loads a query with variables and suspends when passed to useReadQuery", as variables: { id: "1" }, }); + using _disabledAct = disableActEnvironment(); const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { @@ -256,6 +259,7 @@ test("useReadQuery auto-resubscribes the query after its disposed", async () => }); }); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { result: null as UseReadQueryResult | null, @@ -449,6 +453,7 @@ test("useReadQuery handles auto-resubscribe with returnPartialData", async () => }); }); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { result: null as UseReadQueryResult> | null, @@ -710,6 +715,7 @@ test("useReadQuery handles auto-resubscribe on network-only fetch policy", async }); }); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { result: null as UseReadQueryResult | null, @@ -891,6 +897,7 @@ test("useReadQuery handles auto-resubscribe on cache-and-network fetch policy", }); }); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { result: null as UseReadQueryResult | null, @@ -1072,6 +1079,7 @@ test("useReadQuery handles auto-resubscribe on no-cache fetch policy", async () }); }); + using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ initialSnapshot: { result: null as UseReadQueryResult | null, @@ -1233,6 +1241,7 @@ test("reacts to cache updates", async () => { const preloadQuery = createQueryPreloader(client); const queryRef = preloadQuery(query); + using _disabledAct = disableActEnvironment(); const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { @@ -1278,6 +1287,7 @@ test("ignores cached result and suspends when `fetchPolicy` is network-only", as fetchPolicy: "network-only", }); + using _disabledAct = disableActEnvironment(); const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { @@ -1307,6 +1317,7 @@ test("does not cache results when `fetchPolicy` is no-cache", async () => { fetchPolicy: "no-cache", }); + using _disabledAct = disableActEnvironment(); const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { @@ -1339,6 +1350,7 @@ test("returns initial cache data followed by network data when `fetchPolicy` is fetchPolicy: "cache-and-network", }); + using _disabledAct = disableActEnvironment(); const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { @@ -1373,6 +1385,7 @@ test("returns cached data when all data is present in the cache", async () => { const preloadQuery = createQueryPreloader(client); const queryRef = preloadQuery(query); + using _disabledAct = disableActEnvironment(); const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { @@ -1417,6 +1430,7 @@ test("suspends and ignores partial data in the cache", async () => { const preloadQuery = createQueryPreloader(client); const queryRef = preloadQuery(query); + using _disabledAct = disableActEnvironment(); const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { @@ -1452,6 +1466,7 @@ test("throws when error is returned", async () => { const preloadQuery = createQueryPreloader(client); const queryRef = preloadQuery(query); + using _disabledAct = disableActEnvironment(); const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { @@ -1483,6 +1498,7 @@ test("returns error when error policy is 'all'", async () => { const preloadQuery = createQueryPreloader(client); const queryRef = preloadQuery(query, { errorPolicy: "all" }); + using _disabledAct = disableActEnvironment(); const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { @@ -1517,6 +1533,7 @@ test("discards error when error policy is 'ignore'", async () => { const preloadQuery = createQueryPreloader(client); const queryRef = preloadQuery(query, { errorPolicy: "ignore" }); + using _disabledAct = disableActEnvironment(); const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { @@ -1567,6 +1584,7 @@ test("passes context to the link", async () => { context: { valueA: "A", valueB: "B" }, }); + using _disabledAct = disableActEnvironment(); const { renderStream } = await renderDefaultTestApp({ client, queryRef }); // initial render @@ -1633,6 +1651,7 @@ test("does not suspend and returns partial data when `returnPartialData` is `tru returnPartialData: true, }); + using _disabledAct = disableActEnvironment(); const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { @@ -1705,6 +1724,7 @@ test('enables canonical results when canonizeResults is "true"', async () => { const preloadQuery = createQueryPreloader(client); const queryRef = preloadQuery(query, { canonizeResults: true }); + using _disabledAct = disableActEnvironment(); const { renderStream } = await renderDefaultTestApp({ client, queryRef }); const { snapshot } = await renderStream.takeRender(); @@ -1763,6 +1783,7 @@ test("can disable canonical results when the cache's canonizeResults setting is const preloadQuery = createQueryPreloader(client); const queryRef = preloadQuery(query, { canonizeResults: false }); + using _disabledAct = disableActEnvironment(); const { renderStream } = await renderDefaultTestApp({ client, queryRef }); const { snapshot } = await renderStream.takeRender(); @@ -1798,6 +1819,7 @@ test("suspends deferred queries until initial chunk loads then rerenders with de const preloadQuery = createQueryPreloader(client); const queryRef = preloadQuery(query); + using _disabledAct = disableActEnvironment(); const { renderStream } = await renderDefaultTestApp({ client, queryRef }); { diff --git a/src/testing/experimental/__tests__/createTestSchema.test.tsx b/src/testing/experimental/__tests__/createTestSchema.test.tsx index 5904e707e65..30521640ce4 100644 --- a/src/testing/experimental/__tests__/createTestSchema.test.tsx +++ b/src/testing/experimental/__tests__/createTestSchema.test.tsx @@ -22,6 +22,7 @@ import { InvariantError } from "ts-invariant"; import { RenderStream, createRenderStream, + disableActEnvironment, } from "@testing-library/react-render-stream"; const typeDefs = /* GraphQL */ ` @@ -169,6 +170,7 @@ describe("schema proxy", () => { }); it("mocks scalars and resolvers", async () => { + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); using _fetch = createSchemaFetch(schema).mockGlobal(); @@ -256,6 +258,7 @@ describe("schema proxy", () => { }, }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); using _fetch = createSchemaFetch(forkedSchema).mockGlobal(); @@ -333,6 +336,7 @@ describe("schema proxy", () => { }); it("schema.fork does not pollute the original schema", async () => { + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); schema.fork({ @@ -435,6 +439,7 @@ describe("schema proxy", () => { }, }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); using _fetch = createSchemaFetch(forkedSchema).mockGlobal(); @@ -551,6 +556,7 @@ describe("schema proxy", () => { }, }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); using _fetch = createSchemaFetch(forkedSchema).mockGlobal(); @@ -686,6 +692,7 @@ describe("schema proxy", () => { }, }); + using _disabledAct = disableActEnvironment(); const renderStream = createErrorProfiler(); const { ErrorBoundary } = createTrackedErrorComponents(renderStream); @@ -761,6 +768,7 @@ describe("schema proxy", () => { // invalid schema const forkedSchema = { foo: "bar" }; + using _disabledAct = disableActEnvironment(); const renderStream = createErrorProfiler(); const { ErrorBoundary } = createTrackedErrorComponents(renderStream); @@ -884,6 +892,7 @@ describe("schema proxy", () => { }, }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); using _fetch = createSchemaFetch(forkedSchema).mockGlobal(); @@ -1025,6 +1034,7 @@ describe("schema proxy", () => { }, }, }); + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); resetTestSchema.add({ @@ -1149,6 +1159,7 @@ describe("schema proxy", () => { }); it("createSchemaFetch respects min and max delay", async () => { + using _disabledAct = disableActEnvironment(); const renderStream = createDefaultProfiler(); const minDelay = 1500; From 852e33e422029c14e65d975b93682dc343fbb967 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Thu, 28 Nov 2024 15:38:22 +0100 Subject: [PATCH 18/58] remove & forbid wrong act calls --- .eslintrc | 3 +- ...id-act-in-disabled-act-environment.test.ts | 56 +++++ .../forbid-act-in-disabled-act-environment.ts | 63 ++++++ eslint-local-rules/index.js | 2 + .../hooks/__tests__/useFragment.test.tsx | 9 +- .../hooks/__tests__/useLoadableQuery.test.tsx | 192 +++++++++--------- .../hooks/__tests__/useMutation.test.tsx | 9 +- src/react/hooks/__tests__/useQuery.test.tsx | 64 +++--- .../__tests__/useQueryRefHandlers.test.tsx | 71 +++---- .../hooks/__tests__/useSuspenseQuery.test.tsx | 18 +- .../__tests__/createQueryPreloader.test.tsx | 89 ++++---- .../__tests__/createTestSchema.test.tsx | 15 +- 12 files changed, 354 insertions(+), 237 deletions(-) create mode 100644 eslint-local-rules/forbid-act-in-disabled-act-environment.test.ts create mode 100644 eslint-local-rules/forbid-act-in-disabled-act-environment.ts diff --git a/.eslintrc b/.eslintrc index 74ac0df1a68..93b6da77d7d 100644 --- a/.eslintrc +++ b/.eslintrc @@ -90,7 +90,8 @@ "testing-library/prefer-user-event": "error", "testing-library/no-wait-for-multiple-assertions": "off", "local-rules/require-using-disposable": "error", - "local-rules/require-disable-act-environment": "error" + "local-rules/require-disable-act-environment": "error", + "local-rules/forbid-act-in-disabled-act-environment": "error" } } ], diff --git a/eslint-local-rules/forbid-act-in-disabled-act-environment.test.ts b/eslint-local-rules/forbid-act-in-disabled-act-environment.test.ts new file mode 100644 index 00000000000..8024e91bcc5 --- /dev/null +++ b/eslint-local-rules/forbid-act-in-disabled-act-environment.test.ts @@ -0,0 +1,56 @@ +import { rule } from "./forbid-act-in-disabled-act-environment"; +import { ruleTester } from "./testSetup"; + +ruleTester.run("forbid-act-in-disabled-act-environment", rule, { + valid: [ + ` + () => { + using _disabledAct = disableActEnvironment(); + } + () => { + act(() => {}) + } + `, + ` + () => { + using _disabledAct = disableActEnvironment(); + } + () => { + actAsync(() => {}) + } + `, + ], + invalid: [ + ` + () => { + using _disabledAct = disableActEnvironment(); + act(() => {}) + } + `, + ` + () => { + using _disabledAct = disableActEnvironment(); + actAsync(() => {}) + } + `, + ` + () => { + using _disabledAct = disableActEnvironment(); + () => { + act(() => {}) + } + } + `, + ` + () => { + using _disabledAct = disableActEnvironment(); + () => { + actAsync(() => {}) + } + } + `, + ].map((code) => ({ + code, + errors: [{ messageId: "forbiddenActInNonActEnvironment" }], + })), +}); diff --git a/eslint-local-rules/forbid-act-in-disabled-act-environment.ts b/eslint-local-rules/forbid-act-in-disabled-act-environment.ts new file mode 100644 index 00000000000..7cbe9edf572 --- /dev/null +++ b/eslint-local-rules/forbid-act-in-disabled-act-environment.ts @@ -0,0 +1,63 @@ +import { ESLintUtils } from "@typescript-eslint/utils"; + +export const rule = ESLintUtils.RuleCreator.withoutDocs({ + create(context) { + let depth = 1; + let disabledDepth: number | false = false; + + function EnterFn() { + depth++; + } + function ExitFn() { + depth--; + if (disabledDepth !== false && disabledDepth > depth) { + disabledDepth = false; + } + } + + return { + CallExpression(node) { + const directCallee = + node.callee.type === "Identifier" ? node.callee + : node.callee.type === "MemberExpression" ? node.callee.property + : null; + + if ( + directCallee?.type === "Identifier" && + directCallee.name === "disableActEnvironment" + ) { + if (disabledDepth === false) { + disabledDepth = depth; + } + } + + if ( + directCallee?.type === "Identifier" && + (directCallee.name === "act" || directCallee.name === "actAsync") + ) { + if (disabledDepth !== false) { + context.report({ + messageId: "forbiddenActInNonActEnvironment", + node: node, + }); + } + } + }, + ArrowFunctionExpression: EnterFn, + FunctionExpression: EnterFn, + FunctionDeclaration: EnterFn, + "ArrowFunctionExpression:exit": ExitFn, + "FunctionExpression:exit": ExitFn, + "FunctionDeclaration:exit": ExitFn, + }; + }, + meta: { + messages: { + forbiddenActInNonActEnvironment: + "`act` should not be called in a `disableActEnvironment`.", + }, + type: "problem", + schema: [], + }, + defaultOptions: [], +}); diff --git a/eslint-local-rules/index.js b/eslint-local-rules/index.js index b54f8940986..34951395d60 100644 --- a/eslint-local-rules/index.js +++ b/eslint-local-rules/index.js @@ -13,4 +13,6 @@ module.exports = { "require-using-disposable": require("./require-using-disposable").rule, "require-disable-act-environment": require("./require-disable-act-environment").rule, + "forbid-act-in-disabled-act-environment": + require("./forbid-act-in-disabled-act-environment").rule, }; diff --git a/src/react/hooks/__tests__/useFragment.test.tsx b/src/react/hooks/__tests__/useFragment.test.tsx index 3dbce16c20b..5d362c5985e 100644 --- a/src/react/hooks/__tests__/useFragment.test.tsx +++ b/src/react/hooks/__tests__/useFragment.test.tsx @@ -2002,12 +2002,9 @@ describe("has the same timing as `useQuery`", () => { expect(withinDOM().queryAllByText(/Item #2/).length).toBe(2); } - act( - () => - void cache.evict({ - id: cache.identify(item2), - }) - ); + cache.evict({ + id: cache.identify(item2), + }); { const { withinDOM } = await takeRender(); diff --git a/src/react/hooks/__tests__/useLoadableQuery.test.tsx b/src/react/hooks/__tests__/useLoadableQuery.test.tsx index 80a2dfef744..c6eace842a9 100644 --- a/src/react/hooks/__tests__/useLoadableQuery.test.tsx +++ b/src/react/hooks/__tests__/useLoadableQuery.test.tsx @@ -64,6 +64,7 @@ import { createRenderStream, disableActEnvironment, useTrackRenders, + userEventWithoutAct, } from "@testing-library/react-render-stream"; const IS_REACT_19 = React.version.startsWith("19"); @@ -230,11 +231,9 @@ function createDefaultProfiledComponents< async function renderWithMocks( ui: React.ReactElement, props: MockedProviderProps, - { render: doRender }: { render: RenderWithoutActAsync } = { - render: renderAsync, - } + { render: doRender }: { render: RenderWithoutActAsync } ) { - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const utils = await doRender(ui, { wrapper: ({ children }) => ( @@ -248,12 +247,10 @@ async function renderWithMocks( async function renderWithClient( ui: React.ReactElement, options: { client: ApolloClient }, - { render: doRender }: { render: RenderWithoutActAsync } = { - render: renderAsync, - } + { render: doRender }: { render: RenderWithoutActAsync } ) { const { client } = options; - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const utils = await doRender(ui, { wrapper: ({ children }: { children: React.ReactNode }) => ( @@ -301,7 +298,7 @@ it("loads a query and suspends when the load query function is called", async () expect(renderedComponents).toStrictEqual([App]); } - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); { const { renderedComponents } = await renderStream.takeRender(); @@ -359,7 +356,7 @@ it("loads a query with variables and suspends by passing variables to the loadQu expect(renderedComponents).toStrictEqual([App]); } - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); { const { renderedComponents } = await renderStream.takeRender(); @@ -419,7 +416,7 @@ it("tears down the query on unmount", async () => { // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); await renderStream.takeRender(); const { snapshot } = await renderStream.takeRender(); @@ -556,7 +553,7 @@ it("will resubscribe after disposed when mounting useReadQuery", async () => { // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); expect(client.getObservableQueries().size).toBe(1); expect(client).toHaveSuspenseCacheEntryUsing(query); @@ -573,7 +570,7 @@ it("will resubscribe after disposed when mounting useReadQuery", async () => { expect(client.getObservableQueries().size).toBe(0); expect(client).not.toHaveSuspenseCacheEntryUsing(query); - await act(() => user.click(screen.getByText("Toggle"))); + await user.click(screen.getByText("Toggle")); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -644,7 +641,7 @@ it("auto resubscribes when mounting useReadQuery after naturally disposed by use // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); expect(client.getObservableQueries().size).toBe(1); expect(client).toHaveSuspenseCacheEntryUsing(query); @@ -665,14 +662,14 @@ it("auto resubscribes when mounting useReadQuery after naturally disposed by use }); } - await act(() => user.click(toggleButton)); + await user.click(toggleButton); await renderStream.takeRender(); await wait(0); expect(client.getObservableQueries().size).toBe(0); expect(client).not.toHaveSuspenseCacheEntryUsing(query); - await act(() => user.click(toggleButton)); + await user.click(toggleButton); expect(client.getObservableQueries().size).toBe(1); // Here we don't expect a suspense cache entry because we previously disposed @@ -752,7 +749,7 @@ it("changes variables on a query and resuspends when passing new variables to th expect(renderedComponents).toStrictEqual([App]); } - await act(() => user.click(screen.getByText("Load 1st character"))); + await user.click(screen.getByText("Load 1st character")); { const { renderedComponents } = await renderStream.takeRender(); @@ -771,7 +768,7 @@ it("changes variables on a query and resuspends when passing new variables to th }); } - await act(() => user.click(screen.getByText("Load 2nd character"))); + await user.click(screen.getByText("Load 2nd character")); { const { renderedComponents } = await renderStream.takeRender(); @@ -836,7 +833,7 @@ it("resets the `queryRef` to null and disposes of it when calling the `reset` fu // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); await renderStream.takeRender(); { @@ -849,7 +846,7 @@ it("resets the `queryRef` to null and disposes of it when calling the `reset` fu }); } - await act(() => user.click(screen.getByText("Reset query"))); + await user.click(screen.getByText("Reset query")); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -923,7 +920,7 @@ it("allows the client to be overridden", async () => { // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); await renderStream.takeRender(); const { snapshot } = await renderStream.takeRender(); @@ -992,7 +989,7 @@ it("passes context to the link", async () => { // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); await renderStream.takeRender(); const { snapshot } = await renderStream.takeRender(); @@ -1082,7 +1079,7 @@ it('enables canonical results when canonizeResults is "true"', async () => { // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); const { snapshot } = await renderStream.takeRender(); const resultSet = new Set(snapshot.result?.data.results); @@ -1171,7 +1168,7 @@ it("can disable canonical results when the cache's canonizeResults setting is tr // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); const { snapshot } = await renderStream.takeRender(); const resultSet = new Set(snapshot.result!.data.results); @@ -1239,7 +1236,7 @@ it("returns initial cache data followed by network data when the fetch policy is // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -1316,7 +1313,7 @@ it("all data is present in the cache, no network request is made", async () => { // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -1388,7 +1385,7 @@ it("partial data is present in the cache so it is ignored and network request is // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); { const { renderedComponents } = await renderStream.takeRender(); @@ -1461,7 +1458,7 @@ it("existing data in the cache is ignored when `fetchPolicy` is 'network-only'", // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); { const { renderedComponents } = await renderStream.takeRender(); @@ -1531,7 +1528,7 @@ it("fetches data from the network but does not update the cache when `fetchPolic // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); { const { renderedComponents } = await renderStream.takeRender(); @@ -1650,7 +1647,8 @@ it("works with startTransition to change variables", async () => { ); } - const { user } = await renderWithClient(, { client }); + await renderWithClient(, { client }, { render: renderAsync }); + const user = userEvent.setup(); await act(() => user.click(screen.getByText("Load first todo"))); @@ -1753,7 +1751,7 @@ it('does not suspend deferred queries with data in the cache and using a "cache- // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load todo"))); + await user.click(screen.getByText("Load todo")); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -1879,7 +1877,7 @@ it("reacts to cache updates", async () => { // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); await renderStream.takeRender(); { @@ -1969,7 +1967,7 @@ it("applies `errorPolicy` on next fetch when it changes between renders", async // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); await renderStream.takeRender(); { @@ -1982,10 +1980,10 @@ it("applies `errorPolicy` on next fetch when it changes between renders", async }); } - await act(() => user.click(screen.getByText("Change error policy"))); + await user.click(screen.getByText("Change error policy")); await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Refetch greeting"))); + await user.click(screen.getByText("Refetch greeting")); await renderStream.takeRender(); { @@ -2066,7 +2064,7 @@ it("applies `context` on next fetch when it changes between renders", async () = // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); await renderStream.takeRender(); { @@ -2077,10 +2075,10 @@ it("applies `context` on next fetch when it changes between renders", async () = }); } - await act(() => user.click(screen.getByText("Update context"))); + await user.click(screen.getByText("Update context")); await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); await renderStream.takeRender(); { @@ -2176,7 +2174,7 @@ it("returns canonical results immediately when `canonizeResults` changes from `f // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); { const { snapshot } = await renderStream.takeRender(); @@ -2189,7 +2187,7 @@ it("returns canonical results immediately when `canonizeResults` changes from `f expect(values).toEqual([0, 1, 1, 2, 3, 5]); } - await act(() => user.click(screen.getByText("Canonize results"))); + await user.click(screen.getByText("Canonize results")); { const { snapshot } = await renderStream.takeRender(); @@ -2301,7 +2299,7 @@ it("applies changed `refetchWritePolicy` to next fetch when changing between ren // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); await renderStream.takeRender(); { @@ -2312,7 +2310,7 @@ it("applies changed `refetchWritePolicy` to next fetch when changing between ren expect(mergeParams).toEqual([[undefined, [2, 3, 5, 7, 11]]]); } - await act(() => user.click(screen.getByText("Refetch next"))); + await user.click(screen.getByText("Refetch next")); await renderStream.takeRender(); { @@ -2329,10 +2327,10 @@ it("applies changed `refetchWritePolicy` to next fetch when changing between ren ]); } - await act(() => user.click(screen.getByText("Change refetch write policy"))); + await user.click(screen.getByText("Change refetch write policy")); await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Refetch last"))); + await user.click(screen.getByText("Refetch last")); await renderStream.takeRender(); { @@ -2464,7 +2462,7 @@ it("applies `returnPartialData` on next fetch when it changes between renders", // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); await renderStream.takeRender(); { @@ -2479,7 +2477,7 @@ it("applies `returnPartialData` on next fetch when it changes between renders", }); } - await act(() => user.click(screen.getByText("Update partial data"))); + await user.click(screen.getByText("Update partial data")); await renderStream.takeRender(); cache.modify({ @@ -2612,7 +2610,7 @@ it("applies updated `fetchPolicy` on next fetch when it changes between renders" // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); { const { snapshot } = await renderStream.takeRender(); @@ -2630,10 +2628,10 @@ it("applies updated `fetchPolicy` on next fetch when it changes between renders" }); } - await act(() => user.click(screen.getByText("Change fetch policy"))); + await user.click(screen.getByText("Change fetch policy")); await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); await renderStream.takeRender(); { @@ -2715,7 +2713,7 @@ it("re-suspends when calling `refetch`", async () => { // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); { const { renderedComponents } = await renderStream.takeRender(); @@ -2733,7 +2731,7 @@ it("re-suspends when calling `refetch`", async () => { }); } - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); { const { renderedComponents } = await renderStream.takeRender(); @@ -2805,7 +2803,7 @@ it("re-suspends when calling `refetch` with new variables", async () => { // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); { const { renderedComponents } = await renderStream.takeRender(); @@ -2823,7 +2821,7 @@ it("re-suspends when calling `refetch` with new variables", async () => { }); } - await act(() => user.click(screen.getByText("Refetch with ID 2"))); + await user.click(screen.getByText("Refetch with ID 2")); { const { renderedComponents } = await renderStream.takeRender(); @@ -2890,7 +2888,7 @@ it("re-suspends multiple times when calling `refetch` multiple times", async () // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); { const { renderedComponents } = await renderStream.takeRender(); @@ -2910,7 +2908,7 @@ it("re-suspends multiple times when calling `refetch` multiple times", async () const button = screen.getByText("Refetch"); - await act(() => user.click(button)); + await user.click(button); { const { renderedComponents } = await renderStream.takeRender(); @@ -2928,7 +2926,7 @@ it("re-suspends multiple times when calling `refetch` multiple times", async () }); } - await act(() => user.click(button)); + await user.click(button); { const { renderedComponents } = await renderStream.takeRender(); @@ -3005,7 +3003,7 @@ it("throws errors when errors are returned after calling `refetch`", async () => // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); await renderStream.takeRender(); { @@ -3018,7 +3016,7 @@ it("throws errors when errors are returned after calling `refetch`", async () => }); } - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); await renderStream.takeRender(); { @@ -3089,7 +3087,7 @@ it('ignores errors returned after calling `refetch` when errorPolicy is set to " // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); await renderStream.takeRender(); { @@ -3102,7 +3100,7 @@ it('ignores errors returned after calling `refetch` when errorPolicy is set to " }); } - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); await renderStream.takeRender(); { @@ -3177,7 +3175,7 @@ it('returns errors after calling `refetch` when errorPolicy is set to "all"', as // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); await renderStream.takeRender(); { @@ -3190,7 +3188,7 @@ it('returns errors after calling `refetch` when errorPolicy is set to "all"', as }); } - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); await renderStream.takeRender(); { @@ -3267,7 +3265,7 @@ it('handles partial data results after calling `refetch` when errorPolicy is set // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); await renderStream.takeRender(); { @@ -3280,7 +3278,7 @@ it('handles partial data results after calling `refetch` when errorPolicy is set }); } - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); await renderStream.takeRender(); { @@ -3391,7 +3389,8 @@ it("`refetch` works with startTransition to allow React to show stale UI until f ); } - const { user } = await renderWithMocks(, { mocks }); + await renderWithMocks(, { mocks }, { render: renderAsync }); + const user = userEvent.setup(); await act(() => user.click(screen.getByText("Load query"))); @@ -3480,7 +3479,7 @@ it("re-suspends when calling `fetchMore` with different variables", async () => // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); await renderStream.takeRender(); { @@ -3498,7 +3497,7 @@ it("re-suspends when calling `fetchMore` with different variables", async () => }); } - await act(() => user.click(screen.getByText("Fetch more"))); + await user.click(screen.getByText("Fetch more")); { const { renderedComponents } = await renderStream.takeRender(); @@ -3569,7 +3568,7 @@ it("properly uses `updateQuery` when calling `fetchMore`", async () => { // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); await renderStream.takeRender(); { @@ -3587,7 +3586,7 @@ it("properly uses `updateQuery` when calling `fetchMore`", async () => { }); } - await act(() => user.click(screen.getByText("Fetch more"))); + await user.click(screen.getByText("Fetch more")); await renderStream.takeRender(); { @@ -3663,7 +3662,7 @@ it("properly uses cache field policies when calling `fetchMore` without `updateQ // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); await renderStream.takeRender(); { @@ -3681,7 +3680,7 @@ it("properly uses cache field policies when calling `fetchMore` without `updateQ }); } - await act(() => user.click(screen.getByText("Fetch more"))); + await user.click(screen.getByText("Fetch more")); await renderStream.takeRender(); { @@ -3831,7 +3830,8 @@ it("`fetchMore` works with startTransition to allow React to show stale UI until ); } - const { user } = await renderWithClient(, { client }); + await renderWithClient(, { client }, { render: renderAsync }); + const user = userEvent.setup(); await act(() => user.click(screen.getByText("Load query"))); @@ -3956,7 +3956,7 @@ it('honors refetchWritePolicy set to "merge"', async () => { // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); await renderStream.takeRender(); { @@ -3970,7 +3970,7 @@ it('honors refetchWritePolicy set to "merge"', async () => { expect(mergeParams).toEqual([[undefined, [2, 3, 5, 7, 11]]]); } - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); await renderStream.takeRender(); { @@ -4075,7 +4075,7 @@ it('defaults refetchWritePolicy to "overwrite"', async () => { // initial load await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); await renderStream.takeRender(); { @@ -4089,7 +4089,7 @@ it('defaults refetchWritePolicy to "overwrite"', async () => { expect(mergeParams).toEqual([[undefined, [2, 3, 5, 7, 11]]]); } - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); await renderStream.takeRender(); { @@ -4181,7 +4181,7 @@ it('does not suspend when partial data is in the cache and using a "cache-first" // initial load await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -4264,7 +4264,7 @@ it('suspends and does not use partial data from other variables in the cache whe // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -4290,7 +4290,7 @@ it('suspends and does not use partial data from other variables in the cache whe expect(renderedComponents).toStrictEqual([ReadQueryHook]); } - await act(() => user.click(screen.getByText("Change variables"))); + await user.click(screen.getByText("Change variables")); { const { renderedComponents } = await renderStream.takeRender(); @@ -4386,7 +4386,7 @@ it('suspends when partial data is in the cache and using a "network-only" fetch // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); { const { renderedComponents } = await renderStream.takeRender(); @@ -4482,7 +4482,7 @@ it('suspends when partial data is in the cache and using a "no-cache" fetch poli // initial load await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); { const { renderedComponents } = await renderStream.takeRender(); @@ -4602,7 +4602,7 @@ it('does not suspend when partial data is in the cache and using a "cache-and-ne // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -4680,7 +4680,7 @@ it('suspends and does not use partial data when changing variables and using a " // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -4704,7 +4704,7 @@ it('suspends and does not use partial data when changing variables and using a " }); } - await act(() => user.click(screen.getByText("Change variables"))); + await user.click(screen.getByText("Change variables")); { const { renderedComponents } = await renderStream.takeRender(); @@ -4802,7 +4802,7 @@ it('does not suspend deferred queries with partial data in the cache and using a // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load todo"))); + await user.click(screen.getByText("Load todo")); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -4898,7 +4898,15 @@ it("throws when calling loadQuery on first render", async () => { return null; } - await expect(() => renderWithMocks(, { mocks })).rejects.toThrow( + await expect( + renderWithMocks( + , + { mocks }, + { + render: renderAsync, + } + ) + ).rejects.toThrow( new InvariantError( "useLoadableQuery: 'loadQuery' should not be called during render. To start a query during render, use the 'useBackgroundQuery' hook." ) @@ -4924,12 +4932,14 @@ it("throws when calling loadQuery on subsequent render", async () => { return ; } - const { user } = await renderWithMocks( + await renderWithMocks( (error = e)} fallback={
Oops
}> , - { mocks } + { mocks }, + { render: renderAsync } ); + const user = userEvent.setup(); await act(() => user.click(screen.getByText("Load query in render"))); @@ -4953,8 +4963,8 @@ it("allows loadQuery to be called in useEffect on first render", async () => { return null; } - await expect(() => - renderWithMocks(, { mocks }) + await expect( + renderWithMocks(, { mocks }, { render: renderAsync }) ).resolves.not.toThrow(); }); @@ -5040,7 +5050,7 @@ it("can subscribe to subscriptions and react to cache updates via `subscribeToMo // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); { const { renderedComponents } = await renderStream.takeRender(); diff --git a/src/react/hooks/__tests__/useMutation.test.tsx b/src/react/hooks/__tests__/useMutation.test.tsx index 4ef71758a8d..3379b5a1aaf 100644 --- a/src/react/hooks/__tests__/useMutation.test.tsx +++ b/src/react/hooks/__tests__/useMutation.test.tsx @@ -781,11 +781,8 @@ describe("useMutation Hook", () => { expect(result.called).toBe(false); } - let fetchResult: any; - act(() => { - fetchResult = createTodo({ - variables: { priority: "Low", description: "Get milk." }, - }); + let fetchResult = createTodo({ + variables: { priority: "Low", description: "Get milk." }, }); { @@ -796,7 +793,7 @@ describe("useMutation Hook", () => { expect(result.called).toBe(true); } - act(() => reset()); + reset(); { const [, result] = await takeSnapshot(); diff --git a/src/react/hooks/__tests__/useQuery.test.tsx b/src/react/hooks/__tests__/useQuery.test.tsx index daf4fbdad45..6cbd077b2ca 100644 --- a/src/react/hooks/__tests__/useQuery.test.tsx +++ b/src/react/hooks/__tests__/useQuery.test.tsx @@ -7,7 +7,6 @@ import { render, screen, waitFor, renderHook } from "@testing-library/react"; import { ApolloClient, ApolloError, - ApolloQueryResult, NetworkStatus, OperationVariables, TypedDocumentNode, @@ -32,7 +31,6 @@ import { useQuery } from "../useQuery"; import { useMutation } from "../useMutation"; import { disableActWarnings, - PaginatedCaseData, setupPaginatedCase, spyOnConsole, } from "../../../testing/internal"; @@ -44,6 +42,7 @@ import { createRenderStream, renderHookToSnapshotStream, disableActEnvironment, + userEventWithoutAct, } from "@testing-library/react-render-stream"; const IS_REACT_17 = React.version.startsWith("17"); @@ -4116,12 +4115,10 @@ describe("useQuery Hook", () => { const { fetchMore } = getCurrentSnapshot(); - await act(() => - fetchMore({ - variables: { offset: 2 }, - updateQuery: (_, { fetchMoreResult }) => fetchMoreResult, - }) - ); + await fetchMore({ + variables: { offset: 2 }, + updateQuery: (_, { fetchMoreResult }) => fetchMoreResult, + }); expect(fetches).toStrictEqual([ { variables: { limit: 2 } }, @@ -4171,16 +4168,13 @@ describe("useQuery Hook", () => { }); } - let fetchMorePromise!: Promise>; const { fetchMore } = getCurrentSnapshot(); - act(() => { - fetchMorePromise = fetchMore({ - variables: { offset: 2 }, - updateQuery: (prev, { fetchMoreResult }) => ({ - letters: prev.letters.concat(fetchMoreResult.letters), - }), - }); + let fetchMorePromise = fetchMore({ + variables: { offset: 2 }, + updateQuery: (prev, { fetchMoreResult }) => ({ + letters: prev.letters.concat(fetchMoreResult.letters), + }), }); { @@ -4235,11 +4229,9 @@ describe("useQuery Hook", () => { await expect(takeSnapshot).not.toRerender(); - act(() => { - fetchMorePromise = fetchMore({ - variables: { offset: 4 }, - updateQuery: (_, { fetchMoreResult }) => fetchMoreResult, - }); + fetchMorePromise = fetchMore({ + variables: { offset: 4 }, + updateQuery: (_, { fetchMoreResult }) => fetchMoreResult, }); { @@ -4365,12 +4357,10 @@ describe("useQuery Hook", () => { await takeSnapshot(); const { fetchMore } = getCurrentSnapshot(); - await act(() => - fetchMore({ - variables: { offset: 2 }, - updateQuery: (_, { fetchMoreResult }) => fetchMoreResult, - }) - ); + await fetchMore({ + variables: { offset: 2 }, + updateQuery: (_, { fetchMoreResult }) => fetchMoreResult, + }); expect(client.extract()).toStrictEqual({}); }); @@ -4493,7 +4483,7 @@ describe("useQuery Hook", () => { id: number; } - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const query1: TypedDocumentNode = gql` query PersonQuery1($id: ID!) { @@ -4617,7 +4607,7 @@ describe("useQuery Hook", () => { }); } - await act(() => user.click(screen.getByText("Run 2nd query"))); + await user.click(screen.getByText("Run 2nd query")); { const { snapshot } = await renderStream.takeRender(); @@ -4674,7 +4664,7 @@ describe("useQuery Hook", () => { }); } - await act(() => user.click(screen.getByText("Reload 1st query"))); + await user.click(screen.getByText("Reload 1st query")); { const { snapshot } = await renderStream.takeRender(); @@ -4753,7 +4743,7 @@ describe("useQuery Hook", () => { id: number; } - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const query1: TypedDocumentNode = gql` query PersonQuery1($id: ID!) { @@ -4869,7 +4859,7 @@ describe("useQuery Hook", () => { }); } - await act(() => user.click(screen.getByText("Run 2nd query"))); + await user.click(screen.getByText("Run 2nd query")); { const { snapshot } = await renderStream.takeRender(); @@ -4976,7 +4966,7 @@ describe("useQuery Hook", () => { id: number; } - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const query1: TypedDocumentNode = gql` query PersonQuery1($id: ID!) { @@ -5092,7 +5082,7 @@ describe("useQuery Hook", () => { }); } - await act(() => user.click(screen.getByText("Run 2nd query"))); + await user.click(screen.getByText("Run 2nd query")); { const { snapshot } = await renderStream.takeRender(); @@ -5275,7 +5265,7 @@ describe("useQuery Hook", () => { } `; - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ @@ -5404,7 +5394,7 @@ describe("useQuery Hook", () => { }); } - await act(() => user.click(screen.getByText("Run mutation"))); + await user.click(screen.getByText("Run mutation")); await renderStream.takeRender(); { @@ -6702,7 +6692,7 @@ describe("useQuery Hook", () => { expect(query.data).toEqual(carsData); } - act(() => void mutate()); + mutate(); { // The mutation ran and is loading the result. The query stays at not diff --git a/src/react/hooks/__tests__/useQueryRefHandlers.test.tsx b/src/react/hooks/__tests__/useQueryRefHandlers.test.tsx index fd2f3fc939b..3c678892c2b 100644 --- a/src/react/hooks/__tests__/useQueryRefHandlers.test.tsx +++ b/src/react/hooks/__tests__/useQueryRefHandlers.test.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { act, screen } from "@testing-library/react"; +import { screen } from "@testing-library/react"; import { ApolloClient, InMemoryCache, @@ -34,6 +34,7 @@ import { concatPagination, getMainDefinition } from "../../../utilities"; import { createRenderStream, disableActEnvironment, + userEventWithoutAct, useTrackRenders, } from "@testing-library/react-render-stream"; @@ -130,7 +131,7 @@ test("does not interfere with updates from useReadQuery", async () => { test("refetches and resuspends when calling refetch", async () => { const { query, mocks: defaultMocks } = setupSimpleCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const mocks = [ defaultMocks[0], @@ -199,7 +200,7 @@ test("refetches and resuspends when calling refetch", async () => { }); } - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); { const { renderedComponents } = await renderStream.takeRender(); @@ -262,7 +263,7 @@ test('honors refetchWritePolicy set to "merge"', async () => { }, }); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const client = new ApolloClient({ link: new MockLink(mocks), cache, @@ -322,7 +323,7 @@ test('honors refetchWritePolicy set to "merge"', async () => { expect(mergeParams).toEqual([[undefined, [2, 3, 5, 7, 11]]]); } - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); await renderStream.takeRender(); { @@ -389,7 +390,7 @@ test('honors refetchWritePolicy set to "overwrite"', async () => { }, }); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const client = new ApolloClient({ link: new MockLink(mocks), cache, @@ -449,7 +450,7 @@ test('honors refetchWritePolicy set to "overwrite"', async () => { expect(mergeParams).toEqual([[undefined, [2, 3, 5, 7, 11]]]); } - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); await renderStream.takeRender(); { @@ -513,7 +514,7 @@ test('defaults refetchWritePolicy to "overwrite"', async () => { }, }); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const client = new ApolloClient({ link: new MockLink(mocks), cache, @@ -572,7 +573,7 @@ test('defaults refetchWritePolicy to "overwrite"', async () => { expect(mergeParams).toEqual([[undefined, [2, 3, 5, 7, 11]]]); } - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); await renderStream.takeRender(); { @@ -604,7 +605,7 @@ test("`refetch` works with startTransition", async () => { completed: boolean; }; } - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const query: TypedDocumentNode = gql` query TodoItemQuery($id: ID!) { @@ -717,7 +718,7 @@ test("`refetch` works with startTransition", async () => { } const button = screen.getByText("Refetch"); - await act(() => user.click(button)); + await user.click(button); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -753,7 +754,7 @@ test("`refetch` works with startTransition", async () => { test("`refetch` works with startTransition from useBackgroundQuery and usePreloadedQueryHandlers", async () => { const { query, mocks: defaultMocks } = setupSimpleCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const mocks = [ defaultMocks[0], @@ -854,7 +855,7 @@ test("`refetch` works with startTransition from useBackgroundQuery and usePreloa }); } - await act(() => user.click(screen.getByText("Refetch from parent"))); + await user.click(screen.getByText("Refetch from parent")); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -886,7 +887,7 @@ test("`refetch` works with startTransition from useBackgroundQuery and usePreloa }); } - await act(() => user.click(screen.getByText("Refetch from child"))); + await user.click(screen.getByText("Refetch from child")); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -924,7 +925,7 @@ test("`refetch` works with startTransition from useBackgroundQuery and usePreloa test("refetches from queryRefs produced by useBackgroundQuery", async () => { const { query, mocks: defaultMocks } = setupSimpleCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const mocks = [ defaultMocks[0], @@ -990,7 +991,7 @@ test("refetches from queryRefs produced by useBackgroundQuery", async () => { }); } - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); { const { renderedComponents } = await renderStream.takeRender(); @@ -1012,7 +1013,7 @@ test("refetches from queryRefs produced by useBackgroundQuery", async () => { test("refetches from queryRefs produced by useLoadableQuery", async () => { const { query, mocks: defaultMocks } = setupSimpleCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const mocks = [ defaultMocks[0], @@ -1066,7 +1067,7 @@ test("refetches from queryRefs produced by useLoadableQuery", async () => { // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); { const { renderedComponents } = await renderStream.takeRender(); @@ -1084,7 +1085,7 @@ test("refetches from queryRefs produced by useLoadableQuery", async () => { }); } - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); { const { renderedComponents } = await renderStream.takeRender(); @@ -1106,7 +1107,7 @@ test("refetches from queryRefs produced by useLoadableQuery", async () => { test("resuspends when calling `fetchMore`", async () => { const { query, link } = setupPaginatedCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const client = new ApolloClient({ cache: new InMemoryCache({ @@ -1183,7 +1184,7 @@ test("resuspends when calling `fetchMore`", async () => { }); } - await act(() => user.click(screen.getByText("Load next"))); + await user.click(screen.getByText("Load next")); { const { renderedComponents } = await renderStream.takeRender(); @@ -1210,7 +1211,7 @@ test("resuspends when calling `fetchMore`", async () => { test("properly uses `updateQuery` when calling `fetchMore`", async () => { const { query, link } = setupPaginatedCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const client = new ApolloClient({ cache: new InMemoryCache(), link }); const preloadQuery = createQueryPreloader(client); @@ -1283,7 +1284,7 @@ test("properly uses `updateQuery` when calling `fetchMore`", async () => { }); } - await act(() => user.click(screen.getByText("Load next"))); + await user.click(screen.getByText("Load next")); { const { renderedComponents } = await renderStream.takeRender(); @@ -1312,7 +1313,7 @@ test("properly uses `updateQuery` when calling `fetchMore`", async () => { test("properly uses cache field policies when calling `fetchMore` without `updateQuery`", async () => { const { query, link } = setupPaginatedCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const client = new ApolloClient({ cache: new InMemoryCache({ @@ -1389,7 +1390,7 @@ test("properly uses cache field policies when calling `fetchMore` without `updat }); } - await act(() => user.click(screen.getByText("Load next"))); + await user.click(screen.getByText("Load next")); { const { renderedComponents } = await renderStream.takeRender(); @@ -1418,7 +1419,7 @@ test("properly uses cache field policies when calling `fetchMore` without `updat test("paginates from queryRefs produced by useBackgroundQuery", async () => { const { query, link } = setupPaginatedCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const client = new ApolloClient({ cache: new InMemoryCache({ typePolicies: { @@ -1495,7 +1496,7 @@ test("paginates from queryRefs produced by useBackgroundQuery", async () => { }); } - await act(() => user.click(screen.getByText("Load next"))); + await user.click(screen.getByText("Load next")); { const { renderedComponents } = await renderStream.takeRender(); @@ -1522,7 +1523,7 @@ test("paginates from queryRefs produced by useBackgroundQuery", async () => { test("paginates from queryRefs produced by useLoadableQuery", async () => { const { query, link } = setupPaginatedCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const client = new ApolloClient({ cache: new InMemoryCache({ typePolicies: { @@ -1584,7 +1585,7 @@ test("paginates from queryRefs produced by useLoadableQuery", async () => { // initial render await renderStream.takeRender(); - await act(() => user.click(screen.getByText("Load query"))); + await user.click(screen.getByText("Load query")); { const { renderedComponents } = await renderStream.takeRender(); @@ -1607,7 +1608,7 @@ test("paginates from queryRefs produced by useLoadableQuery", async () => { }); } - await act(() => user.click(screen.getByText("Load next"))); + await user.click(screen.getByText("Load next")); { const { renderedComponents } = await renderStream.takeRender(); @@ -1634,7 +1635,7 @@ test("paginates from queryRefs produced by useLoadableQuery", async () => { test("`fetchMore` works with startTransition", async () => { const { query, link } = setupPaginatedCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const client = new ApolloClient({ cache: new InMemoryCache({ typePolicies: { @@ -1719,7 +1720,7 @@ test("`fetchMore` works with startTransition", async () => { }); } - await act(() => user.click(screen.getByText("Load next"))); + await user.click(screen.getByText("Load next")); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -1765,7 +1766,7 @@ test("`fetchMore` works with startTransition", async () => { test("`fetchMore` works with startTransition from useBackgroundQuery and useQueryRefHandlers", async () => { const { query, link } = setupPaginatedCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const client = new ApolloClient({ cache: new InMemoryCache({ typePolicies: { @@ -1868,7 +1869,7 @@ test("`fetchMore` works with startTransition from useBackgroundQuery and useQuer }); } - await act(() => user.click(screen.getByText("Paginate from parent"))); + await user.click(screen.getByText("Paginate from parent")); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -1910,7 +1911,7 @@ test("`fetchMore` works with startTransition from useBackgroundQuery and useQuer }); } - await act(() => user.click(screen.getByText("Paginate from child"))); + await user.click(screen.getByText("Paginate from child")); { const { snapshot, renderedComponents } = await renderStream.takeRender(); diff --git a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx index f517e25de41..e7f85cb3a37 100644 --- a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx +++ b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx @@ -10172,7 +10172,7 @@ describe("useSuspenseQuery", () => { it("fetchMore does not cause extra render", async () => { const { query, link } = setupPaginatedCase(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const client = new ApolloClient({ cache: new InMemoryCache({ typePolicies: { @@ -10260,7 +10260,7 @@ describe("useSuspenseQuery", () => { }); } - await act(() => user.click(screen.getByText("Fetch next"))); + await user.click(screen.getByText("Fetch next")); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -10308,7 +10308,7 @@ describe("useSuspenseQuery", () => { interface Data { todos: Todo[]; } - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const query: TypedDocumentNode = gql` query TodosQuery($offset: Int!) { @@ -10457,7 +10457,7 @@ describe("useSuspenseQuery", () => { }); } - await act(() => user.click(screen.getByText("Load more"))); + await user.click(screen.getByText("Load more")); { const { snapshot, renderedComponents } = await renderStream.takeRender(); @@ -10550,7 +10550,7 @@ describe("useSuspenseQuery", () => { }, ]); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const client = new ApolloClient({ cache: new InMemoryCache({ typePolicies: { @@ -10625,7 +10625,7 @@ describe("useSuspenseQuery", () => { }); } - await act(() => user.click(screen.getByText("Fetch next"))); + await user.click(screen.getByText("Fetch next")); await renderStream.takeRender(); if (IS_REACT_19) { @@ -10647,7 +10647,7 @@ describe("useSuspenseQuery", () => { }); } - await act(() => user.click(screen.getByText("Fetch next"))); + await user.click(screen.getByText("Fetch next")); await renderStream.takeRender(); if (IS_REACT_19) { @@ -10768,9 +10768,7 @@ describe("useSuspenseQuery", () => { } const { snapshot } = renderStream.getCurrentRender(); - await act(() => - snapshot.result!.fetchMore({ variables: { offset: 2 } }).catch(() => {}) - ); + snapshot.result!.fetchMore({ variables: { offset: 2 } }).catch(() => {}); { const { renderedComponents } = await renderStream.takeRender(); diff --git a/src/react/query-preloader/__tests__/createQueryPreloader.test.tsx b/src/react/query-preloader/__tests__/createQueryPreloader.test.tsx index 1d8b2ec61e0..7b2a66c114c 100644 --- a/src/react/query-preloader/__tests__/createQueryPreloader.test.tsx +++ b/src/react/query-preloader/__tests__/createQueryPreloader.test.tsx @@ -28,7 +28,7 @@ import { VariablesCaseData, } from "../../../testing/internal"; import { ApolloProvider } from "../../context"; -import { act, renderHook, screen } from "@testing-library/react"; +import { act, renderHookAsync, screen } from "@testing-library/react"; import { UseReadQueryResult, useReadQuery } from "../../hooks"; import { GraphQLError } from "graphql"; import { ErrorBoundary } from "react-error-boundary"; @@ -36,6 +36,7 @@ import userEvent from "@testing-library/user-event"; import { createRenderStream, disableActEnvironment, + userEventWithoutAct, useTrackRenders, } from "@testing-library/react-render-stream"; @@ -224,7 +225,7 @@ test("useReadQuery auto-retains the queryRef and disposes of it when unmounted", const queryRef = preloadQuery(query); - const { unmount } = renderHook(() => useReadQuery(queryRef)); + const { unmount } = await renderHookAsync(() => useReadQuery(queryRef)); // We don't start the dispose timer until the promise is initially resolved // so we need to wait for it @@ -265,7 +266,7 @@ test("useReadQuery auto-resubscribes the query after its disposed", async () => result: null as UseReadQueryResult | null, }, }); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const client = new ApolloClient({ cache: new InMemoryCache(), link }); const preloadQuery = createQueryPreloader(client); @@ -297,7 +298,7 @@ test("useReadQuery auto-resubscribes the query after its disposed", async () => return null; } - renderStream.render(, { wrapper: createClientWrapper(client) }); + await renderStream.render(, { wrapper: createClientWrapper(client) }); const toggleButton = screen.getByText("Toggle"); @@ -317,14 +318,14 @@ test("useReadQuery auto-resubscribes the query after its disposed", async () => expect(fetchCount).toBe(1); // unmount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); await wait(0); await renderStream.takeRender(); expect(queryRef).toBeDisposed(); // mount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); // Ensure we aren't refetching the data by checking we still render the same // cache result @@ -356,7 +357,7 @@ test("useReadQuery auto-resubscribes the query after its disposed", async () => } // unmount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); await renderStream.takeRender(); await wait(0); @@ -366,7 +367,7 @@ test("useReadQuery auto-resubscribes the query after its disposed", async () => // instead of the old one client.writeQuery({ query, data: { greeting: "While you were away" } }); // mount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); expect(queryRef).not.toBeDisposed(); @@ -385,7 +386,7 @@ test("useReadQuery auto-resubscribes the query after its disposed", async () => expect(fetchCount).toBe(1); // unmount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); await renderStream.takeRender(); await wait(0); @@ -404,7 +405,7 @@ test("useReadQuery auto-resubscribes the query after its disposed", async () => expect(fetchCount).toBe(1); // mount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); // this should now trigger a network request expect(fetchCount).toBe(2); @@ -459,7 +460,7 @@ test("useReadQuery handles auto-resubscribe with returnPartialData", async () => result: null as UseReadQueryResult> | null, }, }); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const client = new ApolloClient({ cache: new InMemoryCache(), link }); const preloadQuery = createQueryPreloader(client); @@ -494,7 +495,7 @@ test("useReadQuery handles auto-resubscribe with returnPartialData", async () => return null; } - renderStream.render(, { wrapper: createClientWrapper(client) }); + await renderStream.render(, { wrapper: createClientWrapper(client) }); const toggleButton = screen.getByText("Toggle"); @@ -516,14 +517,14 @@ test("useReadQuery handles auto-resubscribe with returnPartialData", async () => expect(fetchCount).toBe(1); // unmount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); await wait(0); await renderStream.takeRender(); expect(queryRef).toBeDisposed(); // mount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); // Ensure we aren't refetching the data by checking we still render the same // cache result @@ -573,7 +574,7 @@ test("useReadQuery handles auto-resubscribe with returnPartialData", async () => } // unmount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); await renderStream.takeRender(); await wait(0); @@ -593,7 +594,7 @@ test("useReadQuery handles auto-resubscribe with returnPartialData", async () => variables: { id: "1" }, }); // mount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); expect(queryRef).not.toBeDisposed(); @@ -618,7 +619,7 @@ test("useReadQuery handles auto-resubscribe with returnPartialData", async () => expect(fetchCount).toBe(1); // unmount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); await renderStream.takeRender(); await wait(0); @@ -638,7 +639,7 @@ test("useReadQuery handles auto-resubscribe with returnPartialData", async () => expect(fetchCount).toBe(1); // mount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); // this should now trigger a network request expect(fetchCount).toBe(2); @@ -668,7 +669,7 @@ test("useReadQuery handles auto-resubscribe with returnPartialData", async () => } // unmount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); await renderStream.takeRender(); await wait(0); @@ -676,7 +677,7 @@ test("useReadQuery handles auto-resubscribe with returnPartialData", async () => client.clearStore(); // mount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); expect(fetchCount).toBe(3); @@ -721,7 +722,7 @@ test("useReadQuery handles auto-resubscribe on network-only fetch policy", async result: null as UseReadQueryResult | null, }, }); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const client = new ApolloClient({ cache: new InMemoryCache(), link }); const preloadQuery = createQueryPreloader(client); @@ -753,7 +754,7 @@ test("useReadQuery handles auto-resubscribe on network-only fetch policy", async return null; } - renderStream.render(, { wrapper: createClientWrapper(client) }); + await renderStream.render(, { wrapper: createClientWrapper(client) }); const toggleButton = screen.getByText("Toggle"); @@ -773,14 +774,14 @@ test("useReadQuery handles auto-resubscribe on network-only fetch policy", async expect(fetchCount).toBe(1); // unmount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); await wait(0); await renderStream.takeRender(); expect(queryRef).toBeDisposed(); // mount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); // Ensure we aren't refetching the data by checking we still render the same // cache result @@ -812,7 +813,7 @@ test("useReadQuery handles auto-resubscribe on network-only fetch policy", async } // unmount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); await renderStream.takeRender(); await wait(0); @@ -822,7 +823,7 @@ test("useReadQuery handles auto-resubscribe on network-only fetch policy", async // instead of the old one client.writeQuery({ query, data: { greeting: "While you were away" } }); // mount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); expect(queryRef).not.toBeDisposed(); @@ -841,7 +842,7 @@ test("useReadQuery handles auto-resubscribe on network-only fetch policy", async expect(fetchCount).toBe(1); // unmount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); await renderStream.takeRender(); await wait(0); @@ -859,7 +860,7 @@ test("useReadQuery handles auto-resubscribe on network-only fetch policy", async expect(fetchCount).toBe(1); // mount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); expect(fetchCount).toBe(2); expect(queryRef).not.toBeDisposed(); @@ -903,7 +904,7 @@ test("useReadQuery handles auto-resubscribe on cache-and-network fetch policy", result: null as UseReadQueryResult | null, }, }); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const client = new ApolloClient({ cache: new InMemoryCache(), link }); const preloadQuery = createQueryPreloader(client); @@ -935,7 +936,7 @@ test("useReadQuery handles auto-resubscribe on cache-and-network fetch policy", return null; } - renderStream.render(, { wrapper: createClientWrapper(client) }); + await renderStream.render(, { wrapper: createClientWrapper(client) }); const toggleButton = screen.getByText("Toggle"); @@ -955,14 +956,14 @@ test("useReadQuery handles auto-resubscribe on cache-and-network fetch policy", expect(fetchCount).toBe(1); // unmount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); await wait(0); await renderStream.takeRender(); expect(queryRef).toBeDisposed(); // mount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); // Ensure we aren't refetching the data by checking we still render the same // cache result @@ -994,7 +995,7 @@ test("useReadQuery handles auto-resubscribe on cache-and-network fetch policy", } // unmount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); await renderStream.takeRender(); await wait(0); @@ -1004,7 +1005,7 @@ test("useReadQuery handles auto-resubscribe on cache-and-network fetch policy", // instead of the old one client.writeQuery({ query, data: { greeting: "While you were away" } }); // mount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); expect(queryRef).not.toBeDisposed(); @@ -1023,7 +1024,7 @@ test("useReadQuery handles auto-resubscribe on cache-and-network fetch policy", expect(fetchCount).toBe(1); // unmount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); await renderStream.takeRender(); await wait(0); @@ -1041,7 +1042,7 @@ test("useReadQuery handles auto-resubscribe on cache-and-network fetch policy", expect(fetchCount).toBe(1); // mount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); expect(fetchCount).toBe(2); expect(queryRef).not.toBeDisposed(); @@ -1085,7 +1086,7 @@ test("useReadQuery handles auto-resubscribe on no-cache fetch policy", async () result: null as UseReadQueryResult | null, }, }); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); const client = new ApolloClient({ cache: new InMemoryCache(), link }); const preloadQuery = createQueryPreloader(client); @@ -1117,7 +1118,7 @@ test("useReadQuery handles auto-resubscribe on no-cache fetch policy", async () return null; } - renderStream.render(, { wrapper: createClientWrapper(client) }); + await renderStream.render(, { wrapper: createClientWrapper(client) }); const toggleButton = screen.getByText("Toggle"); @@ -1137,14 +1138,14 @@ test("useReadQuery handles auto-resubscribe on no-cache fetch policy", async () expect(fetchCount).toBe(1); // unmount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); await wait(0); await renderStream.takeRender(); expect(queryRef).toBeDisposed(); // mount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); // Ensure we aren't refetching the data by checking we still render the same // result @@ -1168,7 +1169,7 @@ test("useReadQuery handles auto-resubscribe on no-cache fetch policy", async () await expect(renderStream).not.toRerender(); // unmount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); await renderStream.takeRender(); await wait(0); @@ -1177,7 +1178,7 @@ test("useReadQuery handles auto-resubscribe on no-cache fetch policy", async () // Write a cache result to ensure that remounting will ignore this result client.writeQuery({ query, data: { greeting: "While you were away" } }); // mount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); expect(queryRef).not.toBeDisposed(); @@ -1195,7 +1196,7 @@ test("useReadQuery handles auto-resubscribe on no-cache fetch policy", async () expect(fetchCount).toBe(1); // unmount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); await renderStream.takeRender(); await wait(0); @@ -1213,7 +1214,7 @@ test("useReadQuery handles auto-resubscribe on no-cache fetch policy", async () expect(fetchCount).toBe(1); // mount ReadQueryHook - await act(() => user.click(toggleButton)); + await user.click(toggleButton); expect(fetchCount).toBe(1); expect(queryRef).not.toBeDisposed(); diff --git a/src/testing/experimental/__tests__/createTestSchema.test.tsx b/src/testing/experimental/__tests__/createTestSchema.test.tsx index 30521640ce4..1f6989eab30 100644 --- a/src/testing/experimental/__tests__/createTestSchema.test.tsx +++ b/src/testing/experimental/__tests__/createTestSchema.test.tsx @@ -12,7 +12,7 @@ import { buildSchema } from "graphql"; import type { UseSuspenseQueryResult } from "../../../react/index.js"; import { useMutation, useSuspenseQuery } from "../../../react/index.js"; import userEvent from "@testing-library/user-event"; -import { act, screen } from "@testing-library/react"; +import { screen } from "@testing-library/react"; import { createSchemaFetch } from "../createSchemaFetch.js"; import { FallbackProps, @@ -23,6 +23,7 @@ import { RenderStream, createRenderStream, disableActEnvironment, + userEventWithoutAct, } from "@testing-library/react-render-stream"; const typeDefs = /* GraphQL */ ` @@ -603,7 +604,7 @@ describe("schema proxy", () => { ); }; - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); renderStream.render(, { wrapper: createClientWrapper(client), @@ -632,7 +633,7 @@ describe("schema proxy", () => { }); } - await act(() => user.click(screen.getByText("Change name"))); + await user.click(screen.getByText("Change name")); // initial suspended render await renderStream.takeRender(); @@ -957,7 +958,7 @@ describe("schema proxy", () => { ); }; - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); renderStream.render(, { wrapper: createClientWrapper(client), @@ -986,7 +987,7 @@ describe("schema proxy", () => { }); } - await act(() => user.click(screen.getByText("Change name"))); + await user.click(screen.getByText("Change name")); await renderStream.takeRender(); { @@ -1130,9 +1131,9 @@ describe("schema proxy", () => { resetTestSchema.reset(); - const user = userEvent.setup(); + const user = userEventWithoutAct(userEvent.setup()); - await act(() => user.click(screen.getByText("Refetch"))); + await user.click(screen.getByText("Refetch")); // initial suspended render await renderStream.takeRender(); From 651a3d245753140521d587b111e468fb6f2f28fd Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Thu, 28 Nov 2024 15:43:12 +0100 Subject: [PATCH 19/58] simplify lint rules --- .../require-disable-act-environment.test.ts | 42 +++++++++++++-- .../require-disable-act-environment.ts | 54 +++++++++---------- 2 files changed, 64 insertions(+), 32 deletions(-) diff --git a/eslint-local-rules/require-disable-act-environment.test.ts b/eslint-local-rules/require-disable-act-environment.test.ts index 6ec62c5abfb..0366a48dda8 100644 --- a/eslint-local-rules/require-disable-act-environment.test.ts +++ b/eslint-local-rules/require-disable-act-environment.test.ts @@ -27,32 +27,66 @@ ruleTester.run("require-disable-act-environment", rule, { () => { using _disabledAct = disableActEnvironment(); const {} = renderStream.takeSnapshot() + } + `, + ` + using _disabledAct = disableActEnvironment(); + () => { + const { takeRender } = someCall() + const {} = takeRender() + } + `, + ` + using _disabledAct = disableActEnvironment(); + () => { + const {} = renderStream.takeRender() + } + `, + ` + using _disabledAct = disableActEnvironment(); + () => { + const { takeSnapshot } = someCall() + const {} = takeSnapshot() + } + `, + ` + using _disabledAct = disableActEnvironment(); + () => { + const {} = renderStream.takeSnapshot() } `, ], invalid: [ ` - using _disabledAct = disableActEnvironment(); + () => { + using _disabledAct = disableActEnvironment(); + } () => { const { takeRender } = someCall() takeRender() } `, ` - using _disabledAct = disableActEnvironment(); + () => { + using _disabledAct = disableActEnvironment(); + } () => { renderStream.takeRender() } `, ` - using _disabledAct = disableActEnvironment(); + () => { + using _disabledAct = disableActEnvironment(); + } () => { const { takeSnapshot } = someCall() takeSnapshot() } `, ` - using _disabledAct = disableActEnvironment(); + () => { + using _disabledAct = disableActEnvironment(); + } () => { renderStream.takeSnapshot() } diff --git a/eslint-local-rules/require-disable-act-environment.ts b/eslint-local-rules/require-disable-act-environment.ts index ca292fcf33e..1f246194664 100644 --- a/eslint-local-rules/require-disable-act-environment.ts +++ b/eslint-local-rules/require-disable-act-environment.ts @@ -8,20 +8,17 @@ type Fn = export const rule = ESLintUtils.RuleCreator.withoutDocs({ create(context) { - const functionsWithRenderStreamCall = new WeakMap(); - const functionsWithDisabledActEnvironment = new WeakSet(); - function FunctionExitCheck(fnNode: Fn) { - const callNode = functionsWithRenderStreamCall.get(fnNode); - if (callNode) { - if (!functionsWithDisabledActEnvironment.has(fnNode)) { - context.report({ - messageId: "missingDisableActEnvironment", - node: callNode, - }); - } + let depth = 1; + let disabledDepth: number | false = false; + + function EnterFn() { + depth++; + } + function ExitFn() { + depth--; + if (disabledDepth !== false && disabledDepth > depth) { + disabledDepth = false; } - functionsWithDisabledActEnvironment.delete(fnNode); - functionsWithRenderStreamCall.delete(fnNode); } return { @@ -33,31 +30,32 @@ export const rule = ESLintUtils.RuleCreator.withoutDocs({ if ( directCallee?.type === "Identifier" && - (directCallee.name === "takeRender" || - directCallee.name === "takeSnapshot") + directCallee.name === "disableActEnvironment" ) { - const parentFunction = findParentFunction(node); - if ( - parentFunction && - !functionsWithRenderStreamCall.has(parentFunction) - ) { - functionsWithRenderStreamCall.set(parentFunction, node); + if (disabledDepth === false) { + disabledDepth = depth; } } if ( directCallee?.type === "Identifier" && - directCallee.name === "disableActEnvironment" + (directCallee.name === "takeRender" || + directCallee.name === "takeSnapshot") ) { - const parentFunction = findParentFunction(node); - if (parentFunction) { - functionsWithDisabledActEnvironment.add(parentFunction); + if (disabledDepth === false) { + context.report({ + messageId: "missingDisableActEnvironment", + node: node, + }); } } }, - "ArrowFunctionExpression:exit": FunctionExitCheck, - "FunctionExpression:exit": FunctionExitCheck, - "FunctionDeclaration:exit": FunctionExitCheck, + ArrowFunctionExpression: EnterFn, + FunctionExpression: EnterFn, + FunctionDeclaration: EnterFn, + "ArrowFunctionExpression:exit": ExitFn, + "FunctionExpression:exit": ExitFn, + "FunctionDeclaration:exit": ExitFn, }; }, meta: { From 0ae48ced154d17616666e8cca771b8a4de4b2edf Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Thu, 28 Nov 2024 16:03:10 +0100 Subject: [PATCH 20/58] undo for a second --- .../hooks/__tests__/useSuspenseQuery.test.tsx | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx index e7f85cb3a37..328ff2a682a 100644 --- a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx +++ b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx @@ -9810,10 +9810,6 @@ describe("useSuspenseQuery", () => { } const el = screen.getByText("Refresh"); await user.click(el); - if (IS_REACT_19) { - // React 19 sibling prerender - await takeRender(); - } // startTransition will avoid rendering the suspense fallback for already // revealed content if the state update inside the transition causes the @@ -10628,12 +10624,6 @@ describe("useSuspenseQuery", () => { await user.click(screen.getByText("Fetch next")); await renderStream.takeRender(); - if (IS_REACT_19) { - // React 19 sibling prerender - const { renderedComponents } = await renderStream.takeRender(); - expect(renderedComponents).toStrictEqual([]); - } - { const { snapshot } = await renderStream.takeRender(); @@ -10650,12 +10640,6 @@ describe("useSuspenseQuery", () => { await user.click(screen.getByText("Fetch next")); await renderStream.takeRender(); - if (IS_REACT_19) { - // React 19 sibling prerender - const { renderedComponents } = await renderStream.takeRender(); - expect(renderedComponents).toStrictEqual([]); - } - { const { snapshot } = await renderStream.takeRender(); From 1d0c877fed2e3adfd93bf8c1ae6c3ded5bb1d040 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Thu, 28 Nov 2024 16:24:24 +0100 Subject: [PATCH 21/58] slow down a few select tests --- .../hooks/__tests__/useBackgroundQuery.test.tsx | 15 ++++++++++++--- .../hooks/__tests__/useSuspenseQuery.test.tsx | 2 +- src/testing/internal/index.ts | 1 + src/testing/internal/scenarios/index.ts | 7 +++++++ 4 files changed, 21 insertions(+), 4 deletions(-) diff --git a/src/react/hooks/__tests__/useBackgroundQuery.test.tsx b/src/react/hooks/__tests__/useBackgroundQuery.test.tsx index 887a1009901..85139cf51ff 100644 --- a/src/react/hooks/__tests__/useBackgroundQuery.test.tsx +++ b/src/react/hooks/__tests__/useBackgroundQuery.test.tsx @@ -55,6 +55,7 @@ import { setupSimpleCase, setupVariablesCase, spyOnConsole, + slowDownMocks, } from "../../../testing/internal"; import { SubscribeToMoreFunction } from "../useSuspenseQuery"; import { @@ -1720,7 +1721,9 @@ it("reacts to variables updates", async () => { using _disabledAct = disableActEnvironment(); const { rerender } = await renderStream.render(, { - wrapper: createMockWrapper({ mocks }), + wrapper: createMockWrapper({ + mocks: slowDownMocks(mocks), + }), }); { @@ -3543,7 +3546,10 @@ it('suspends and does not use partial data from other variables in the cache whe using _disabledAct = disableActEnvironment(); const { rerender } = await renderStream.render(, { - wrapper: createMockWrapper({ cache, mocks }), + wrapper: createMockWrapper({ + cache, + mocks: slowDownMocks(mocks), + }), }); { @@ -3875,7 +3881,10 @@ it('suspends and does not use partial data when changing variables and using a " using _disabledAct = disableActEnvironment(); const { rerender } = await renderStream.render(, { - wrapper: createMockWrapper({ cache, mocks }), + wrapper: createMockWrapper({ + cache, + mocks: slowDownMocks(mocks), + }), }); { diff --git a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx index 328ff2a682a..30e53c7c487 100644 --- a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx +++ b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx @@ -10676,7 +10676,7 @@ describe("useSuspenseQuery", () => { observer.next({ data: { letters } }); } observer.complete(); - }, 10); + }, 150); }); }); diff --git a/src/testing/internal/index.ts b/src/testing/internal/index.ts index 05a44e39429..61bf0b2597a 100644 --- a/src/testing/internal/index.ts +++ b/src/testing/internal/index.ts @@ -12,6 +12,7 @@ export { setupSimpleCase, setupVariablesCase, setupPaginatedCase, + slowDownMocks, } from "./scenarios/index.js"; export type { diff --git a/src/testing/internal/scenarios/index.ts b/src/testing/internal/scenarios/index.ts index c6943f51236..557d1db5b40 100644 --- a/src/testing/internal/scenarios/index.ts +++ b/src/testing/internal/scenarios/index.ts @@ -63,6 +63,13 @@ export function setupVariablesCase() { return { mocks, query }; } +export function slowDownMocks[]>( + mocks: T, + delay = 150 +) { + return mocks.map((mock) => ({ ...mock, delay })); +} + interface Letter { letter: string; position: number; From f02f1a2b2dd20fb69ffbd8fb4d84965eb857b2ce Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Thu, 28 Nov 2024 16:45:46 +0100 Subject: [PATCH 22/58] work around one weird test --- .../experimental/__tests__/createTestSchema.test.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/testing/experimental/__tests__/createTestSchema.test.tsx b/src/testing/experimental/__tests__/createTestSchema.test.tsx index 1f6989eab30..d5a951a5a5f 100644 --- a/src/testing/experimental/__tests__/createTestSchema.test.tsx +++ b/src/testing/experimental/__tests__/createTestSchema.test.tsx @@ -26,6 +26,8 @@ import { userEventWithoutAct, } from "@testing-library/react-render-stream"; +const IS_REACT_19 = React.version.startsWith("19"); + const typeDefs = /* GraphQL */ ` type User { id: ID! @@ -1212,13 +1214,20 @@ describe("schema proxy", () => { return
Hello
; }; - renderStream.render(, { + await renderStream.render(, { wrapper: createClientWrapper(client), }); // initial suspended render await renderStream.takeRender(); + if (IS_REACT_19) { + // not sure why we have this additional commit + expect((await renderStream.takeRender()).snapshot).toStrictEqual({ + result: null, + }); + } + await expect(renderStream).not.toRerender({ timeout: minDelay - 100 }); { From 4e8253cfb2b6904357bdede91650862da5111735 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Thu, 28 Nov 2024 16:47:19 +0100 Subject: [PATCH 23/58] format --- src/react/hoc/__tests__/queries/lifecycle.test.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/react/hoc/__tests__/queries/lifecycle.test.tsx b/src/react/hoc/__tests__/queries/lifecycle.test.tsx index 284c62dd90c..5a4811ec02c 100644 --- a/src/react/hoc/__tests__/queries/lifecycle.test.tsx +++ b/src/react/hoc/__tests__/queries/lifecycle.test.tsx @@ -10,7 +10,10 @@ import { mockSingleLink } from "../../../../testing"; import { Query as QueryComponent } from "../../../components"; import { graphql } from "../../graphql"; import { ChildProps, DataValue } from "../../types"; -import { disableActEnvironment, renderToRenderStream } from "@testing-library/react-render-stream"; +import { + disableActEnvironment, + renderToRenderStream, +} from "@testing-library/react-render-stream"; describe("[queries] lifecycle", () => { // lifecycle From b1af798be81c3eab15626948b7f0c5e1c3d51b53 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Thu, 28 Nov 2024 17:25:55 +0100 Subject: [PATCH 24/58] use modern version of testing library for React 17 --- config/jest.config.js | 1 - package-lock.json | 52 ++----------------- package.json | 3 +- ...ry+react+0.0.0-semantically-released.patch | 13 +++++ 4 files changed, 17 insertions(+), 52 deletions(-) create mode 100644 patches/@testing-library+react+0.0.0-semantically-released.patch diff --git a/config/jest.config.js b/config/jest.config.js index 33e7aba59df..ce297ed2af0 100644 --- a/config/jest.config.js +++ b/config/jest.config.js @@ -85,7 +85,6 @@ const standardReact17Config = { "^react-dom$": "react-dom-17", "^react-dom/server$": "react-dom-17/server", "^react-dom/test-utils$": "react-dom-17/test-utils", - "^@testing-library/react$": "@testing-library/react-12", }, }; diff --git a/package-lock.json b/package-lock.json index fef3a46a565..2303704fde6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,8 +40,7 @@ "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "6.4.6", "@testing-library/react": "https://pkg.csb.dev/testing-library/react-testing-library/commit/571fbc81/@testing-library/react", - "@testing-library/react-12": "npm:@testing-library/react@^12", - "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@8474b54", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@d926b40", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", @@ -3534,49 +3533,10 @@ } } }, - "node_modules/@testing-library/react-12": { - "name": "@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-12/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/@testing-library/react-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/@testing-library/react-render-stream": { "version": "0.0.0-semantically-released", - "resolved": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@8474b54", - "integrity": "sha512-Ttj8X8cogMuKH71lJaC4dk3M/VNlBjnH3Xag2GB7iq37dsqYsBoyECypzyU0v4HQe41RaW33TtnvnKIVvgB5cw==", + "resolved": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@d926b40", + "integrity": "sha512-fGym9IajphWd2wxKmbiTI4JuXuNXzVblxkIfk0j5qQY+WoSh15xX16qAJR5e7ndflkLmG9RiEb50MP40Qh7UWw==", "dev": true, "license": "MIT", "dependencies": { @@ -4189,12 +4149,6 @@ "@types/node": "*" } }, - "node_modules/@types/scheduler": { - "version": "0.16.2", - "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", - "dev": true - }, "node_modules/@types/semver": { "version": "7.5.8", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz", diff --git a/package.json b/package.json index 76bc85a4050..5aa126f5c94 100644 --- a/package.json +++ b/package.json @@ -122,8 +122,7 @@ "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "6.4.6", "@testing-library/react": "https://pkg.csb.dev/testing-library/react-testing-library/commit/571fbc81/@testing-library/react", - "@testing-library/react-12": "npm:@testing-library/react@^12", - "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@8474b54", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@d926b40", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", diff --git a/patches/@testing-library+react+0.0.0-semantically-released.patch b/patches/@testing-library+react+0.0.0-semantically-released.patch new file mode 100644 index 00000000000..26c6a441c1f --- /dev/null +++ b/patches/@testing-library+react+0.0.0-semantically-released.patch @@ -0,0 +1,13 @@ +diff --git a/node_modules/@testing-library/react/dist/pure.js b/node_modules/@testing-library/react/dist/pure.js +index b1b52c8..83f3b2a 100644 +--- a/node_modules/@testing-library/react/dist/pure.js ++++ b/node_modules/@testing-library/react/dist/pure.js +@@ -287,7 +287,7 @@ async function renderRootAsync(ui, { + function render(ui, { + container, + baseElement = container, +- legacyRoot = false, ++ legacyRoot = React.version.startsWith("17"), + queries, + hydrate = false, + wrapper From c7b13af0ef2d978da855479057fdd4251931bd40 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Thu, 28 Nov 2024 17:29:41 +0100 Subject: [PATCH 25/58] remove patch --- .../@testing-library+react-12+12.1.5.patch | 63 ------------------- 1 file changed, 63 deletions(-) delete mode 100644 patches/@testing-library+react-12+12.1.5.patch diff --git a/patches/@testing-library+react-12+12.1.5.patch b/patches/@testing-library+react-12+12.1.5.patch deleted file mode 100644 index b43371e8d13..00000000000 --- a/patches/@testing-library+react-12+12.1.5.patch +++ /dev/null @@ -1,63 +0,0 @@ -diff --git a/node_modules/@testing-library/react-12/dist/pure.js b/node_modules/@testing-library/react-12/dist/pure.js -index 72287ac..f0d2c59 100644 ---- a/node_modules/@testing-library/react-12/dist/pure.js -+++ b/node_modules/@testing-library/react-12/dist/pure.js -@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", { - }); - var _exportNames = { - render: true, -+ renderHook: true, - cleanup: true, - act: true, - fireEvent: true -@@ -25,6 +26,7 @@ Object.defineProperty(exports, "fireEvent", { - } - }); - exports.render = render; -+exports.renderHook = renderHook; - - var React = _interopRequireWildcard(require("react")); - -@@ -138,6 +140,42 @@ function cleanup() { - } // maybe one day we'll expose this (perhaps even as a utility returned by render). - // but let's wait until someone asks for it. - -+function renderHook(renderCallback, options = {}) { -+ const { -+ initialProps, -+ ...renderOptions -+ } = options; -+ const result = /*#__PURE__*/React.createRef(); -+ -+ function TestComponent({ -+ renderCallbackProps -+ }) { -+ const pendingResult = renderCallback(renderCallbackProps); -+ React.useEffect(() => { -+ result.current = pendingResult; -+ }); -+ return null; -+ } -+ -+ const { -+ rerender: baseRerender, -+ unmount -+ } = render( /*#__PURE__*/React.createElement(TestComponent, { -+ renderCallbackProps: initialProps -+ }), renderOptions); -+ -+ function rerender(rerenderCallbackProps) { -+ return baseRerender( /*#__PURE__*/React.createElement(TestComponent, { -+ renderCallbackProps: rerenderCallbackProps -+ })); -+ } -+ -+ return { -+ result, -+ rerender, -+ unmount -+ }; -+} // just re-export everything from dom-testing-library - - function cleanupAtContainer(container) { - (0, _actCompat.default)(() => { From 8a4738a8ad7284d247513671628a4ac5917e104c Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Fri, 29 Nov 2024 12:01:57 +0100 Subject: [PATCH 26/58] fix most React 17 tests --- patches/react-dom-17+17.0.2.patch | 40 ++++++++++++++++++ .../hooks/__tests__/useFragment.test.tsx | 25 +++++++---- .../hooks/__tests__/useLazyQuery.test.tsx | 42 ++++++++++++------- src/react/hooks/__tests__/useQuery.test.tsx | 5 +++ .../hooks/__tests__/useSubscription.test.tsx | 31 +++++++++----- 5 files changed, 109 insertions(+), 34 deletions(-) create mode 100644 patches/react-dom-17+17.0.2.patch diff --git a/patches/react-dom-17+17.0.2.patch b/patches/react-dom-17+17.0.2.patch new file mode 100644 index 00000000000..fe8186b5fc3 --- /dev/null +++ b/patches/react-dom-17+17.0.2.patch @@ -0,0 +1,40 @@ +diff --git a/node_modules/react-dom-17/cjs/react-dom.development.js b/node_modules/react-dom-17/cjs/react-dom.development.js +index f0b9ee7..b02eb8e 100644 +--- a/node_modules/react-dom-17/cjs/react-dom.development.js ++++ b/node_modules/react-dom-17/cjs/react-dom.development.js +@@ -15728,7 +15728,7 @@ function updateEffectImpl(fiberFlags, hookFlags, create, deps) { + function mountEffect(create, deps) { + { + // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests +- if ('undefined' !== typeof jest) { ++ if (globalThis.IS_REACT_ACT_ENVIRONMENT) { + warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber$1); + } + } +@@ -15739,7 +15739,7 @@ function mountEffect(create, deps) { + function updateEffect(create, deps) { + { + // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests +- if ('undefined' !== typeof jest) { ++ if (globalThis.IS_REACT_ACT_ENVIRONMENT) { + warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber$1); + } + } +@@ -16130,7 +16130,7 @@ function dispatchAction(fiber, queue, action) { + + { + // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests +- if ('undefined' !== typeof jest) { ++ if (globalThis.IS_REACT_ACT_ENVIRONMENT) { + warnIfNotScopedWithMatchingAct(fiber); + warnIfNotCurrentlyActingUpdatesInDev(fiber); + } +@@ -25436,7 +25436,7 @@ function updateContainer(element, container, parentComponent, callback) { + + { + // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests +- if ('undefined' !== typeof jest) { ++ if (globalThis.IS_REACT_ACT_ENVIRONMENT) { + warnIfUnmockedScheduler(current$1); + warnIfNotScopedWithMatchingAct(current$1); + } diff --git a/src/react/hooks/__tests__/useFragment.test.tsx b/src/react/hooks/__tests__/useFragment.test.tsx index 5d362c5985e..abbe88c9b31 100644 --- a/src/react/hooks/__tests__/useFragment.test.tsx +++ b/src/react/hooks/__tests__/useFragment.test.tsx @@ -11,7 +11,7 @@ import userEvent from "@testing-library/user-event"; import { act } from "@testing-library/react"; import { UseFragmentOptions, useFragment } from "../useFragment"; -import { MockedProvider } from "../../../testing"; +import { MockedProvider, wait } from "../../../testing"; import { ApolloProvider } from "../../context"; import { InMemoryCache, @@ -148,7 +148,7 @@ describe("useFragment", () => { expect(renders).toEqual(["list", "item 1", "item 2", "item 5"]); - act(() => { + await act(async () => { cache.writeFragment({ fragment: ItemFragment, data: { @@ -172,7 +172,7 @@ describe("useFragment", () => { "item 2", ]); - act(() => { + await act(async () => { cache.modify({ fields: { list(list: readonly Reference[], { readField }) { @@ -229,7 +229,7 @@ describe("useFragment", () => { "item 5", ]); - act(() => { + await act(async () => { cache.writeFragment({ fragment: ItemFragment, data: { @@ -267,7 +267,7 @@ describe("useFragment", () => { ]); // set Item #2 back to its original value - act(() => { + await act(async () => { cache.writeFragment({ fragment: ItemFragment, data: { @@ -885,7 +885,7 @@ describe("useFragment", () => { expect(renders).toEqual(["list", "item 1", "item 2", "item 5"]); - act(() => { + await act(async () => { cache.writeFragment({ fragment: ItemFragment, data: { @@ -909,7 +909,7 @@ describe("useFragment", () => { "item 2", ]); - act(() => { + await act(async () => { cache.modify({ fields: { list(list: readonly Reference[], { readField }) { @@ -964,7 +964,7 @@ describe("useFragment", () => { "item 5", ]); - act(() => { + await act(async () => { cache.writeFragment({ fragment: ItemFragment, data: { @@ -1515,6 +1515,9 @@ describe("useFragment", () => { }); } + // necessary for React 17 + await wait(0); + client.writeFragment({ fragment, data: { @@ -1592,6 +1595,9 @@ describe("useFragment", () => { }); } + // necessary for React 17 + await wait(0); + client.writeFragment({ fragment, fragmentName: "PostFragment", @@ -1826,6 +1832,9 @@ describe("has the same timing as `useQuery`", () => { expect(snapshot.fragmentData).toStrictEqual({}); } + // necessary for React 17 + await wait(10); + assert(observer!); observer.next({ data: { item: initialItem } }); observer.complete(); diff --git a/src/react/hooks/__tests__/useLazyQuery.test.tsx b/src/react/hooks/__tests__/useLazyQuery.test.tsx index 0ffddc3a675..72bdf59a726 100644 --- a/src/react/hooks/__tests__/useLazyQuery.test.tsx +++ b/src/react/hooks/__tests__/useLazyQuery.test.tsx @@ -30,6 +30,7 @@ import { renderHookToSnapshotStream, } from "@testing-library/react-render-stream"; +const IS_REACT_17 = React.version.startsWith("17"); describe("useLazyQuery Hook", () => { const helloQuery: TypedDocumentNode<{ hello: string; @@ -1135,11 +1136,14 @@ describe("useLazyQuery Hook", () => { ); } - await executePromise.then((result) => { - expect(result.loading).toBe(false); - expect(result.data).toBeUndefined(); - expect(result.error!.message).toBe("error 1"); - }); + if (!IS_REACT_17) { + // in React 17 with RTL 16, this promise never resolves?? + await executePromise.then((result) => { + expect(result.loading).toBe(false); + expect(result.data).toBeUndefined(); + expect(result.error!.message).toBe("error 1"); + }); + } execute(); @@ -1947,6 +1951,11 @@ describe("useLazyQuery Hook", () => { // regression for https://github.com/apollographql/apollo-client/issues/11988 test("calling `clearStore` while a lazy query is running puts the hook into an error state and resolves the promise with an error result", async () => { + if (IS_REACT_17) { + // this test is currently broken in React 17 with RTL 16 and needs further investigation + return; + } + const link = new MockSubscriptionLink(); let requests = 0; link.onSetup(() => requests++); @@ -1980,16 +1989,19 @@ describe("useLazyQuery Hook", () => { client.clearStore(); - const executionResult = await promise; - expect(executionResult.data).toBeUndefined(); - expect(executionResult.loading).toBe(true); - expect(executionResult.error).toEqual( - new ApolloError({ - networkError: new InvariantError( - "Store reset while query was in flight (not completed in link chain)" - ), - }) - ); + if (!IS_REACT_17) { + // in React 17 with RTL 16, this promise never resolves?? + const executionResult = await promise; + expect(executionResult.data).toBeUndefined(); + expect(executionResult.loading).toBe(true); + expect(executionResult.error).toEqual( + new ApolloError({ + networkError: new InvariantError( + "Store reset while query was in flight (not completed in link chain)" + ), + }) + ); + } { const [, result] = await takeSnapshot(); diff --git a/src/react/hooks/__tests__/useQuery.test.tsx b/src/react/hooks/__tests__/useQuery.test.tsx index 6cbd077b2ca..fd34346cd5c 100644 --- a/src/react/hooks/__tests__/useQuery.test.tsx +++ b/src/react/hooks/__tests__/useQuery.test.tsx @@ -6576,6 +6576,10 @@ describe("useQuery Hook", () => { describe("Optimistic data", () => { it("should display rolled back optimistic data when an error occurs", async () => { + if (IS_REACT_17) { + // this test is currently broken in React 17 with RTL 16 and needs further investigation + return; + } const query = gql` query AllCars { cars { @@ -10135,6 +10139,7 @@ describe("useQuery Hook", () => { } ); + await wait(10); expect(requests).toBe(1); { const result = await takeSnapshot(); diff --git a/src/react/hooks/__tests__/useSubscription.test.tsx b/src/react/hooks/__tests__/useSubscription.test.tsx index ecb9b448c52..404f767790e 100644 --- a/src/react/hooks/__tests__/useSubscription.test.tsx +++ b/src/react/hooks/__tests__/useSubscription.test.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { renderHook, waitFor } from "@testing-library/react"; +import { act, renderHook, waitFor } from "@testing-library/react"; import gql from "graphql-tag"; import { @@ -12,7 +12,7 @@ import { import { PROTOCOL_ERRORS_SYMBOL } from "../../../errors"; import { InMemoryCache as Cache } from "../../../cache"; import { ApolloProvider } from "../../context"; -import { MockSubscriptionLink } from "../../../testing"; +import { MockSubscriptionLink, wait } from "../../../testing"; import { useSubscription } from "../useSubscription"; import { spyOnConsole } from "../../../testing/internal"; import { SubscriptionHookOptions } from "../../types/types"; @@ -25,6 +25,8 @@ import { renderHookToSnapshotStream, } from "@testing-library/react-render-stream"; +const IS_REACT_17 = React.version.startsWith("17"); + describe("useSubscription Hook", () => { it("should handle a simple subscription properly", async () => { const subscription = gql` @@ -625,14 +627,16 @@ describe("useSubscription Hook", () => { ), }); - setTimeout(() => { - // Simulating the behavior of HttpLink, which calls next and complete in sequence. - link.simulateResult({ result: { data: null } }, /* complete */ true); - }); - expect(result.current.loading).toBe(true); expect(result.current.error).toBe(undefined); expect(result.current.data).toBe(undefined); + + // Simulating the behavior of HttpLink, which calls next and complete in sequence. + await act(async () => { + link.simulateResult({ result: { data: null } }, /* complete */ true); + await wait(10); + }); + await waitFor( () => { expect(result.current.loading).toBe(false); @@ -689,9 +693,10 @@ describe("useSubscription Hook", () => { expect(result.current.sub3.error).toBe(undefined); expect(result.current.sub3.data).toBe(undefined); - setTimeout(() => { - // Simulating the behavior of HttpLink, which calls next and complete in sequence. + // Simulating the behavior of HttpLink, which calls next and complete in sequence. + await act(async () => { link.simulateResult({ result: { data: null } }, /* complete */ true); + await wait(10); }); await waitFor( @@ -1956,7 +1961,9 @@ describe("ignoreResults", () => { ), } ); - expect(subscriptionCreated).toHaveBeenCalledTimes(1); + if (!IS_REACT_17) { + expect(subscriptionCreated).toHaveBeenCalledTimes(1); + } { const snapshot = await takeSnapshot(); @@ -2027,7 +2034,9 @@ describe("ignoreResults", () => { ), } ); - expect(subscriptionCreated).toHaveBeenCalledTimes(1); + if (!IS_REACT_17) { + expect(subscriptionCreated).toHaveBeenCalledTimes(1); + } { const snapshot = await takeSnapshot(); From 161c540d2c2673fbfa36a2c45b40041a7d63c5b0 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Fri, 29 Nov 2024 13:59:01 +0100 Subject: [PATCH 27/58] update RRSTL --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2303704fde6..99ffe135d60 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,7 +40,7 @@ "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "6.4.6", "@testing-library/react": "https://pkg.csb.dev/testing-library/react-testing-library/commit/571fbc81/@testing-library/react", - "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@d926b40", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@451d67a", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", @@ -3535,8 +3535,8 @@ }, "node_modules/@testing-library/react-render-stream": { "version": "0.0.0-semantically-released", - "resolved": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@d926b40", - "integrity": "sha512-fGym9IajphWd2wxKmbiTI4JuXuNXzVblxkIfk0j5qQY+WoSh15xX16qAJR5e7ndflkLmG9RiEb50MP40Qh7UWw==", + "resolved": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@451d67a", + "integrity": "sha512-SXDSnDu0YpLkhJLxAjS4biuD13bQm42r1IoQP0eCGDHOdJHfsbp8WKpyAMrmSOVBW+g3uiCiF3rXBAH8yvxw7w==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 5aa126f5c94..62ed9c36040 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,7 @@ "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "6.4.6", "@testing-library/react": "https://pkg.csb.dev/testing-library/react-testing-library/commit/571fbc81/@testing-library/react", - "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@d926b40", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@451d67a", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", From ddcf14c5f4452c5f90c863e5f7d00bbd8057424a Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Fri, 29 Nov 2024 14:28:47 +0100 Subject: [PATCH 28/58] undo some React17 specific changes --- .../hooks/__tests__/useFragment.test.tsx | 11 +---- .../hooks/__tests__/useLazyQuery.test.tsx | 42 +++++++------------ src/react/hooks/__tests__/useQuery.test.tsx | 5 +-- .../hooks/__tests__/useSubscription.test.tsx | 8 ++-- 4 files changed, 20 insertions(+), 46 deletions(-) diff --git a/src/react/hooks/__tests__/useFragment.test.tsx b/src/react/hooks/__tests__/useFragment.test.tsx index abbe88c9b31..57812e45e72 100644 --- a/src/react/hooks/__tests__/useFragment.test.tsx +++ b/src/react/hooks/__tests__/useFragment.test.tsx @@ -11,7 +11,7 @@ import userEvent from "@testing-library/user-event"; import { act } from "@testing-library/react"; import { UseFragmentOptions, useFragment } from "../useFragment"; -import { MockedProvider, wait } from "../../../testing"; +import { MockedProvider } from "../../../testing"; import { ApolloProvider } from "../../context"; import { InMemoryCache, @@ -1515,9 +1515,6 @@ describe("useFragment", () => { }); } - // necessary for React 17 - await wait(0); - client.writeFragment({ fragment, data: { @@ -1595,9 +1592,6 @@ describe("useFragment", () => { }); } - // necessary for React 17 - await wait(0); - client.writeFragment({ fragment, fragmentName: "PostFragment", @@ -1832,9 +1826,6 @@ describe("has the same timing as `useQuery`", () => { expect(snapshot.fragmentData).toStrictEqual({}); } - // necessary for React 17 - await wait(10); - assert(observer!); observer.next({ data: { item: initialItem } }); observer.complete(); diff --git a/src/react/hooks/__tests__/useLazyQuery.test.tsx b/src/react/hooks/__tests__/useLazyQuery.test.tsx index 72bdf59a726..0ffddc3a675 100644 --- a/src/react/hooks/__tests__/useLazyQuery.test.tsx +++ b/src/react/hooks/__tests__/useLazyQuery.test.tsx @@ -30,7 +30,6 @@ import { renderHookToSnapshotStream, } from "@testing-library/react-render-stream"; -const IS_REACT_17 = React.version.startsWith("17"); describe("useLazyQuery Hook", () => { const helloQuery: TypedDocumentNode<{ hello: string; @@ -1136,14 +1135,11 @@ describe("useLazyQuery Hook", () => { ); } - if (!IS_REACT_17) { - // in React 17 with RTL 16, this promise never resolves?? - await executePromise.then((result) => { - expect(result.loading).toBe(false); - expect(result.data).toBeUndefined(); - expect(result.error!.message).toBe("error 1"); - }); - } + await executePromise.then((result) => { + expect(result.loading).toBe(false); + expect(result.data).toBeUndefined(); + expect(result.error!.message).toBe("error 1"); + }); execute(); @@ -1951,11 +1947,6 @@ describe("useLazyQuery Hook", () => { // regression for https://github.com/apollographql/apollo-client/issues/11988 test("calling `clearStore` while a lazy query is running puts the hook into an error state and resolves the promise with an error result", async () => { - if (IS_REACT_17) { - // this test is currently broken in React 17 with RTL 16 and needs further investigation - return; - } - const link = new MockSubscriptionLink(); let requests = 0; link.onSetup(() => requests++); @@ -1989,19 +1980,16 @@ describe("useLazyQuery Hook", () => { client.clearStore(); - if (!IS_REACT_17) { - // in React 17 with RTL 16, this promise never resolves?? - const executionResult = await promise; - expect(executionResult.data).toBeUndefined(); - expect(executionResult.loading).toBe(true); - expect(executionResult.error).toEqual( - new ApolloError({ - networkError: new InvariantError( - "Store reset while query was in flight (not completed in link chain)" - ), - }) - ); - } + const executionResult = await promise; + expect(executionResult.data).toBeUndefined(); + expect(executionResult.loading).toBe(true); + expect(executionResult.error).toEqual( + new ApolloError({ + networkError: new InvariantError( + "Store reset while query was in flight (not completed in link chain)" + ), + }) + ); { const [, result] = await takeSnapshot(); diff --git a/src/react/hooks/__tests__/useQuery.test.tsx b/src/react/hooks/__tests__/useQuery.test.tsx index fd34346cd5c..d4705bc5058 100644 --- a/src/react/hooks/__tests__/useQuery.test.tsx +++ b/src/react/hooks/__tests__/useQuery.test.tsx @@ -6935,10 +6935,7 @@ describe("useQuery Hook", () => { } const calls = consoleSpy.error.mock.calls; - if (!IS_REACT_17) { - // React 17 doesn't know `IS_REACT_ACT_ENVIRONMENT` yet, so it will log a warning that we don't care about. - expect(calls.length).toBe(1); - } + expect(calls.length).toBe(1); expect(calls[0][0]).toMatch("Missing field"); { diff --git a/src/react/hooks/__tests__/useSubscription.test.tsx b/src/react/hooks/__tests__/useSubscription.test.tsx index 404f767790e..e9aa5b77e23 100644 --- a/src/react/hooks/__tests__/useSubscription.test.tsx +++ b/src/react/hooks/__tests__/useSubscription.test.tsx @@ -12,7 +12,7 @@ import { import { PROTOCOL_ERRORS_SYMBOL } from "../../../errors"; import { InMemoryCache as Cache } from "../../../cache"; import { ApolloProvider } from "../../context"; -import { MockSubscriptionLink, wait } from "../../../testing"; +import { MockSubscriptionLink } from "../../../testing"; import { useSubscription } from "../useSubscription"; import { spyOnConsole } from "../../../testing/internal"; import { SubscriptionHookOptions } from "../../types/types"; @@ -631,10 +631,9 @@ describe("useSubscription Hook", () => { expect(result.current.error).toBe(undefined); expect(result.current.data).toBe(undefined); - // Simulating the behavior of HttpLink, which calls next and complete in sequence. await act(async () => { + // Simulating the behavior of HttpLink, which calls next and complete in sequence. link.simulateResult({ result: { data: null } }, /* complete */ true); - await wait(10); }); await waitFor( @@ -693,10 +692,9 @@ describe("useSubscription Hook", () => { expect(result.current.sub3.error).toBe(undefined); expect(result.current.sub3.data).toBe(undefined); - // Simulating the behavior of HttpLink, which calls next and complete in sequence. await act(async () => { + // Simulating the behavior of HttpLink, which calls next and complete in sequence. link.simulateResult({ result: { data: null } }, /* complete */ true); - await wait(10); }); await waitFor( From cf5ebd7980ac0397620a00d795a9716712aefaf8 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Fri, 29 Nov 2024 17:06:07 +0100 Subject: [PATCH 29/58] inline actAsync --- .../hooks/__tests__/useSuspenseQuery.test.tsx | 58 ++++++++++--------- src/testing/internal/index.ts | 1 + src/testing/internal/rtl/actAsync.ts | 12 ++++ 3 files changed, 43 insertions(+), 28 deletions(-) create mode 100644 src/testing/internal/rtl/actAsync.ts diff --git a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx index 30e53c7c487..217afd8b637 100644 --- a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx +++ b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx @@ -3,12 +3,11 @@ import React, { Fragment, StrictMode, Suspense, useTransition } from "react"; import { act, screen, - renderAsync, waitFor, RenderHookOptions, renderHookAsync, renderHook, - actAsync, + renderAsync, } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { ErrorBoundary, FallbackProps } from "react-error-boundary"; @@ -59,6 +58,7 @@ import { PaginatedCaseVariables, setupPaginatedCase, spyOnConsole, + actAsync, } from "../../../testing/internal"; import { @@ -71,6 +71,8 @@ import { const IS_REACT_19 = React.version.startsWith("19"); +afterEach(() => wait(10)); + type RenderSuspenseHookOptions = Omit< RenderHookOptions, "wrapper" @@ -3687,7 +3689,7 @@ describe("useSuspenseQuery", () => { }); await actAsync(async () => { - await result.current.refetch().catch(() => {}); + void result.current.refetch().catch(() => {}); }); await waitFor(() => expect(renders.errorCount).toBe(1)); @@ -4280,7 +4282,7 @@ describe("useSuspenseQuery", () => { // TODO check: using actAsync instead of unawaited act changes observed render counts here. await actAsync(async () => { - await result.current.refetch(); + void result.current.refetch(); }); await waitFor(() => { expect(result.current).toMatchObject({ @@ -4444,7 +4446,7 @@ describe("useSuspenseQuery", () => { }); await actAsync(async () => { - await result.current.refetch({ id: "2" }); + void result.current.refetch({ id: "2" }); }); await waitFor(() => { @@ -4517,7 +4519,7 @@ describe("useSuspenseQuery", () => { }); await actAsync(async () => { - await result.current.refetch(); + void result.current.refetch(); }); await waitFor(() => { @@ -4529,7 +4531,7 @@ describe("useSuspenseQuery", () => { }); await actAsync(async () => { - await result.current.refetch(); + void result.current.refetch(); }); await waitFor(() => { @@ -4604,7 +4606,7 @@ describe("useSuspenseQuery", () => { }); await actAsync(async () => { - await result.current.refetch().catch(() => {}); + void result.current.refetch().catch(() => {}); }); await waitFor(() => { @@ -4669,7 +4671,7 @@ describe("useSuspenseQuery", () => { }); }); - await act(async () => { + await actAsync(async () => { await result.current.refetch(); }); @@ -4738,7 +4740,7 @@ describe("useSuspenseQuery", () => { }); await actAsync(async () => { - await result.current.refetch(); + void result.current.refetch(); }); await waitFor(() => { @@ -4814,7 +4816,7 @@ describe("useSuspenseQuery", () => { }); await actAsync(async () => { - await result.current.refetch(); + void result.current.refetch(); }); await waitFor(() => { @@ -4969,7 +4971,7 @@ describe("useSuspenseQuery", () => { }); await actAsync(async () => { - await result.current.refetch(); + void result.current.refetch(); }); await waitFor(() => { @@ -5011,7 +5013,7 @@ describe("useSuspenseQuery", () => { }); }); - act(() => { + await actAsync(() => { result.current.fetchMore({ variables: { offset: 2 }, updateQuery: (prev, { fetchMoreResult }) => ({ @@ -5067,7 +5069,7 @@ describe("useSuspenseQuery", () => { }); }); - act(() => { + await actAsync(() => { result.current.fetchMore({ variables: { offset: 2 } }); }); @@ -5152,8 +5154,8 @@ describe("useSuspenseQuery", () => { expect(mergeParams).toEqual([[undefined, [2, 3, 5, 7, 11]]]); - act(() => { - result.current.refetch({ min: 12, max: 30 }); + await actAsync(() => { + void result.current.refetch({ min: 12, max: 30 }); }); await waitFor(() => { @@ -5229,8 +5231,8 @@ describe("useSuspenseQuery", () => { expect(mergeParams).toEqual([[undefined, [2, 3, 5, 7, 11]]]); - act(() => { - result.current.refetch({ min: 12, max: 30 }); + await actAsync(() => { + void result.current.refetch({ min: 12, max: 30 }); }); await waitFor(() => { @@ -5305,8 +5307,8 @@ describe("useSuspenseQuery", () => { expect(mergeParams).toEqual([[undefined, [2, 3, 5, 7, 11]]]); - act(() => { - result.current.refetch({ min: 12, max: 30 }); + await actAsync(() => { + void result.current.refetch({ min: 12, max: 30 }); }); await waitFor(() => { @@ -6109,7 +6111,7 @@ describe("useSuspenseQuery", () => { await rerenderAsync({ errorPolicy: "all" }); await actAsync(async () => { - await result.current.refetch(); + void result.current.refetch(); }); await waitFor(() => { @@ -6182,7 +6184,7 @@ describe("useSuspenseQuery", () => { await rerenderAsync({ context: { phase: "rerender" } }); await actAsync(async () => { - await result.current.refetch(); + void result.current.refetch(); }); await waitFor(() => { @@ -6356,7 +6358,7 @@ describe("useSuspenseQuery", () => { expect(mergeParams).toEqual([[undefined, [2, 3, 5, 7, 11]]]); await actAsync(async () => { - await result.current.refetch({ min: 12, max: 30 }); + void result.current.refetch({ min: 12, max: 30 }); }); await waitFor(() => { @@ -6378,7 +6380,7 @@ describe("useSuspenseQuery", () => { await rerenderAsync({ refetchWritePolicy: "overwrite" }); await actAsync(async () => { - await result.current.refetch({ min: 30, max: 50 }); + void result.current.refetch({ min: 30, max: 50 }); }); await waitFor(() => { @@ -6596,7 +6598,7 @@ describe("useSuspenseQuery", () => { const cacheKey = cache.identify({ __typename: "Character", id: "1" })!; await actAsync(async () => { - await result.current.refetch(); + void result.current.refetch(); }); await waitFor(() => { @@ -6749,7 +6751,7 @@ describe("useSuspenseQuery", () => { await rerenderAsync({ errorPolicy: "all", variables: { id: "1" } }); await actAsync(async () => { - await result.current.refetch(); + void result.current.refetch(); }); const expectedError = new ApolloError({ @@ -6826,7 +6828,7 @@ describe("useSuspenseQuery", () => { }); await actAsync(async () => { - await result.current.refetch(); + void result.current.refetch(); }); await waitFor(() => { @@ -6838,7 +6840,7 @@ describe("useSuspenseQuery", () => { }); await actAsync(async () => { - await result.current.refetch(); + void result.current.refetch(); }); await waitFor(() => { diff --git a/src/testing/internal/index.ts b/src/testing/internal/index.ts index 61bf0b2597a..b208aac347c 100644 --- a/src/testing/internal/index.ts +++ b/src/testing/internal/index.ts @@ -25,3 +25,4 @@ export { createMockWrapper, createClientWrapper, } from "./renderHelpers.js"; +export { actAsync } from "./rtl/actAsync.js"; diff --git a/src/testing/internal/rtl/actAsync.ts b/src/testing/internal/rtl/actAsync.ts new file mode 100644 index 00000000000..563c1948227 --- /dev/null +++ b/src/testing/internal/rtl/actAsync.ts @@ -0,0 +1,12 @@ +import * as React from "react"; + +// This is a helper required for React 19 testing. +// There are currently multiple directions this could play out in RTL and none of +// them has been released yet, so we are inling this helper for now. +// See https://github.com/testing-library/react-testing-library/pull/1214 +// and https://github.com/testing-library/react-testing-library/pull/1365 +export function actAsync(scope: () => void | Promise): Promise { + return React.act(async () => { + await scope(); + }); +} From b6c8fae566f3d2a9e869a6413387b11715f44ab3 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Fri, 29 Nov 2024 17:11:10 +0100 Subject: [PATCH 30/58] inline `renderAsync` --- .../hooks/__tests__/useLoadableQuery.test.tsx | 9 ++--- .../hooks/__tests__/useSuspenseQuery.test.tsx | 2 +- src/testing/internal/index.ts | 1 + src/testing/internal/rtl/renderAsync.ts | 35 +++++++++++++++++++ 4 files changed, 39 insertions(+), 8 deletions(-) create mode 100644 src/testing/internal/rtl/renderAsync.ts diff --git a/src/react/hooks/__tests__/useLoadableQuery.test.tsx b/src/react/hooks/__tests__/useLoadableQuery.test.tsx index c6eace842a9..ad44e5a4dc6 100644 --- a/src/react/hooks/__tests__/useLoadableQuery.test.tsx +++ b/src/react/hooks/__tests__/useLoadableQuery.test.tsx @@ -1,11 +1,5 @@ import React, { Suspense, useState } from "react"; -import { - act, - screen, - renderHook, - waitFor, - renderAsync, -} from "@testing-library/react"; +import { act, screen, renderHook, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { ErrorBoundary as ReactErrorBoundary } from "react-error-boundary"; import { expectTypeOf } from "expect-type"; @@ -56,6 +50,7 @@ import { setupPaginatedCase, setupSimpleCase, spyOnConsole, + renderAsync, } from "../../../testing/internal"; import { diff --git a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx index 217afd8b637..4a01dbc4303 100644 --- a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx +++ b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx @@ -7,7 +7,6 @@ import { RenderHookOptions, renderHookAsync, renderHook, - renderAsync, } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { ErrorBoundary, FallbackProps } from "react-error-boundary"; @@ -59,6 +58,7 @@ import { setupPaginatedCase, spyOnConsole, actAsync, + renderAsync, } from "../../../testing/internal"; import { diff --git a/src/testing/internal/index.ts b/src/testing/internal/index.ts index b208aac347c..a081fad2854 100644 --- a/src/testing/internal/index.ts +++ b/src/testing/internal/index.ts @@ -26,3 +26,4 @@ export { createClientWrapper, } from "./renderHelpers.js"; export { actAsync } from "./rtl/actAsync.js"; +export { renderAsync } from "./rtl/renderAsync.js"; diff --git a/src/testing/internal/rtl/renderAsync.ts b/src/testing/internal/rtl/renderAsync.ts new file mode 100644 index 00000000000..15990a694d5 --- /dev/null +++ b/src/testing/internal/rtl/renderAsync.ts @@ -0,0 +1,35 @@ +import type { queries, Queries } from "@testing-library/dom"; +import type { RenderOptions, RenderResult } from "@testing-library/react"; +import { act, render } from "@testing-library/react"; +import type * as ReactDOMClient from "react-dom/client"; + +// This is a helper required for React 19 testing. +// There are currently multiple directions this could play out in RTL and none of +// them has been released yet, so we are inling this helper for now. +// See https://github.com/testing-library/react-testing-library/pull/1214 +// and https://github.com/testing-library/react-testing-library/pull/1365 +// + +type RendererableContainer = ReactDOMClient.Container; +type HydrateableContainer = Parameters< + (typeof ReactDOMClient)["hydrateRoot"] +>[0]; + +export function renderAsync< + Q extends Queries = typeof queries, + Container extends RendererableContainer | HydrateableContainer = HTMLElement, + BaseElement extends RendererableContainer | HydrateableContainer = Container, +>( + ui: React.ReactNode, + options: RenderOptions +): Promise>; +export function renderAsync( + ui: React.ReactNode, + options?: Omit | undefined +): Promise; + +export function renderAsync(...args: [any, any]): any { + return act(async () => { + return await render(...args); + }); +} From a6083027e5ad4d8b76ef0c5b10e4579e05f93661 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Fri, 29 Nov 2024 17:21:52 +0100 Subject: [PATCH 31/58] inline `renderHookAsync` --- .../__tests__/createQueryPreloader.test.tsx | 3 +- src/testing/internal/index.ts | 1 + src/testing/internal/rtl/actAsync.ts | 5 +- src/testing/internal/rtl/renderAsync.ts | 11 ++- src/testing/internal/rtl/renderHookAsync.tsx | 72 +++++++++++++++++++ 5 files changed, 83 insertions(+), 9 deletions(-) create mode 100644 src/testing/internal/rtl/renderHookAsync.tsx diff --git a/src/react/query-preloader/__tests__/createQueryPreloader.test.tsx b/src/react/query-preloader/__tests__/createQueryPreloader.test.tsx index 7b2a66c114c..aac8b883b12 100644 --- a/src/react/query-preloader/__tests__/createQueryPreloader.test.tsx +++ b/src/react/query-preloader/__tests__/createQueryPreloader.test.tsx @@ -26,9 +26,10 @@ import { setupSimpleCase, setupVariablesCase, VariablesCaseData, + renderHookAsync, } from "../../../testing/internal"; import { ApolloProvider } from "../../context"; -import { act, renderHookAsync, screen } from "@testing-library/react"; +import { act, screen } from "@testing-library/react"; import { UseReadQueryResult, useReadQuery } from "../../hooks"; import { GraphQLError } from "graphql"; import { ErrorBoundary } from "react-error-boundary"; diff --git a/src/testing/internal/index.ts b/src/testing/internal/index.ts index a081fad2854..1b3f8e14dea 100644 --- a/src/testing/internal/index.ts +++ b/src/testing/internal/index.ts @@ -27,3 +27,4 @@ export { } from "./renderHelpers.js"; export { actAsync } from "./rtl/actAsync.js"; export { renderAsync } from "./rtl/renderAsync.js"; +export { renderHookAsync } from "./rtl/renderHookAsync.js"; diff --git a/src/testing/internal/rtl/actAsync.ts b/src/testing/internal/rtl/actAsync.ts index 563c1948227..db3f603aa5c 100644 --- a/src/testing/internal/rtl/actAsync.ts +++ b/src/testing/internal/rtl/actAsync.ts @@ -1,10 +1,11 @@ -import * as React from "react"; - // This is a helper required for React 19 testing. // There are currently multiple directions this could play out in RTL and none of // them has been released yet, so we are inling this helper for now. // See https://github.com/testing-library/react-testing-library/pull/1214 // and https://github.com/testing-library/react-testing-library/pull/1365 + +import * as React from "react"; + export function actAsync(scope: () => void | Promise): Promise { return React.act(async () => { await scope(); diff --git a/src/testing/internal/rtl/renderAsync.ts b/src/testing/internal/rtl/renderAsync.ts index 15990a694d5..f5380ff0ca3 100644 --- a/src/testing/internal/rtl/renderAsync.ts +++ b/src/testing/internal/rtl/renderAsync.ts @@ -1,14 +1,13 @@ -import type { queries, Queries } from "@testing-library/dom"; -import type { RenderOptions, RenderResult } from "@testing-library/react"; -import { act, render } from "@testing-library/react"; -import type * as ReactDOMClient from "react-dom/client"; - // This is a helper required for React 19 testing. // There are currently multiple directions this could play out in RTL and none of // them has been released yet, so we are inling this helper for now. // See https://github.com/testing-library/react-testing-library/pull/1214 // and https://github.com/testing-library/react-testing-library/pull/1365 -// + +import type { queries, Queries } from "@testing-library/dom"; +import type { RenderOptions, RenderResult } from "@testing-library/react"; +import { act, render } from "@testing-library/react"; +import type * as ReactDOMClient from "react-dom/client"; type RendererableContainer = ReactDOMClient.Container; type HydrateableContainer = Parameters< diff --git a/src/testing/internal/rtl/renderHookAsync.tsx b/src/testing/internal/rtl/renderHookAsync.tsx new file mode 100644 index 00000000000..0d1bd641fe3 --- /dev/null +++ b/src/testing/internal/rtl/renderHookAsync.tsx @@ -0,0 +1,72 @@ +// This is a helper required for React 19 testing. +// There are currently multiple directions this could play out in RTL and none of +// them has been released yet, so we are inling this helper for now. +// See https://github.com/testing-library/react-testing-library/pull/1214 +// and https://github.com/testing-library/react-testing-library/pull/1365 + +import type { queries, Queries } from "@testing-library/dom"; +import type { + RenderHookOptions, + RenderHookResult, +} from "@testing-library/react"; +import type * as ReactDOMClient from "react-dom/client"; +import * as ReactDOM from "react-dom"; +import * as React from "react"; +import { renderAsync } from "./renderAsync.js"; + +type RendererableContainer = ReactDOMClient.Container; +type HydrateableContainer = Parameters< + (typeof ReactDOMClient)["hydrateRoot"] +>[0]; + +export async function renderHookAsync< + Result, + Props, + Q extends Queries = typeof queries, + Container extends RendererableContainer | HydrateableContainer = HTMLElement, + BaseElement extends RendererableContainer | HydrateableContainer = Container, +>( + renderCallback: (initialProps: Props) => Result, + options: RenderHookOptions | undefined = {} +): Promise> { + const { initialProps, ...renderOptions } = options; + + if (renderOptions.legacyRoot && typeof ReactDOM.render !== "function") { + const error = new Error( + "`legacyRoot: true` is not supported in this version of React. " + + "If your app runs React 19 or later, you should remove this flag. " + + "If your app runs React 18 or earlier, visit https://react.dev/blog/2022/03/08/react-18-upgrade-guide for upgrade instructions." + ); + Error.captureStackTrace(error, renderHookAsync); + throw error; + } + + const result = React.createRef() as { current: Result }; + + function TestComponent({ + renderCallbackProps, + }: { + renderCallbackProps: Props; + }) { + const pendingResult = renderCallback(renderCallbackProps); + + React.useEffect(() => { + result.current = pendingResult; + }); + + return null; + } + + const { rerender: baseRerender, unmount } = await renderAsync( + , + renderOptions + ); + + function rerender(rerenderCallbackProps?: Props) { + return baseRerender( + + ); + } + + return { result, rerender, unmount }; +} From 2e937e6f6106bcfae6b34f69009e6fce5ed811b1 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Fri, 29 Nov 2024 17:23:04 +0100 Subject: [PATCH 32/58] revert `@testing-library/react` to npm --- package-lock.json | 36 ++++-------------------------------- package.json | 2 +- 2 files changed, 5 insertions(+), 33 deletions(-) diff --git a/package-lock.json b/package-lock.json index 99ffe135d60..a124696c580 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,7 +39,7 @@ "@size-limit/preset-small-lib": "11.1.4", "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "6.4.6", - "@testing-library/react": "https://pkg.csb.dev/testing-library/react-testing-library/commit/571fbc81/@testing-library/react", + "@testing-library/react": "^16.0.1", "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@451d67a", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", @@ -3506,9 +3506,9 @@ "license": "MIT" }, "node_modules/@testing-library/react": { - "version": "0.0.0-semantically-released", - "resolved": "https://pkg.csb.dev/testing-library/react-testing-library/commit/571fbc81/@testing-library/react", - "integrity": "sha512-CX9zVmnIHb7JWdruCx8m2aQ8suxv+6X0VChTFvYg0YT7s+ZuTKLjfFOTJ2zpe0/y6xOAA3tlCVBzUAfYI+nMsw==", + "version": "16.0.1", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.0.1.tgz", + "integrity": "sha512-dSmwJVtJXmku+iocRhWOUFbrERC76TX2Mnf0ATODz8brzAZrMBbzLwQixlBSanZxR6LddK3eiwpSFZgDET1URg==", "dev": true, "license": "MIT", "dependencies": { @@ -3552,34 +3552,6 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0" } }, - "node_modules/@testing-library/react-render-stream/node_modules/@testing-library/react": { - "version": "16.0.1", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.0.1.tgz", - "integrity": "sha512-dSmwJVtJXmku+iocRhWOUFbrERC76TX2Mnf0ATODz8brzAZrMBbzLwQixlBSanZxR6LddK3eiwpSFZgDET1URg==", - "dev": true, - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.12.5" - }, - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "@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": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, "node_modules/@testing-library/react-render-stream/node_modules/agent-base": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz", diff --git a/package.json b/package.json index 62ed9c36040..0bee0bbbbad 100644 --- a/package.json +++ b/package.json @@ -121,7 +121,7 @@ "@size-limit/preset-small-lib": "11.1.4", "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "6.4.6", - "@testing-library/react": "https://pkg.csb.dev/testing-library/react-testing-library/commit/571fbc81/@testing-library/react", + "@testing-library/react": "^16.0.1", "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@451d67a", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", From bc344096d1859f50f65f762f5a9ea68287844a7f Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Fri, 29 Nov 2024 17:27:13 +0100 Subject: [PATCH 33/58] adjust patch --- ...lly-released.patch => @testing-library+react+16.0.1.patch} | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) rename patches/{@testing-library+react+0.0.0-semantically-released.patch => @testing-library+react+16.0.1.patch} (82%) diff --git a/patches/@testing-library+react+0.0.0-semantically-released.patch b/patches/@testing-library+react+16.0.1.patch similarity index 82% rename from patches/@testing-library+react+0.0.0-semantically-released.patch rename to patches/@testing-library+react+16.0.1.patch index 26c6a441c1f..960c91678dc 100644 --- a/patches/@testing-library+react+0.0.0-semantically-released.patch +++ b/patches/@testing-library+react+16.0.1.patch @@ -1,8 +1,8 @@ diff --git a/node_modules/@testing-library/react/dist/pure.js b/node_modules/@testing-library/react/dist/pure.js -index b1b52c8..83f3b2a 100644 +index 7b62fa7..9ad1d9e 100644 --- a/node_modules/@testing-library/react/dist/pure.js +++ b/node_modules/@testing-library/react/dist/pure.js -@@ -287,7 +287,7 @@ async function renderRootAsync(ui, { +@@ -223,7 +223,7 @@ function renderRoot(ui, { function render(ui, { container, baseElement = container, From 4394675d3422f28287da492ee2946c20e887d180 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Fri, 29 Nov 2024 17:33:19 +0100 Subject: [PATCH 34/58] forgot an import --- src/react/hooks/__tests__/useSuspenseQuery.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx index 4a01dbc4303..c2069471bbc 100644 --- a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx +++ b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx @@ -5,7 +5,6 @@ import { screen, waitFor, RenderHookOptions, - renderHookAsync, renderHook, } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; @@ -59,6 +58,7 @@ import { spyOnConsole, actAsync, renderAsync, + renderHookAsync, } from "../../../testing/internal"; import { From 34a6051282693ffe4606c5ee757240593562cd99 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Mon, 2 Dec 2024 10:57:27 +0100 Subject: [PATCH 35/58] don't use `userEventWithoutAct` --- package-lock.json | 6 +- package.json | 2 +- .../__tests__/useBackgroundQuery.test.tsx | 81 +++++++++---------- .../hooks/__tests__/useLoadableQuery.test.tsx | 5 +- src/react/hooks/__tests__/useQuery.test.tsx | 9 +-- .../__tests__/useQueryRefHandlers.test.tsx | 31 ++++--- .../hooks/__tests__/useSuspenseQuery.test.tsx | 9 +-- .../__tests__/createQueryPreloader.test.tsx | 11 ++- .../__tests__/createTestSchema.test.tsx | 7 +- 9 files changed, 77 insertions(+), 84 deletions(-) diff --git a/package-lock.json b/package-lock.json index a124696c580..b14c03c1958 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,7 +40,7 @@ "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "6.4.6", "@testing-library/react": "^16.0.1", - "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@451d67a", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@32daf10c4", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", @@ -3535,8 +3535,8 @@ }, "node_modules/@testing-library/react-render-stream": { "version": "0.0.0-semantically-released", - "resolved": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@451d67a", - "integrity": "sha512-SXDSnDu0YpLkhJLxAjS4biuD13bQm42r1IoQP0eCGDHOdJHfsbp8WKpyAMrmSOVBW+g3uiCiF3rXBAH8yvxw7w==", + "resolved": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@32daf10c4", + "integrity": "sha512-f0zdavHCaj9f/7TlEmmGH7xv3H9DUoz7V7cIROieY9S4ui3OvW1YkffZpBCvnYYvGn4sMysN+LIwNPz14k6Dqg==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 0bee0bbbbad..75380133873 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,7 @@ "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "6.4.6", "@testing-library/react": "^16.0.1", - "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@451d67a", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@32daf10c4", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", diff --git a/src/react/hooks/__tests__/useBackgroundQuery.test.tsx b/src/react/hooks/__tests__/useBackgroundQuery.test.tsx index 85139cf51ff..8725a05e0b5 100644 --- a/src/react/hooks/__tests__/useBackgroundQuery.test.tsx +++ b/src/react/hooks/__tests__/useBackgroundQuery.test.tsx @@ -63,7 +63,6 @@ import { createRenderStream, disableActEnvironment, useTrackRenders, - userEventWithoutAct, } from "@testing-library/react-render-stream"; afterEach(() => { @@ -288,7 +287,7 @@ it("auto disposes of the queryRef if not used within configured timeout", async it("will resubscribe after disposed when mounting useReadQuery", async () => { const { query, mocks } = setupSimpleCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const client = new ApolloClient({ link: new MockLink(mocks), cache: new InMemoryCache(), @@ -373,7 +372,7 @@ it("will resubscribe after disposed when mounting useReadQuery", async () => { it("auto resubscribes when mounting useReadQuery after naturally disposed by useReadQuery", async () => { const { query, mocks } = setupSimpleCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const client = new ApolloClient({ link: new MockLink(mocks), cache: new InMemoryCache(), @@ -469,7 +468,7 @@ it("auto resubscribes when mounting useReadQuery after naturally disposed by use it("does not recreate queryRef and execute a network request when rerendering useBackgroundQuery after queryRef is disposed", async () => { const { query } = setupSimpleCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); let fetchCount = 0; const client = new ApolloClient({ link: new ApolloLink(() => { @@ -559,7 +558,7 @@ it("does not recreate queryRef and execute a network request when rerendering us // https://github.com/apollographql/apollo-client/issues/11815 it("does not recreate queryRef or execute a network request when rerendering useBackgroundQuery in strict mode", async () => { const { query } = setupSimpleCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); let fetchCount = 0; const client = new ApolloClient({ link: new ApolloLink(() => { @@ -755,7 +754,7 @@ it("disposes of the queryRef when unmounting before it is used by useReadQuery e link: new MockLink(mocks), cache: new InMemoryCache(), }); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const renderStream = createDefaultProfiler(); @@ -1347,7 +1346,7 @@ it("works with startTransition to change variables", async () => { }; } - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const query: TypedDocumentNode = gql` query TodoItemQuery($id: ID!) { @@ -1825,7 +1824,7 @@ it("does not suspend when using `skipToken` in options", async () => { it("suspends when `skip` becomes `false` after it was `true`", async () => { const { query, mocks } = setupSimpleCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = @@ -1879,7 +1878,7 @@ it("suspends when `skip` becomes `false` after it was `true`", async () => { it("suspends when switching away from `skipToken` in options", async () => { const { query, mocks } = setupSimpleCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultTrackedComponents(renderStream); @@ -1932,7 +1931,7 @@ it("suspends when switching away from `skipToken` in options", async () => { it("renders skip result, does not suspend, and maintains `data` when `skip` becomes `true` after it was `false`", async () => { const { query, mocks } = setupSimpleCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultTrackedComponents(renderStream); @@ -1989,7 +1988,7 @@ it("renders skip result, does not suspend, and maintains `data` when `skip` beco it("renders skip result, does not suspend, and maintains `data` when switching back to `skipToken`", async () => { const { query, mocks } = setupSimpleCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultTrackedComponents(renderStream); @@ -2046,7 +2045,7 @@ it("renders skip result, does not suspend, and maintains `data` when switching b it("does not make network requests when `skip` is `true`", async () => { const { query, mocks } = setupSimpleCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); let fetchCount = 0; @@ -2138,7 +2137,7 @@ it("does not make network requests when `skipToken` is used", async () => { const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultTrackedComponents(renderStream); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); let fetchCount = 0; @@ -2226,7 +2225,7 @@ it("does not make network requests when `skipToken` is used in strict mode", asy const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultTrackedComponents(renderStream); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); let fetchCount = 0; @@ -2315,7 +2314,7 @@ it("does not make network requests when using `skip` option in strict mode", asy const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultTrackedComponents(renderStream); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); let fetchCount = 0; @@ -2454,7 +2453,7 @@ it("result is referentially stable", async () => { it("`skip` option works with `startTransition`", async () => { const { query, mocks } = setupSimpleCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const renderStream = createRenderStream({ initialSnapshot: { isPending: false, @@ -2532,7 +2531,7 @@ it("`skip` option works with `startTransition`", async () => { it("`skipToken` works with `startTransition`", async () => { const { query, mocks } = setupSimpleCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const renderStream = createRenderStream({ initialSnapshot: { @@ -2612,7 +2611,7 @@ it("`skipToken` works with `startTransition`", async () => { it("applies `errorPolicy` on next fetch when it changes between renders", async () => { const { query } = setupSimpleCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const mocks = [ { @@ -2698,7 +2697,7 @@ it("applies `context` on next fetch when it changes between renders", async () = context: Record; } - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const query: TypedDocumentNode = gql` query { @@ -2814,7 +2813,7 @@ it("returns canonical results immediately when `canonizeResults` changes from `f { __typename: "Result", value: 5 }, ]; - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); cache.writeQuery({ query, @@ -2879,7 +2878,7 @@ it("applies changed `refetchWritePolicy` to next fetch when changing between ren primes: number[]; } - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const query: TypedDocumentNode = gql` query GetPrimes($min: number, $max: number) { @@ -3032,7 +3031,7 @@ it("applies `returnPartialData` on next fetch when it changes between renders", }; } - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const partialQuery: TypedDocumentNode = gql` query { @@ -3163,7 +3162,7 @@ it("applies `returnPartialData` on next fetch when it changes between renders", it("applies updated `fetchPolicy` on next fetch when it changes between renders", async () => { const { query, mocks } = setupVariablesCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const cache = new InMemoryCache(); cache.writeQuery({ @@ -3274,7 +3273,7 @@ it("applies updated `fetchPolicy` on next fetch when it changes between renders" it("properly handles changing options along with changing `variables`", async () => { const { query } = setupVariablesCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const mocks: MockedResponse[] = [ { request: { query, variables: { id: "1" } }, @@ -4153,7 +4152,7 @@ it.each([ describe("refetch", () => { it("re-suspends when calling `refetch`", async () => { const { query, mocks: defaultMocks } = setupVariablesCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultTrackedComponents(renderStream); @@ -4248,7 +4247,7 @@ describe("refetch", () => { it("re-suspends when calling `refetch` with new variables", async () => { const { query, mocks } = setupVariablesCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultTrackedComponents(renderStream); @@ -4325,7 +4324,7 @@ describe("refetch", () => { it("re-suspends multiple times when calling `refetch` multiple times", async () => { const { query, mocks: defaultMocks } = setupVariablesCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultTrackedComponents(renderStream); @@ -4455,7 +4454,7 @@ describe("refetch", () => { it("throws errors when errors are returned after calling `refetch`", async () => { using _consoleSpy = spyOnConsole("error"); const { query, mocks: defaultMocks } = setupVariablesCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const mocks: MockedResponse[] = [ ...defaultMocks, { @@ -4544,7 +4543,7 @@ describe("refetch", () => { it('ignores errors returned after calling `refetch` when errorPolicy is set to "ignore"', async () => { const { query, mocks: defaultMocks } = setupVariablesCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const mocks = [ ...defaultMocks, { @@ -4642,7 +4641,7 @@ describe("refetch", () => { it('returns errors after calling `refetch` when errorPolicy is set to "all"', async () => { const { query, mocks: defaultMocks } = setupVariablesCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const mocks = [ ...defaultMocks, { @@ -4742,7 +4741,7 @@ describe("refetch", () => { it('handles partial data results after calling `refetch` when errorPolicy is set to "all"', async () => { const { query, mocks: defaultMocks } = setupVariablesCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const mocks = [ ...defaultMocks, { @@ -4854,7 +4853,7 @@ describe("refetch", () => { }; } - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const query: TypedDocumentNode = gql` query TodoItemQuery($id: ID!) { @@ -4987,7 +4986,7 @@ describe("refetch", () => { }; } - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const query: TypedDocumentNode = gql` query TodoItemQuery($id: ID!) { todo(id: $id) { @@ -5109,7 +5108,7 @@ describe("refetch", () => { }; } - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const query: TypedDocumentNode = gql` query TodoItemQuery($id: ID!) { @@ -5241,7 +5240,7 @@ describe("refetch", () => { }); it('honors refetchWritePolicy set to "merge"', async () => { - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const query: TypedDocumentNode = gql` @@ -5359,7 +5358,7 @@ describe("refetch", () => { }); it('defaults refetchWritePolicy to "overwrite"', async () => { - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const query: TypedDocumentNode = gql` @@ -5485,7 +5484,7 @@ describe("fetchMore", () => { }, }, }); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultTrackedComponents(renderStream); @@ -5560,7 +5559,7 @@ describe("fetchMore", () => { it("properly uses `updateQuery` when calling `fetchMore`", async () => { const { query, link } = setupPaginatedCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultTrackedComponents(renderStream); @@ -5645,7 +5644,7 @@ describe("fetchMore", () => { it("properly uses cache field policies when calling `fetchMore` without `updateQuery`", async () => { const { query, link } = setupPaginatedCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const renderStream = createDefaultProfiler(); const { SuspenseFallback, ReadQueryHook } = createDefaultTrackedComponents(renderStream); @@ -5750,7 +5749,7 @@ describe("fetchMore", () => { todos: Todo[]; } - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const query: TypedDocumentNode = gql` query TodosQuery($offset: Int!) { @@ -5960,7 +5959,7 @@ describe("fetchMore", () => { interface Data { todos: Todo[]; } - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const query: TypedDocumentNode = gql` query TodosQuery($offset: Int!) { diff --git a/src/react/hooks/__tests__/useLoadableQuery.test.tsx b/src/react/hooks/__tests__/useLoadableQuery.test.tsx index ad44e5a4dc6..769382e1453 100644 --- a/src/react/hooks/__tests__/useLoadableQuery.test.tsx +++ b/src/react/hooks/__tests__/useLoadableQuery.test.tsx @@ -59,7 +59,6 @@ import { createRenderStream, disableActEnvironment, useTrackRenders, - userEventWithoutAct, } from "@testing-library/react-render-stream"; const IS_REACT_19 = React.version.startsWith("19"); @@ -228,7 +227,7 @@ async function renderWithMocks( props: MockedProviderProps, { render: doRender }: { render: RenderWithoutActAsync } ) { - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const utils = await doRender(ui, { wrapper: ({ children }) => ( @@ -245,7 +244,7 @@ async function renderWithClient( { render: doRender }: { render: RenderWithoutActAsync } ) { const { client } = options; - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const utils = await doRender(ui, { wrapper: ({ children }: { children: React.ReactNode }) => ( diff --git a/src/react/hooks/__tests__/useQuery.test.tsx b/src/react/hooks/__tests__/useQuery.test.tsx index d4705bc5058..8115b9e6680 100644 --- a/src/react/hooks/__tests__/useQuery.test.tsx +++ b/src/react/hooks/__tests__/useQuery.test.tsx @@ -42,7 +42,6 @@ import { createRenderStream, renderHookToSnapshotStream, disableActEnvironment, - userEventWithoutAct, } from "@testing-library/react-render-stream"; const IS_REACT_17 = React.version.startsWith("17"); @@ -4483,7 +4482,7 @@ describe("useQuery Hook", () => { id: number; } - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const query1: TypedDocumentNode = gql` query PersonQuery1($id: ID!) { @@ -4743,7 +4742,7 @@ describe("useQuery Hook", () => { id: number; } - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const query1: TypedDocumentNode = gql` query PersonQuery1($id: ID!) { @@ -4966,7 +4965,7 @@ describe("useQuery Hook", () => { id: number; } - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const query1: TypedDocumentNode = gql` query PersonQuery1($id: ID!) { @@ -5265,7 +5264,7 @@ describe("useQuery Hook", () => { } `; - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); using _disabledAct = disableActEnvironment(); const renderStream = createRenderStream({ diff --git a/src/react/hooks/__tests__/useQueryRefHandlers.test.tsx b/src/react/hooks/__tests__/useQueryRefHandlers.test.tsx index 3c678892c2b..56b38258bec 100644 --- a/src/react/hooks/__tests__/useQueryRefHandlers.test.tsx +++ b/src/react/hooks/__tests__/useQueryRefHandlers.test.tsx @@ -34,7 +34,6 @@ import { concatPagination, getMainDefinition } from "../../../utilities"; import { createRenderStream, disableActEnvironment, - userEventWithoutAct, useTrackRenders, } from "@testing-library/react-render-stream"; @@ -131,7 +130,7 @@ test("does not interfere with updates from useReadQuery", async () => { test("refetches and resuspends when calling refetch", async () => { const { query, mocks: defaultMocks } = setupSimpleCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const mocks = [ defaultMocks[0], @@ -263,7 +262,7 @@ test('honors refetchWritePolicy set to "merge"', async () => { }, }); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const client = new ApolloClient({ link: new MockLink(mocks), cache, @@ -390,7 +389,7 @@ test('honors refetchWritePolicy set to "overwrite"', async () => { }, }); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const client = new ApolloClient({ link: new MockLink(mocks), cache, @@ -514,7 +513,7 @@ test('defaults refetchWritePolicy to "overwrite"', async () => { }, }); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const client = new ApolloClient({ link: new MockLink(mocks), cache, @@ -605,7 +604,7 @@ test("`refetch` works with startTransition", async () => { completed: boolean; }; } - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const query: TypedDocumentNode = gql` query TodoItemQuery($id: ID!) { @@ -754,7 +753,7 @@ test("`refetch` works with startTransition", async () => { test("`refetch` works with startTransition from useBackgroundQuery and usePreloadedQueryHandlers", async () => { const { query, mocks: defaultMocks } = setupSimpleCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const mocks = [ defaultMocks[0], @@ -925,7 +924,7 @@ test("`refetch` works with startTransition from useBackgroundQuery and usePreloa test("refetches from queryRefs produced by useBackgroundQuery", async () => { const { query, mocks: defaultMocks } = setupSimpleCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const mocks = [ defaultMocks[0], @@ -1013,7 +1012,7 @@ test("refetches from queryRefs produced by useBackgroundQuery", async () => { test("refetches from queryRefs produced by useLoadableQuery", async () => { const { query, mocks: defaultMocks } = setupSimpleCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const mocks = [ defaultMocks[0], @@ -1107,7 +1106,7 @@ test("refetches from queryRefs produced by useLoadableQuery", async () => { test("resuspends when calling `fetchMore`", async () => { const { query, link } = setupPaginatedCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const client = new ApolloClient({ cache: new InMemoryCache({ @@ -1211,7 +1210,7 @@ test("resuspends when calling `fetchMore`", async () => { test("properly uses `updateQuery` when calling `fetchMore`", async () => { const { query, link } = setupPaginatedCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const client = new ApolloClient({ cache: new InMemoryCache(), link }); const preloadQuery = createQueryPreloader(client); @@ -1313,7 +1312,7 @@ test("properly uses `updateQuery` when calling `fetchMore`", async () => { test("properly uses cache field policies when calling `fetchMore` without `updateQuery`", async () => { const { query, link } = setupPaginatedCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const client = new ApolloClient({ cache: new InMemoryCache({ @@ -1419,7 +1418,7 @@ test("properly uses cache field policies when calling `fetchMore` without `updat test("paginates from queryRefs produced by useBackgroundQuery", async () => { const { query, link } = setupPaginatedCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const client = new ApolloClient({ cache: new InMemoryCache({ typePolicies: { @@ -1523,7 +1522,7 @@ test("paginates from queryRefs produced by useBackgroundQuery", async () => { test("paginates from queryRefs produced by useLoadableQuery", async () => { const { query, link } = setupPaginatedCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const client = new ApolloClient({ cache: new InMemoryCache({ typePolicies: { @@ -1635,7 +1634,7 @@ test("paginates from queryRefs produced by useLoadableQuery", async () => { test("`fetchMore` works with startTransition", async () => { const { query, link } = setupPaginatedCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const client = new ApolloClient({ cache: new InMemoryCache({ typePolicies: { @@ -1766,7 +1765,7 @@ test("`fetchMore` works with startTransition", async () => { test("`fetchMore` works with startTransition from useBackgroundQuery and useQueryRefHandlers", async () => { const { query, link } = setupPaginatedCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const client = new ApolloClient({ cache: new InMemoryCache({ typePolicies: { diff --git a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx index c2069471bbc..0aec5bcff39 100644 --- a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx +++ b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx @@ -65,7 +65,6 @@ import { createRenderStream, disableActEnvironment, renderToRenderStream, - userEventWithoutAct, useTrackRenders, } from "@testing-library/react-render-stream"; @@ -9712,7 +9711,7 @@ describe("useSuspenseQuery", () => { completed: boolean; }; } - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const query: TypedDocumentNode = gql` query TodoItemQuery($id: ID!) { @@ -10170,7 +10169,7 @@ describe("useSuspenseQuery", () => { it("fetchMore does not cause extra render", async () => { const { query, link } = setupPaginatedCase(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const client = new ApolloClient({ cache: new InMemoryCache({ typePolicies: { @@ -10306,7 +10305,7 @@ describe("useSuspenseQuery", () => { interface Data { todos: Todo[]; } - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const query: TypedDocumentNode = gql` query TodosQuery($offset: Int!) { @@ -10548,7 +10547,7 @@ describe("useSuspenseQuery", () => { }, ]); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const client = new ApolloClient({ cache: new InMemoryCache({ typePolicies: { diff --git a/src/react/query-preloader/__tests__/createQueryPreloader.test.tsx b/src/react/query-preloader/__tests__/createQueryPreloader.test.tsx index aac8b883b12..23588620d3f 100644 --- a/src/react/query-preloader/__tests__/createQueryPreloader.test.tsx +++ b/src/react/query-preloader/__tests__/createQueryPreloader.test.tsx @@ -37,7 +37,6 @@ import userEvent from "@testing-library/user-event"; import { createRenderStream, disableActEnvironment, - userEventWithoutAct, useTrackRenders, } from "@testing-library/react-render-stream"; @@ -267,7 +266,7 @@ test("useReadQuery auto-resubscribes the query after its disposed", async () => result: null as UseReadQueryResult | null, }, }); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const client = new ApolloClient({ cache: new InMemoryCache(), link }); const preloadQuery = createQueryPreloader(client); @@ -461,7 +460,7 @@ test("useReadQuery handles auto-resubscribe with returnPartialData", async () => result: null as UseReadQueryResult> | null, }, }); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const client = new ApolloClient({ cache: new InMemoryCache(), link }); const preloadQuery = createQueryPreloader(client); @@ -723,7 +722,7 @@ test("useReadQuery handles auto-resubscribe on network-only fetch policy", async result: null as UseReadQueryResult | null, }, }); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const client = new ApolloClient({ cache: new InMemoryCache(), link }); const preloadQuery = createQueryPreloader(client); @@ -905,7 +904,7 @@ test("useReadQuery handles auto-resubscribe on cache-and-network fetch policy", result: null as UseReadQueryResult | null, }, }); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const client = new ApolloClient({ cache: new InMemoryCache(), link }); const preloadQuery = createQueryPreloader(client); @@ -1087,7 +1086,7 @@ test("useReadQuery handles auto-resubscribe on no-cache fetch policy", async () result: null as UseReadQueryResult | null, }, }); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); const client = new ApolloClient({ cache: new InMemoryCache(), link }); const preloadQuery = createQueryPreloader(client); diff --git a/src/testing/experimental/__tests__/createTestSchema.test.tsx b/src/testing/experimental/__tests__/createTestSchema.test.tsx index d5a951a5a5f..e079d3ddab0 100644 --- a/src/testing/experimental/__tests__/createTestSchema.test.tsx +++ b/src/testing/experimental/__tests__/createTestSchema.test.tsx @@ -23,7 +23,6 @@ import { RenderStream, createRenderStream, disableActEnvironment, - userEventWithoutAct, } from "@testing-library/react-render-stream"; const IS_REACT_19 = React.version.startsWith("19"); @@ -606,7 +605,7 @@ describe("schema proxy", () => { ); }; - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); renderStream.render(, { wrapper: createClientWrapper(client), @@ -960,7 +959,7 @@ describe("schema proxy", () => { ); }; - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); renderStream.render(, { wrapper: createClientWrapper(client), @@ -1133,7 +1132,7 @@ describe("schema proxy", () => { resetTestSchema.reset(); - const user = userEventWithoutAct(userEvent.setup()); + const user = userEvent.setup(); await user.click(screen.getByText("Refetch")); From 384215093bbd17afd0768d00642cb9445f4aa506 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Mon, 2 Dec 2024 11:12:53 +0100 Subject: [PATCH 36/58] bump --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index b14c03c1958..966cebc364b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,7 +40,7 @@ "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "6.4.6", "@testing-library/react": "^16.0.1", - "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@32daf10c4", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@084b691a6", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", @@ -3535,8 +3535,8 @@ }, "node_modules/@testing-library/react-render-stream": { "version": "0.0.0-semantically-released", - "resolved": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@32daf10c4", - "integrity": "sha512-f0zdavHCaj9f/7TlEmmGH7xv3H9DUoz7V7cIROieY9S4ui3OvW1YkffZpBCvnYYvGn4sMysN+LIwNPz14k6Dqg==", + "resolved": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@084b691a6", + "integrity": "sha512-3I0mKejOw8PinZXYKBhEaV1I9RXLL809BWGwKW5AYy8zsdV3zoxTWVyb+eNQNRQP7ycKZ0nHc3lTmt5toMVP/Q==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 75380133873..efb33c2aa6c 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,7 @@ "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "6.4.6", "@testing-library/react": "^16.0.1", - "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@32daf10c4", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@084b691a6", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", From 5ff137e3adf64ac27e73aabd4d2733b6ca8d7408 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Mon, 2 Dec 2024 11:21:22 +0100 Subject: [PATCH 37/58] bump delay a bit --- src/testing/internal/scenarios/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/testing/internal/scenarios/index.ts b/src/testing/internal/scenarios/index.ts index 557d1db5b40..d27beebd231 100644 --- a/src/testing/internal/scenarios/index.ts +++ b/src/testing/internal/scenarios/index.ts @@ -17,7 +17,7 @@ export function setupSimpleCase() { { request: { query }, result: { data: { greeting: "Hello" } }, - delay: 10, + delay: 20, }, ]; From 71bab96184c6c59fcf3be2ad531789b16aab6d5f Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Mon, 2 Dec 2024 11:30:40 +0100 Subject: [PATCH 38/58] remove `disableActWarnings` tool --- src/react/hooks/__tests__/useQuery.test.tsx | 7 +------ .../internal/disposables/disableActWarnings.ts | 15 --------------- src/testing/internal/disposables/index.ts | 1 - 3 files changed, 1 insertion(+), 22 deletions(-) delete mode 100644 src/testing/internal/disposables/disableActWarnings.ts diff --git a/src/react/hooks/__tests__/useQuery.test.tsx b/src/react/hooks/__tests__/useQuery.test.tsx index 8115b9e6680..87e38032628 100644 --- a/src/react/hooks/__tests__/useQuery.test.tsx +++ b/src/react/hooks/__tests__/useQuery.test.tsx @@ -29,11 +29,7 @@ import { import { QueryResult } from "../../types/types"; import { useQuery } from "../useQuery"; import { useMutation } from "../useMutation"; -import { - disableActWarnings, - setupPaginatedCase, - spyOnConsole, -} from "../../../testing/internal"; +import { setupPaginatedCase, spyOnConsole } from "../../../testing/internal"; import { useApolloClient } from "../useApolloClient"; import { useLazyQuery } from "../useLazyQuery"; import { mockFetchQuery } from "../../../core/__tests__/ObservableQuery"; @@ -6876,7 +6872,6 @@ describe("useQuery Hook", () => { }); it("should attempt a refetch when data is missing, partialRefetch is true and addTypename is false for the cache", async () => { - using _disabledActWarnings = disableActWarnings(); using consoleSpy = spyOnConsole("error"); const query = gql` { diff --git a/src/testing/internal/disposables/disableActWarnings.ts b/src/testing/internal/disposables/disableActWarnings.ts deleted file mode 100644 index c5254c8dc1d..00000000000 --- a/src/testing/internal/disposables/disableActWarnings.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { withCleanup } from "./withCleanup.js"; - -/** - * Temporarily disable act warnings. - * - * https://github.com/reactwg/react-18/discussions/102 - */ -export function disableActWarnings() { - const prev = { prevActEnv: (globalThis as any).IS_REACT_ACT_ENVIRONMENT }; - (globalThis as any).IS_REACT_ACT_ENVIRONMENT = false; - - return withCleanup(prev, ({ prevActEnv }) => { - (globalThis as any).IS_REACT_ACT_ENVIRONMENT = prevActEnv; - }); -} diff --git a/src/testing/internal/disposables/index.ts b/src/testing/internal/disposables/index.ts index 9d61c88fd90..5941be0585e 100644 --- a/src/testing/internal/disposables/index.ts +++ b/src/testing/internal/disposables/index.ts @@ -1,4 +1,3 @@ -export { disableActWarnings } from "./disableActWarnings.js"; export { spyOnConsole } from "./spyOnConsole.js"; export { withCleanup } from "./withCleanup.js"; export { enableFakeTimers } from "./enableFakeTimers.js"; From 99bc011e2efdf82a9c077d0a4833631a8186d69b Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Mon, 2 Dec 2024 15:00:17 +0100 Subject: [PATCH 39/58] await rerender --- package-lock.json | 6 +++--- package.json | 2 +- src/react/components/__tests__/client/Subscription.test.tsx | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 966cebc364b..71a52740731 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,7 +40,7 @@ "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "6.4.6", "@testing-library/react": "^16.0.1", - "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@084b691a6", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@0cf8f41d6", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", @@ -3535,8 +3535,8 @@ }, "node_modules/@testing-library/react-render-stream": { "version": "0.0.0-semantically-released", - "resolved": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@084b691a6", - "integrity": "sha512-3I0mKejOw8PinZXYKBhEaV1I9RXLL809BWGwKW5AYy8zsdV3zoxTWVyb+eNQNRQP7ycKZ0nHc3lTmt5toMVP/Q==", + "resolved": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@0cf8f41d6", + "integrity": "sha512-CeFSioFQVoDeTtAtM7+lkzDjRW4sK62RKjMTNRXmzqiB/PCYZWcoKLICd5758rIWuC85utKikVKCp5dq313g3w==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index efb33c2aa6c..70034729567 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,7 @@ "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "6.4.6", "@testing-library/react": "^16.0.1", - "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@084b691a6", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@0cf8f41d6", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", diff --git a/src/react/components/__tests__/client/Subscription.test.tsx b/src/react/components/__tests__/client/Subscription.test.tsx index df2c85d0f92..945ccb4b13c 100644 --- a/src/react/components/__tests__/client/Subscription.test.tsx +++ b/src/react/components/__tests__/client/Subscription.test.tsx @@ -466,7 +466,7 @@ describe("should update", () => { await expect(takeRender).not.toRerender({ timeout: 50 }); - rerender( + await rerender( @@ -564,7 +564,7 @@ describe("should update", () => { await expect(takeRender).not.toRerender({ timeout: 50 }); - rerender(); + await rerender(); { const { snapshot: { loading, data }, @@ -658,7 +658,7 @@ describe("should update", () => { await expect(takeRender).not.toRerender({ timeout: 50 }); - rerender(); + await rerender(); { const { From 763d65b09393026be388f387188d73f6ffa6d19d Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Mon, 2 Dec 2024 15:10:21 +0100 Subject: [PATCH 40/58] missing actAsync --- src/react/hooks/__tests__/useSuspenseQuery.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx index 0aec5bcff39..163b4cd5766 100644 --- a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx +++ b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx @@ -8408,7 +8408,7 @@ describe("useSuspenseQuery", () => { }); let fetchMorePromise: Promise>; - act(() => { + await actAsync(() => { fetchMorePromise = result.current.fetchMore({ variables: { offset: 1 }, }); From 5aa78f105d21b32968dda7643932aa0bf7424366 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Mon, 2 Dec 2024 15:18:46 +0100 Subject: [PATCH 41/58] some more type updates --- src/react/hooks/__tests__/useLoadableQuery.test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/react/hooks/__tests__/useLoadableQuery.test.tsx b/src/react/hooks/__tests__/useLoadableQuery.test.tsx index 769382e1453..ec62100a90e 100644 --- a/src/react/hooks/__tests__/useLoadableQuery.test.tsx +++ b/src/react/hooks/__tests__/useLoadableQuery.test.tsx @@ -55,10 +55,10 @@ import { import { RenderStream, - RenderWithoutActAsync, createRenderStream, disableActEnvironment, useTrackRenders, + AsyncRenderFn, } from "@testing-library/react-render-stream"; const IS_REACT_19 = React.version.startsWith("19"); @@ -225,7 +225,7 @@ function createDefaultProfiledComponents< async function renderWithMocks( ui: React.ReactElement, props: MockedProviderProps, - { render: doRender }: { render: RenderWithoutActAsync } + { render: doRender }: { render: AsyncRenderFn | typeof renderAsync } ) { const user = userEvent.setup(); @@ -241,7 +241,7 @@ async function renderWithMocks( async function renderWithClient( ui: React.ReactElement, options: { client: ApolloClient }, - { render: doRender }: { render: RenderWithoutActAsync } + { render: doRender }: { render: AsyncRenderFn | typeof renderAsync } ) { const { client } = options; const user = userEvent.setup(); From 92a825032e32d61d8a36eda9ef6a176849f8f09c Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Mon, 2 Dec 2024 15:51:29 +0100 Subject: [PATCH 42/58] some more act calls --- package-lock.json | 6 +-- package.json | 2 +- .../hooks/__tests__/useLazyQuery.test.tsx | 47 +++++++++++-------- src/react/hooks/__tests__/useQuery.test.tsx | 24 ++++++---- src/testing/internal/rtl/actAsync.ts | 4 +- 5 files changed, 48 insertions(+), 35 deletions(-) diff --git a/package-lock.json b/package-lock.json index 71a52740731..bd459798e8b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,7 +40,7 @@ "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "6.4.6", "@testing-library/react": "^16.0.1", - "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@0cf8f41d6", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@20601bcc8", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", @@ -3535,8 +3535,8 @@ }, "node_modules/@testing-library/react-render-stream": { "version": "0.0.0-semantically-released", - "resolved": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@0cf8f41d6", - "integrity": "sha512-CeFSioFQVoDeTtAtM7+lkzDjRW4sK62RKjMTNRXmzqiB/PCYZWcoKLICd5758rIWuC85utKikVKCp5dq313g3w==", + "resolved": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@20601bcc8", + "integrity": "sha512-xnJv2V4zQJveIRWiWrymjaOhEEExZkAhFbrppZz2cVSGMbHtFz9yctch5EeATSkeCiQbYILsXUewwJm7Fnco6A==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 70034729567..12fc70d5bf9 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,7 @@ "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "6.4.6", "@testing-library/react": "^16.0.1", - "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@0cf8f41d6", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@20601bcc8", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", diff --git a/src/react/hooks/__tests__/useLazyQuery.test.tsx b/src/react/hooks/__tests__/useLazyQuery.test.tsx index 0ffddc3a675..14eace62460 100644 --- a/src/react/hooks/__tests__/useLazyQuery.test.tsx +++ b/src/react/hooks/__tests__/useLazyQuery.test.tsx @@ -29,6 +29,7 @@ import { disableActEnvironment, renderHookToSnapshotStream, } from "@testing-library/react-render-stream"; +import { actAsync } from "../../../testing/internal"; describe("useLazyQuery Hook", () => { const helloQuery: TypedDocumentNode<{ @@ -384,11 +385,13 @@ describe("useLazyQuery Hook", () => { }, }; - const execResult = await result.current.exec({ - variables: { - execVar: true, - }, - }); + const execResult = await actAsync(() => + result.current.exec({ + variables: { + execVar: true, + }, + }) + ); await waitFor( () => { @@ -430,13 +433,15 @@ describe("useLazyQuery Hook", () => { expect(result.current.query.called).toBe(true); expect(result.current.query.data).toEqual(expectedFinalData); - const refetchResult = await result.current.query.reobserve({ - fetchPolicy: "network-only", - nextFetchPolicy: "cache-first", - variables: { - execVar: false, - }, - }); + const refetchResult = await actAsync(() => + result.current.query.reobserve({ + fetchPolicy: "network-only", + nextFetchPolicy: "cache-first", + variables: { + execVar: false, + }, + }) + ); expect(refetchResult.loading).toBe(false); expect(refetchResult.data).toEqual({ counter: 2, @@ -469,13 +474,15 @@ describe("useLazyQuery Hook", () => { { interval: 1 } ); - const execResult2 = await result.current.exec({ - fetchPolicy: "cache-and-network", - nextFetchPolicy: "cache-first", - variables: { - execVar: true, - }, - }); + const execResult2 = await actAsync(() => + result.current.exec({ + fetchPolicy: "cache-and-network", + nextFetchPolicy: "cache-first", + variables: { + execVar: true, + }, + }) + ); await waitFor( () => { @@ -1897,7 +1904,7 @@ describe("useLazyQuery Hook", () => { { interval: 1 } ); - const execResult = await result.current.exec(); + const execResult = await actAsync(() => result.current.exec()); expect(execResult.loading).toBe(false); expect(execResult.called).toBe(true); expect(execResult.data).toEqual({ counter: 1 }); diff --git a/src/react/hooks/__tests__/useQuery.test.tsx b/src/react/hooks/__tests__/useQuery.test.tsx index 87e38032628..1a2079470b7 100644 --- a/src/react/hooks/__tests__/useQuery.test.tsx +++ b/src/react/hooks/__tests__/useQuery.test.tsx @@ -29,7 +29,11 @@ import { import { QueryResult } from "../../types/types"; import { useQuery } from "../useQuery"; import { useMutation } from "../useMutation"; -import { setupPaginatedCase, spyOnConsole } from "../../../testing/internal"; +import { + actAsync, + setupPaginatedCase, + spyOnConsole, +} from "../../../testing/internal"; import { useApolloClient } from "../useApolloClient"; import { useLazyQuery } from "../useLazyQuery"; import { mockFetchQuery } from "../../../core/__tests__/ObservableQuery"; @@ -1564,14 +1568,16 @@ describe("useQuery Hook", () => { checkObservableQueries(1); - await result.current.reobserve().then((result) => { - expect(result.loading).toBe(false); - expect(result.loading).toBe(false); - expect(result.networkStatus).toBe(NetworkStatus.ready); - expect(result.data).toEqual({ - linkCount: 2, - }); - }); + await actAsync(() => + result.current.reobserve().then((result) => { + expect(result.loading).toBe(false); + expect(result.loading).toBe(false); + expect(result.networkStatus).toBe(NetworkStatus.ready); + expect(result.data).toEqual({ + linkCount: 2, + }); + }) + ); await waitFor(() => { expect(result.current.loading).toBe(false); diff --git a/src/testing/internal/rtl/actAsync.ts b/src/testing/internal/rtl/actAsync.ts index db3f603aa5c..70a64009643 100644 --- a/src/testing/internal/rtl/actAsync.ts +++ b/src/testing/internal/rtl/actAsync.ts @@ -6,8 +6,8 @@ import * as React from "react"; -export function actAsync(scope: () => void | Promise): Promise { +export function actAsync(scope: () => T | Promise): Promise { return React.act(async () => { - await scope(); + return await scope(); }); } From c9d918a757d1a9d904e2ed580619d2cc8da58b51 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Mon, 2 Dec 2024 16:00:09 +0100 Subject: [PATCH 43/58] don't patch React --- .../react-dom-19+19.0.0-rc.1.patch.disabled | 88 ------------------- src/config/jest/setup.ts | 3 - 2 files changed, 91 deletions(-) delete mode 100644 patches/react-dom-19+19.0.0-rc.1.patch.disabled diff --git a/patches/react-dom-19+19.0.0-rc.1.patch.disabled b/patches/react-dom-19+19.0.0-rc.1.patch.disabled deleted file mode 100644 index 84fd1abf7ce..00000000000 --- a/patches/react-dom-19+19.0.0-rc.1.patch.disabled +++ /dev/null @@ -1,88 +0,0 @@ -diff --git a/node_modules/react-dom-19/cjs/react-dom-client.development.js b/node_modules/react-dom-19/cjs/react-dom-client.development.js -index 83ea1c6..7be6928 100644 ---- a/node_modules/react-dom-19/cjs/react-dom-client.development.js -+++ b/node_modules/react-dom-19/cjs/react-dom-client.development.js -@@ -14459,7 +14459,7 @@ - (lanes & 62914560) === lanes && - ((exitStatus = - globalMostRecentFallbackTime + -- FALLBACK_THROTTLE_MS - -+ (globalThis.REACT_FALLBACK_THROTTLE_MS || FALLBACK_THROTTLE_MS) - - now$1()), - 10 < exitStatus) - ) { -@@ -15596,7 +15596,7 @@ - (workInProgressRootExitStatus === RootSuspended && - (workInProgressRootRenderLanes & 62914560) === - workInProgressRootRenderLanes && -- now$1() - globalMostRecentFallbackTime < FALLBACK_THROTTLE_MS) -+ now$1() - globalMostRecentFallbackTime < (globalThis.REACT_FALLBACK_THROTTLE_MS || FALLBACK_THROTTLE_MS)) - ? (executionContext & RenderContext) === NoContext && - prepareFreshStack(root, 0) - : (workInProgressRootPingedLanes |= pingedLanes), -diff --git a/node_modules/react-dom-19/cjs/react-dom-client.production.js b/node_modules/react-dom-19/cjs/react-dom-client.production.js -index af7283a..78ef4e5 100644 ---- a/node_modules/react-dom-19/cjs/react-dom-client.production.js -+++ b/node_modules/react-dom-19/cjs/react-dom-client.production.js -@@ -10391,7 +10391,7 @@ function performWorkOnRoot(root$jscomp$0, lanes, forceSync) { - shouldTimeSlice.finishedLanes = lanes; - if ( - (lanes & 62914560) === lanes && -- ((renderWasConcurrent = globalMostRecentFallbackTime + 300 - now()), -+ ((renderWasConcurrent = globalMostRecentFallbackTime + (globalThis.REACT_FALLBACK_THROTTLE_MS || 300) - now()), - 10 < renderWasConcurrent) - ) { - markRootSuspended( -@@ -11260,7 +11260,7 @@ function pingSuspendedRoot(root, wakeable, pingedLanes) { - (3 === workInProgressRootExitStatus && - (workInProgressRootRenderLanes & 62914560) === - workInProgressRootRenderLanes && -- 300 > now() - globalMostRecentFallbackTime) -+ (globalThis.REACT_FALLBACK_THROTTLE_MS || 300) > now() - globalMostRecentFallbackTime) - ? 0 === (executionContext & 2) && prepareFreshStack(root, 0) - : (workInProgressRootPingedLanes |= pingedLanes), - workInProgressSuspendedRetryLanes === workInProgressRootRenderLanes && -diff --git a/node_modules/react-dom-19/cjs/react-dom-profiling.development.js b/node_modules/react-dom-19/cjs/react-dom-profiling.development.js -index 7847cbd..78c1fa2 100644 ---- a/node_modules/react-dom-19/cjs/react-dom-profiling.development.js -+++ b/node_modules/react-dom-19/cjs/react-dom-profiling.development.js -@@ -14467,7 +14467,7 @@ - (lanes & 62914560) === lanes && - ((exitStatus = - globalMostRecentFallbackTime + -- FALLBACK_THROTTLE_MS - -+ (globalThis.REACT_FALLBACK_THROTTLE_MS || FALLBACK_THROTTLE_MS) - - now$1()), - 10 < exitStatus) - ) { -@@ -15608,7 +15608,7 @@ - (workInProgressRootExitStatus === RootSuspended && - (workInProgressRootRenderLanes & 62914560) === - workInProgressRootRenderLanes && -- now$1() - globalMostRecentFallbackTime < FALLBACK_THROTTLE_MS) -+ now$1() - globalMostRecentFallbackTime < (globalThis.REACT_FALLBACK_THROTTLE_MS || FALLBACK_THROTTLE_MS)) - ? (executionContext & RenderContext) === NoContext && - prepareFreshStack(root, 0) - : (workInProgressRootPingedLanes |= pingedLanes), -diff --git a/node_modules/react-dom-19/cjs/react-dom-profiling.profiling.js b/node_modules/react-dom-19/cjs/react-dom-profiling.profiling.js -index 98a9f0b..8fae178 100644 ---- a/node_modules/react-dom-19/cjs/react-dom-profiling.profiling.js -+++ b/node_modules/react-dom-19/cjs/react-dom-profiling.profiling.js -@@ -10913,7 +10913,7 @@ function performWorkOnRoot(root$jscomp$0, lanes, forceSync) { - shouldTimeSlice.finishedLanes = lanes; - if ( - (lanes & 62914560) === lanes && -- ((renderWasConcurrent = globalMostRecentFallbackTime + 300 - now$1()), -+ ((renderWasConcurrent = globalMostRecentFallbackTime + (globalThis.REACT_FALLBACK_THROTTLE_MS || 300) - now$1()), - 10 < renderWasConcurrent) - ) { - markRootSuspended( -@@ -11881,7 +11881,7 @@ function pingSuspendedRoot(root, wakeable, pingedLanes) { - (3 === workInProgressRootExitStatus && - (workInProgressRootRenderLanes & 62914560) === - workInProgressRootRenderLanes && -- 300 > now$1() - globalMostRecentFallbackTime) -+ (globalThis.REACT_FALLBACK_THROTTLE_MS || 300) > now$1() - globalMostRecentFallbackTime) - ? 0 === (executionContext & 2) && prepareFreshStack(root, 0) - : (workInProgressRootPingedLanes |= pingedLanes), - workInProgressSuspendedRetryLanes === workInProgressRootRenderLanes && diff --git a/src/config/jest/setup.ts b/src/config/jest/setup.ts index 02b2778f049..141d0e4132d 100644 --- a/src/config/jest/setup.ts +++ b/src/config/jest/setup.ts @@ -36,6 +36,3 @@ if (!Symbol.asyncDispose) { // @ts-ignore expect.addEqualityTesters([areApolloErrorsEqual, areGraphQLErrorsEqual]); - -// @ts-ignore -globalThis.REACT_FALLBACK_THROTTLE_MS = 30; From 5cf59306d42ab3cc89219266d9635f36c9b7e5ee Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Mon, 2 Dec 2024 16:08:46 +0100 Subject: [PATCH 44/58] `actAsync` for React 17 --- src/testing/internal/rtl/actAsync.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/testing/internal/rtl/actAsync.ts b/src/testing/internal/rtl/actAsync.ts index 70a64009643..134c1a32053 100644 --- a/src/testing/internal/rtl/actAsync.ts +++ b/src/testing/internal/rtl/actAsync.ts @@ -5,9 +5,13 @@ // and https://github.com/testing-library/react-testing-library/pull/1365 import * as React from "react"; +import * as DeprecatedReactTestUtils from "react-dom/test-utils"; + +const reactAct = + typeof React.act === "function" ? React.act : DeprecatedReactTestUtils.act; export function actAsync(scope: () => T | Promise): Promise { - return React.act(async () => { + return reactAct(async () => { return await scope(); }); } From eb9b49f9ab8df657c0381256f947acd9a3581f2e Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Mon, 2 Dec 2024 16:30:29 +0100 Subject: [PATCH 45/58] actAsync -> act --- src/react/hooks/__tests__/useLazyQuery.test.tsx | 9 ++++----- src/react/hooks/__tests__/useQuery.test.tsx | 8 ++------ 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/src/react/hooks/__tests__/useLazyQuery.test.tsx b/src/react/hooks/__tests__/useLazyQuery.test.tsx index 14eace62460..98e6768733e 100644 --- a/src/react/hooks/__tests__/useLazyQuery.test.tsx +++ b/src/react/hooks/__tests__/useLazyQuery.test.tsx @@ -29,7 +29,6 @@ import { disableActEnvironment, renderHookToSnapshotStream, } from "@testing-library/react-render-stream"; -import { actAsync } from "../../../testing/internal"; describe("useLazyQuery Hook", () => { const helloQuery: TypedDocumentNode<{ @@ -385,7 +384,7 @@ describe("useLazyQuery Hook", () => { }, }; - const execResult = await actAsync(() => + const execResult = await act(() => result.current.exec({ variables: { execVar: true, @@ -433,7 +432,7 @@ describe("useLazyQuery Hook", () => { expect(result.current.query.called).toBe(true); expect(result.current.query.data).toEqual(expectedFinalData); - const refetchResult = await actAsync(() => + const refetchResult = await act(() => result.current.query.reobserve({ fetchPolicy: "network-only", nextFetchPolicy: "cache-first", @@ -474,7 +473,7 @@ describe("useLazyQuery Hook", () => { { interval: 1 } ); - const execResult2 = await actAsync(() => + const execResult2 = await act(() => result.current.exec({ fetchPolicy: "cache-and-network", nextFetchPolicy: "cache-first", @@ -1904,7 +1903,7 @@ describe("useLazyQuery Hook", () => { { interval: 1 } ); - const execResult = await actAsync(() => result.current.exec()); + const execResult = await act(() => result.current.exec()); expect(execResult.loading).toBe(false); expect(execResult.called).toBe(true); expect(execResult.data).toEqual({ counter: 1 }); diff --git a/src/react/hooks/__tests__/useQuery.test.tsx b/src/react/hooks/__tests__/useQuery.test.tsx index 1a2079470b7..2a4d30845d5 100644 --- a/src/react/hooks/__tests__/useQuery.test.tsx +++ b/src/react/hooks/__tests__/useQuery.test.tsx @@ -29,11 +29,7 @@ import { import { QueryResult } from "../../types/types"; import { useQuery } from "../useQuery"; import { useMutation } from "../useMutation"; -import { - actAsync, - setupPaginatedCase, - spyOnConsole, -} from "../../../testing/internal"; +import { setupPaginatedCase, spyOnConsole } from "../../../testing/internal"; import { useApolloClient } from "../useApolloClient"; import { useLazyQuery } from "../useLazyQuery"; import { mockFetchQuery } from "../../../core/__tests__/ObservableQuery"; @@ -1568,7 +1564,7 @@ describe("useQuery Hook", () => { checkObservableQueries(1); - await actAsync(() => + await act(() => result.current.reobserve().then((result) => { expect(result.loading).toBe(false); expect(result.loading).toBe(false); From e29c31d9ecbd048de97906838f9e15e84009edfb Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Mon, 2 Dec 2024 16:54:31 +0100 Subject: [PATCH 46/58] update dep --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index bd459798e8b..990137a2fff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,7 +40,7 @@ "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "6.4.6", "@testing-library/react": "^16.0.1", - "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@20601bcc8", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@fab8705f2", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", @@ -3535,8 +3535,8 @@ }, "node_modules/@testing-library/react-render-stream": { "version": "0.0.0-semantically-released", - "resolved": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@20601bcc8", - "integrity": "sha512-xnJv2V4zQJveIRWiWrymjaOhEEExZkAhFbrppZz2cVSGMbHtFz9yctch5EeATSkeCiQbYILsXUewwJm7Fnco6A==", + "resolved": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@fab8705f2", + "integrity": "sha512-LubzeLH6F6/n16p5nvpGBbB2GZFxAloEIu6til0SZs6RfQKZ+6/J2D4DkcjT4tDZK+3p0YjZ/i+SgVBV+rpmmQ==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 12fc70d5bf9..df36fda91fc 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,7 @@ "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "6.4.6", "@testing-library/react": "^16.0.1", - "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@20601bcc8", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@fab8705f2", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", From 09240a79369d3833b9d709fdb572d4636e782dae Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Mon, 2 Dec 2024 17:04:06 +0100 Subject: [PATCH 47/58] fix React 17 specific act quirk --- .../hooks/__tests__/useLazyQuery.test.tsx | 55 ++++++++++--------- 1 file changed, 29 insertions(+), 26 deletions(-) diff --git a/src/react/hooks/__tests__/useLazyQuery.test.tsx b/src/react/hooks/__tests__/useLazyQuery.test.tsx index 98e6768733e..a1a03b83dfe 100644 --- a/src/react/hooks/__tests__/useLazyQuery.test.tsx +++ b/src/react/hooks/__tests__/useLazyQuery.test.tsx @@ -384,13 +384,13 @@ describe("useLazyQuery Hook", () => { }, }; - const execResult = await act(() => - result.current.exec({ - variables: { - execVar: true, - }, - }) - ); + const execPromise = result.current.exec({ + variables: { + execVar: true, + }, + }); + await act(() => execPromise); + const execResult = await execPromise; await waitFor( () => { @@ -432,15 +432,16 @@ describe("useLazyQuery Hook", () => { expect(result.current.query.called).toBe(true); expect(result.current.query.data).toEqual(expectedFinalData); - const refetchResult = await act(() => - result.current.query.reobserve({ - fetchPolicy: "network-only", - nextFetchPolicy: "cache-first", - variables: { - execVar: false, - }, - }) - ); + const refetchPromise = result.current.query.reobserve({ + fetchPolicy: "network-only", + nextFetchPolicy: "cache-first", + variables: { + execVar: false, + }, + }); + await act(() => refetchPromise); + const refetchResult = await refetchPromise; + expect(refetchResult.loading).toBe(false); expect(refetchResult.data).toEqual({ counter: 2, @@ -473,15 +474,15 @@ describe("useLazyQuery Hook", () => { { interval: 1 } ); - const execResult2 = await act(() => - result.current.exec({ - fetchPolicy: "cache-and-network", - nextFetchPolicy: "cache-first", - variables: { - execVar: true, - }, - }) - ); + const execPromise2 = result.current.exec({ + fetchPolicy: "cache-and-network", + nextFetchPolicy: "cache-first", + variables: { + execVar: true, + }, + }); + await act(() => execPromise2); + const execResult2 = await execPromise2; await waitFor( () => { @@ -1903,7 +1904,9 @@ describe("useLazyQuery Hook", () => { { interval: 1 } ); - const execResult = await act(() => result.current.exec()); + const execPromise = result.current.exec(); + await act(() => execPromise); + const execResult = await execPromise; expect(execResult.loading).toBe(false); expect(execResult.called).toBe(true); expect(execResult.data).toEqual({ counter: 1 }); From 28b705e588a98347895eef7fa6516898344c2d75 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Tue, 3 Dec 2024 10:08:59 +0100 Subject: [PATCH 48/58] remove `renderToRenderStream` --- package-lock.json | 6 +-- package.json | 2 +- .../__tests__/client/Query.test.tsx | 6 ++- .../__tests__/client/Subscription.test.tsx | 38 +++++++++---------- .../hoc/__tests__/queries/lifecycle.test.tsx | 16 ++++---- .../hooks/__tests__/useFragment.test.tsx | 33 ++++++++-------- .../hooks/__tests__/useSuspenseQuery.test.tsx | 10 +++-- 7 files changed, 59 insertions(+), 52 deletions(-) diff --git a/package-lock.json b/package-lock.json index 990137a2fff..a1613eb435b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,7 +40,7 @@ "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "6.4.6", "@testing-library/react": "^16.0.1", - "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@fab8705f2", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@04c222de7", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", @@ -3535,8 +3535,8 @@ }, "node_modules/@testing-library/react-render-stream": { "version": "0.0.0-semantically-released", - "resolved": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@fab8705f2", - "integrity": "sha512-LubzeLH6F6/n16p5nvpGBbB2GZFxAloEIu6til0SZs6RfQKZ+6/J2D4DkcjT4tDZK+3p0YjZ/i+SgVBV+rpmmQ==", + "resolved": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@04c222de7", + "integrity": "sha512-V1jKqrAXPjdNeuHeVeU376HxEYgkMDCQvu/OWc0SkxhmQdjy7ihfHbFzFG+lzl/TMETPBl+qCDULwTle/cnMSw==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index df36fda91fc..5dc5e0b6cfe 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,7 @@ "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "6.4.6", "@testing-library/react": "^16.0.1", - "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@fab8705f2", + "@testing-library/react-render-stream": "https://pkg.pr.new/testing-library/react-render-stream-testing-library/@testing-library/react-render-stream@04c222de7", "@testing-library/user-event": "14.5.2", "@tsconfig/node20": "20.1.4", "@types/bytes": "3.1.4", diff --git a/src/react/components/__tests__/client/Query.test.tsx b/src/react/components/__tests__/client/Query.test.tsx index 0087a406ec0..a97807838aa 100644 --- a/src/react/components/__tests__/client/Query.test.tsx +++ b/src/react/components/__tests__/client/Query.test.tsx @@ -13,7 +13,7 @@ import { Query } from "../../Query"; import { QueryResult } from "../../../types/types"; import { disableActEnvironment, - renderToRenderStream, + createRenderStream, } from "@testing-library/react-render-stream"; const allPeopleQuery: DocumentNode = gql` @@ -1504,7 +1504,9 @@ describe("Query component", () => { } using _disabledAct = disableActEnvironment(); - const { takeRender, replaceSnapshot } = renderToRenderStream( + const { takeRender, replaceSnapshot, render } = + createRenderStream(); + await render( diff --git a/src/react/components/__tests__/client/Subscription.test.tsx b/src/react/components/__tests__/client/Subscription.test.tsx index 945ccb4b13c..efe15db56c0 100644 --- a/src/react/components/__tests__/client/Subscription.test.tsx +++ b/src/react/components/__tests__/client/Subscription.test.tsx @@ -11,7 +11,7 @@ import { Subscription } from "../../Subscription"; import { spyOnConsole } from "../../../../testing/internal"; import { disableActEnvironment, - renderToRenderStream, + createRenderStream, } from "@testing-library/react-render-stream"; const results = [ @@ -439,13 +439,12 @@ describe("should update", () => { ); } using _disabledAct = disableActEnvironment(); - const { takeRender, replaceSnapshot, renderResultPromise } = - renderToRenderStream( - - - - ); - const { rerender } = await renderResultPromise; + const { takeRender, replaceSnapshot, render } = createRenderStream(); + const { rerender } = await render( + + + + ); { const { snapshot: { loading, data }, @@ -537,13 +536,15 @@ describe("should update", () => { } using _disabledAct = disableActEnvironment(); - const { takeRender, replaceSnapshot, renderResultPromise } = - renderToRenderStream(, { + const { takeRender, replaceSnapshot, render } = createRenderStream(); + const { rerender } = await render( + , + { wrapper: ({ children }) => ( {children} ), - }); - const { rerender } = await renderResultPromise; + } + ); { const { @@ -631,13 +632,12 @@ describe("should update", () => { ); } using _disabledAct = disableActEnvironment(); - const { takeRender, renderResultPromise, replaceSnapshot } = - renderToRenderStream(, { - wrapper: ({ children }) => ( - {children} - ), - }); - const { rerender } = await renderResultPromise; + const { takeRender, render, replaceSnapshot } = createRenderStream(); + const { rerender } = await render(, { + wrapper: ({ children }) => ( + {children} + ), + }); { const { diff --git a/src/react/hoc/__tests__/queries/lifecycle.test.tsx b/src/react/hoc/__tests__/queries/lifecycle.test.tsx index 5a4811ec02c..674bf048156 100644 --- a/src/react/hoc/__tests__/queries/lifecycle.test.tsx +++ b/src/react/hoc/__tests__/queries/lifecycle.test.tsx @@ -12,7 +12,7 @@ import { graphql } from "../../graphql"; import { ChildProps, DataValue } from "../../types"; import { disableActEnvironment, - renderToRenderStream, + createRenderStream, } from "@testing-library/react-render-stream"; describe("[queries] lifecycle", () => { @@ -62,13 +62,13 @@ describe("[queries] lifecycle", () => { ); using _disabledAct = disableActEnvironment(); - const { takeRender, replaceSnapshot, renderResultPromise } = - renderToRenderStream>(, { - wrapper: ({ children }) => ( - {children} - ), - }); - const { rerender } = await renderResultPromise; + const { takeRender, replaceSnapshot, render } = + createRenderStream>(); + const { rerender } = await render(, { + wrapper: ({ children }) => ( + {children} + ), + }); { const { snapshot } = await takeRender(); diff --git a/src/react/hooks/__tests__/useFragment.test.tsx b/src/react/hooks/__tests__/useFragment.test.tsx index 57812e45e72..c31e8e2b6e4 100644 --- a/src/react/hooks/__tests__/useFragment.test.tsx +++ b/src/react/hooks/__tests__/useFragment.test.tsx @@ -33,7 +33,7 @@ import { SubscriptionObserver } from "zen-observable-ts"; import { disableActEnvironment, renderHookToSnapshotStream, - renderToRenderStream, + createRenderStream, } from "@testing-library/react-render-stream"; import { spyOnConsole } from "../../../testing/internal"; @@ -1807,18 +1807,17 @@ describe("has the same timing as `useQuery`", () => { } using _disabledAct = disableActEnvironment(); - const { takeRender, replaceSnapshot } = renderToRenderStream( - , - { - initialSnapshot: { - queryData: undefined as any, - fragmentData: undefined as any, - }, - wrapper: ({ children }) => ( - {children} - ), - } - ); + const { takeRender, replaceSnapshot, render } = createRenderStream({ + initialSnapshot: { + queryData: undefined as any, + fragmentData: undefined as any, + }, + }); + await render(, { + wrapper: ({ children }) => ( + {children} + ), + }); { const { snapshot } = await takeRender(); @@ -1889,7 +1888,7 @@ describe("has the same timing as `useQuery`", () => { } using _disabledAct = disableActEnvironment(); - const { takeRender } = renderToRenderStream(, { + const { takeRender, render } = createRenderStream({ snapshotDOM: true, onRender() { const parent = screen.getByTestId("parent"); @@ -1901,6 +1900,8 @@ describe("has the same timing as `useQuery`", () => { within(children).queryAllByText(/Item #2/).length ); }, + }); + await render(, { wrapper: ({ children }) => ( {children} ), @@ -1981,7 +1982,7 @@ describe("has the same timing as `useQuery`", () => { } using _disabledAct = disableActEnvironment(); - const { takeRender } = renderToRenderStream(, { + const { takeRender, render } = createRenderStream({ onRender() { const parent = screen.getByTestId("parent"); const children = screen.getByTestId("children"); @@ -1992,6 +1993,8 @@ describe("has the same timing as `useQuery`", () => { within(children).queryAllByText(/Item #2/).length ); }, + }); + await render(, { wrapper: ({ children }) => ( {children} ), diff --git a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx index 163b4cd5766..cb26d825d44 100644 --- a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx +++ b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx @@ -64,7 +64,6 @@ import { import { createRenderStream, disableActEnvironment, - renderToRenderStream, useTrackRenders, } from "@testing-library/react-render-stream"; @@ -401,10 +400,12 @@ describe("useSuspenseQuery", () => { }); using _disabledAct = disableActEnvironment(); - const { takeRender, replaceSnapshot } = await renderToRenderStream< + const { takeRender, replaceSnapshot, render } = await createRenderStream< UseSuspenseQueryResult - >(, { + >({ snapshotDOM: true, + }); + await render(, { wrapper: ({ children }) => ( {children} ), @@ -9792,9 +9793,10 @@ describe("useSuspenseQuery", () => { } using _disabledAct = disableActEnvironment(); - const { takeRender } = await renderToRenderStream(, { + const { takeRender, render } = await createRenderStream({ snapshotDOM: true, }); + await render(); { const { withinDOM } = await takeRender(); From 35e3f7f536efc19bc8838cc7a859b3599e6a82c6 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Tue, 3 Dec 2024 11:31:16 +0100 Subject: [PATCH 49/58] enable `@typescript-eslint/no-floating-promises` lint rule --- .eslintrc | 3 +- .../__tests__/useBackgroundQuery.test.tsx | 20 ++--- .../hooks/__tests__/useFragment.test.tsx | 2 +- .../hooks/__tests__/useLazyQuery.test.tsx | 46 +++++----- .../hooks/__tests__/useLoadableQuery.test.tsx | 4 +- .../hooks/__tests__/useMutation.test.tsx | 47 +++++----- src/react/hooks/__tests__/useQuery.test.tsx | 88 +++++++++++-------- .../__tests__/useQueryRefHandlers.test.tsx | 46 +++++----- .../hooks/__tests__/useReactiveVar.test.tsx | 4 +- .../hooks/__tests__/useSubscription.test.tsx | 6 +- .../hooks/__tests__/useSuspenseQuery.test.tsx | 12 +-- 11 files changed, 147 insertions(+), 131 deletions(-) diff --git a/.eslintrc b/.eslintrc index 93b6da77d7d..66112674426 100644 --- a/.eslintrc +++ b/.eslintrc @@ -91,7 +91,8 @@ "testing-library/no-wait-for-multiple-assertions": "off", "local-rules/require-using-disposable": "error", "local-rules/require-disable-act-environment": "error", - "local-rules/forbid-act-in-disabled-act-environment": "error" + "local-rules/forbid-act-in-disabled-act-environment": "error", + "@typescript-eslint/no-floating-promises": "warn" } } ], diff --git a/src/react/hooks/__tests__/useBackgroundQuery.test.tsx b/src/react/hooks/__tests__/useBackgroundQuery.test.tsx index 8725a05e0b5..24cfa24c4e5 100644 --- a/src/react/hooks/__tests__/useBackgroundQuery.test.tsx +++ b/src/react/hooks/__tests__/useBackgroundQuery.test.tsx @@ -532,7 +532,7 @@ it("does not recreate queryRef and execute a network request when rerendering us await renderStream.takeRender(); await wait(0); - rerender(); + await rerender(); await renderStream.takeRender(); expect(fetchCount).toBe(1); @@ -702,7 +702,7 @@ it("disposes of old queryRefs when changing variables before the queryRef is use expect(renderedComponents).toStrictEqual([App]); } - rerender(); + await rerender(); await wait(10); @@ -1743,7 +1743,7 @@ it("reacts to variables updates", async () => { }); } - rerender(); + await rerender(); { const { renderedComponents } = await renderStream.takeRender(); @@ -2441,7 +2441,7 @@ it("result is referentially stable", async () => { result = snapshot.result; } - rerender(); + await rerender(); { const { snapshot } = await renderStream.takeRender(); @@ -3575,7 +3575,7 @@ it('suspends and does not use partial data from other variables in the cache whe }); } - rerender(); + await rerender(); { const { renderedComponents } = await renderStream.takeRender(); @@ -3910,7 +3910,7 @@ it('suspends and does not use partial data when changing variables and using a " }); } - rerender(); + await rerender(); { const { renderedComponents } = await renderStream.takeRender(); @@ -4217,7 +4217,7 @@ describe("refetch", () => { }); } - user.click(screen.getByText("Refetch")); + await user.click(screen.getByText("Refetch")); { // parent component re-suspends @@ -5161,7 +5161,7 @@ describe("refetch", () => {