From d701a571443f657d930fd666a6dd713aa81ab298 Mon Sep 17 00:00:00 2001 From: Alexander Johansson Date: Fri, 20 Dec 2024 10:54:28 +0100 Subject: [PATCH 01/11] wip --- .../regression-8434-transition.test.tsx | 109 ++++++++++++++++++ packages/react-query/vite.config.ts | 2 +- 2 files changed, 110 insertions(+), 1 deletion(-) create mode 100644 packages/react-query/src/__tests__/regression-8434-transition.test.tsx diff --git a/packages/react-query/src/__tests__/regression-8434-transition.test.tsx b/packages/react-query/src/__tests__/regression-8434-transition.test.tsx new file mode 100644 index 0000000000..926ce5b55d --- /dev/null +++ b/packages/react-query/src/__tests__/regression-8434-transition.test.tsx @@ -0,0 +1,109 @@ +import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest' +import * as React from 'react' +import {act, render, screen} from '@testing-library/react' +import { QueryClientProvider, useQuery } from '..' +import { QueryCache } from '../index' +import { createQueryClient, queryKey, sleep } from './utils' + +describe('react transitions', () => { + const queryCache = new QueryCache() + const queryClient = createQueryClient({ + queryCache, + }) + + beforeAll(() => { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + global.IS_REACT_ACT_ENVIRONMENT = true; + queryClient.setDefaultOptions({ + queries: { experimental_prefetchInRender: true }, + }) + }) + afterAll(() => { + queryClient.setDefaultOptions({ + queries: { experimental_prefetchInRender: false }, + }) + }) + + it('should keep values of old key around with startTransition', async () => { + const key = queryKey() + vi.useFakeTimers() + + function Loading() { + return <>loading... + } + + function Page() { + const [isPending, startTransition] = React.useTransition() + const [count, setCount] = React.useState(0) + const query = useQuery({ + queryKey: [key, count], + queryFn: async () => { + await sleep(10) + return 'test' + count + }, + }) + + const data = React.use(query.promise) + + return ( +
+ + {isPending && pending...} +
data: {data}
+
+ ) + } + + // Initial render should show fallback + await act(async () => { + render( + + }> + + + , + ); + }); + screen.getByText('loading...') + expect(screen.queryByText('button')).toBeNull() + expect(screen.queryByText('pending...')).toBeNull() + expect(screen.queryByText('data: test0')).toBeNull() + + // Resolve the query, should show the data + await act(async () => { + vi.runAllTimers(); + }); + expect(screen.queryByText('loading...')).toBeNull() + screen.getByRole('button') + expect(screen.queryByText('pending...')).toBeNull() + screen.getByText('data: test0'); + + // Update in a transition, should show pending state, and existing content + await act(async () => { + screen.getByRole('button', {name: 'increment'}).click() + }); + expect(screen.queryByText('loading...')).toBeNull() + screen.getByRole('button') + screen.getByText('pending...') + screen.getByText('data: test0'); + + + await act(async () => { + screen.getByRole('button', {name: 'increment'}).click() + }); + + // Resolve the query, should show the new data and no pending state + await act(async () => { + vi.runAllTimers(); + }); + expect(screen.queryByText('loading...')).toBeNull() + screen.getByRole('button') + expect(screen.queryByText('pending...')).toBeNull() + screen.getByText('data: test2'); + }) +}) \ No newline at end of file diff --git a/packages/react-query/vite.config.ts b/packages/react-query/vite.config.ts index fba5f8d044..515825d864 100644 --- a/packages/react-query/vite.config.ts +++ b/packages/react-query/vite.config.ts @@ -10,7 +10,7 @@ export default defineConfig({ watch: false, environment: 'jsdom', setupFiles: ['test-setup.ts'], - coverage: { enabled: true, provider: 'istanbul', include: ['src/**/*'] }, + coverage: { enabled: false, provider: 'istanbul', include: ['src/**/*'] }, typecheck: { enabled: true }, restoreMocks: true, retry: process.env.CI ? 3 : 0, From f5b14317bcee69243420ac427bfda8d21c231ad3 Mon Sep 17 00:00:00 2001 From: Alexander Johansson Date: Fri, 20 Dec 2024 10:57:09 +0100 Subject: [PATCH 02/11] add example project --- examples/react/transition/.eslintrc | 3 + examples/react/transition/.gitignore | 27 +++++ examples/react/transition/README.md | 6 ++ examples/react/transition/index.html | 16 +++ examples/react/transition/package.json | 21 ++++ .../react/transition/public/emblem-light.svg | 13 +++ examples/react/transition/src/index.tsx | 102 ++++++++++++++++++ examples/react/transition/tsconfig.json | 24 +++++ examples/react/transition/vite.config.ts | 6 ++ 9 files changed, 218 insertions(+) create mode 100644 examples/react/transition/.eslintrc create mode 100644 examples/react/transition/.gitignore create mode 100644 examples/react/transition/README.md create mode 100644 examples/react/transition/index.html create mode 100644 examples/react/transition/package.json create mode 100644 examples/react/transition/public/emblem-light.svg create mode 100755 examples/react/transition/src/index.tsx create mode 100644 examples/react/transition/tsconfig.json create mode 100644 examples/react/transition/vite.config.ts diff --git a/examples/react/transition/.eslintrc b/examples/react/transition/.eslintrc new file mode 100644 index 0000000000..4e03b9e10b --- /dev/null +++ b/examples/react/transition/.eslintrc @@ -0,0 +1,3 @@ +{ + "extends": ["plugin:react/jsx-runtime", "plugin:react-hooks/recommended"] +} diff --git a/examples/react/transition/.gitignore b/examples/react/transition/.gitignore new file mode 100644 index 0000000000..4673b022e5 --- /dev/null +++ b/examples/react/transition/.gitignore @@ -0,0 +1,27 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +pnpm-lock.yaml +yarn.lock +package-lock.json + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/examples/react/transition/README.md b/examples/react/transition/README.md new file mode 100644 index 0000000000..93f18812e1 --- /dev/null +++ b/examples/react/transition/README.md @@ -0,0 +1,6 @@ +# Example + +To run this example: + +- `pnpm install` +- `pnpm dev` diff --git a/examples/react/transition/index.html b/examples/react/transition/index.html new file mode 100644 index 0000000000..aca35c1a17 --- /dev/null +++ b/examples/react/transition/index.html @@ -0,0 +1,16 @@ + + + + + + + + + TanStack Query React Suspense Example App + + + +
+ + + diff --git a/examples/react/transition/package.json b/examples/react/transition/package.json new file mode 100644 index 0000000000..17d5de31b4 --- /dev/null +++ b/examples/react/transition/package.json @@ -0,0 +1,21 @@ +{ + "name": "@tanstack/query-example-react-transition", + "private": true, + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "@tanstack/react-query": "^5.62.8", + "@tanstack/react-query-devtools": "^5.62.8", + "react": "^19.0.0", + "react-dom": "^19.0.0" + }, + "devDependencies": { + "@vitejs/plugin-react": "^4.3.3", + "typescript": "5.7.2", + "vite": "^5.3.5" + } +} diff --git a/examples/react/transition/public/emblem-light.svg b/examples/react/transition/public/emblem-light.svg new file mode 100644 index 0000000000..a58e69ad5e --- /dev/null +++ b/examples/react/transition/public/emblem-light.svg @@ -0,0 +1,13 @@ + + + + emblem-light + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/examples/react/transition/src/index.tsx b/examples/react/transition/src/index.tsx new file mode 100755 index 0000000000..294f3c930b --- /dev/null +++ b/examples/react/transition/src/index.tsx @@ -0,0 +1,102 @@ +import { + QueryClient, + QueryClientProvider, + useQuery, +} from '@tanstack/react-query' +import { Suspense, use, useState, useTransition } from 'react' +import ReactDOM from 'react-dom/client' + +const Example1 = ({ value }: { value: number }) => { + const { isFetching, promise } = useQuery({ + queryKey: ['1' + value], + queryFn: async () => { + await new Promise((resolve) => setTimeout(resolve, 1000)) + return '1' + value + }, + }) + const data = use(promise) + + return ( +
+ {data} {isFetching ? 'fetching' : null} +
+ ) +} + +const Example2 = ({ value }: { value: number }) => { + const { promise, isFetching } = useQuery({ + queryKey: ['2' + value], + queryFn: async () => { + await new Promise((resolve) => setTimeout(resolve, 2000)) + return '2' + value + }, + // placeholderData: keepPreviousData, + }) + + const data = use(promise) + + return ( +
+ {data} {isFetching ? 'fetching' : null} +
+ ) +} + +const SuspenseBoundary = () => { + const [state, setState] = useState(-1) + const [isPending, startTransition] = useTransition() + + return ( +
+

Change state with transition

+
+ +
+

State:

+
    +
  • last state value: {state}
    • +
  • + transition state: {isPending ? pending : 'idle'} +
    • +
+

2. 1 Suspense + startTransition

+ + + +

2.2 Suspense + startTransition

+ + + +
+ ) +} + +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + experimental_prefetchInRender: true, + staleTime: 10 * 1000, + }, + }, +}) + +const App = () => { + return ( +
+ + + +
+ ) +} + +const rootElement = document.getElementById('root') as HTMLElement +ReactDOM.createRoot(rootElement).render() diff --git a/examples/react/transition/tsconfig.json b/examples/react/transition/tsconfig.json new file mode 100644 index 0000000000..23a8707ef4 --- /dev/null +++ b/examples/react/transition/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "Bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src", "eslint.config.js"] +} diff --git a/examples/react/transition/vite.config.ts b/examples/react/transition/vite.config.ts new file mode 100644 index 0000000000..9ffcc67574 --- /dev/null +++ b/examples/react/transition/vite.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +export default defineConfig({ + plugins: [react()], +}) From aded5cf840c162c30bcd1447a1b2a7d0583a5456 Mon Sep 17 00:00:00 2001 From: Alexander Johansson Date: Fri, 20 Dec 2024 10:57:28 +0100 Subject: [PATCH 03/11] wip --- pnpm-lock.yaml | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ef044253a2..3d2f90c826 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1313,6 +1313,31 @@ importers: specifier: ^5.3.5 version: 5.4.11(@types/node@22.9.3)(less@4.2.1)(lightningcss@1.27.0)(sass@1.81.0)(terser@5.31.6) + examples/react/transition: + dependencies: + '@tanstack/react-query': + specifier: ^5.62.8 + version: link:../../../packages/react-query + '@tanstack/react-query-devtools': + specifier: ^5.62.8 + version: link:../../../packages/react-query-devtools + react: + specifier: ^19.0.0 + version: 19.0.0 + react-dom: + specifier: ^19.0.0 + version: 19.0.0(react@19.0.0) + devDependencies: + '@vitejs/plugin-react': + specifier: ^4.3.3 + version: 4.3.3(vite@5.4.11(@types/node@22.9.3)(less@4.2.1)(lightningcss@1.27.0)(sass@1.81.0)(terser@5.31.6)) + typescript: + specifier: 5.7.2 + version: 5.7.2 + vite: + specifier: ^5.3.5 + version: 5.4.11(@types/node@22.9.3)(less@4.2.1)(lightningcss@1.27.0)(sass@1.81.0)(terser@5.31.6) + examples/solid/astro: dependencies: '@astrojs/check': From 39eb7b52975e799583066a0c7ece62a067ec78f5 Mon Sep 17 00:00:00 2001 From: Alexander Johansson Date: Fri, 20 Dec 2024 11:03:28 +0100 Subject: [PATCH 04/11] ok fails --- examples/react/transition/src/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/react/transition/src/index.tsx b/examples/react/transition/src/index.tsx index 294f3c930b..a8f03fee3b 100755 --- a/examples/react/transition/src/index.tsx +++ b/examples/react/transition/src/index.tsx @@ -27,7 +27,7 @@ const Example2 = ({ value }: { value: number }) => { const { promise, isFetching } = useQuery({ queryKey: ['2' + value], queryFn: async () => { - await new Promise((resolve) => setTimeout(resolve, 2000)) + await new Promise((resolve) => setTimeout(resolve, 1000)) return '2' + value }, // placeholderData: keepPreviousData, From e3ded09b1ca27901b6e24035c273f83910b3e4a5 Mon Sep 17 00:00:00 2001 From: Alexander Johansson Date: Fri, 20 Dec 2024 11:22:06 +0100 Subject: [PATCH 05/11] maybe --- .../regression-8434-transition.test.tsx | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/packages/react-query/src/__tests__/regression-8434-transition.test.tsx b/packages/react-query/src/__tests__/regression-8434-transition.test.tsx index 926ce5b55d..c4952d8c2b 100644 --- a/packages/react-query/src/__tests__/regression-8434-transition.test.tsx +++ b/packages/react-query/src/__tests__/regression-8434-transition.test.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/require-await */ import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest' import * as React from 'react' import {act, render, screen} from '@testing-library/react' @@ -27,7 +28,7 @@ describe('react transitions', () => { it('should keep values of old key around with startTransition', async () => { const key = queryKey() - vi.useFakeTimers() + const resolveByCount: Record void> = {} function Loading() { return <>loading... @@ -39,7 +40,9 @@ describe('react transitions', () => { const query = useQuery({ queryKey: [key, count], queryFn: async () => { - await sleep(10) + await new Promise((resolve) => { + resolveByCount[count] = resolve + }) return 'test' + count }, }) @@ -76,7 +79,7 @@ describe('react transitions', () => { // Resolve the query, should show the data await act(async () => { - vi.runAllTimers(); + resolveByCount[0]!() }); expect(screen.queryByText('loading...')).toBeNull() screen.getByRole('button') @@ -87,23 +90,22 @@ describe('react transitions', () => { await act(async () => { screen.getByRole('button', {name: 'increment'}).click() }); + expect(screen.queryByText('loading...')).toBeNull() - screen.getByRole('button') - screen.getByText('pending...') - screen.getByText('data: test0'); + expect(screen.queryByText('pending...')).not.toBeNull() + // resolve outside of transition + resolveByCount[1]!() - await act(async () => { - screen.getByRole('button', {name: 'increment'}).click() - }); + // wait 1 tick + await sleep(0) - // Resolve the query, should show the new data and no pending state + // wait for transition to finish await act(async () => { - vi.runAllTimers(); }); + expect(screen.queryByText('loading...')).toBeNull() - screen.getByRole('button') expect(screen.queryByText('pending...')).toBeNull() - screen.getByText('data: test2'); + screen.getByText('data: test1'); }) }) \ No newline at end of file From 90db4915e1e00700ecd4ca7b148a867a6b6ef1d3 Mon Sep 17 00:00:00 2001 From: Alexander Johansson Date: Fri, 20 Dec 2024 11:33:24 +0100 Subject: [PATCH 06/11] maybe??!?!?! --- .../regression-8434-transition.test.tsx | 42 ++++++++----------- 1 file changed, 17 insertions(+), 25 deletions(-) diff --git a/packages/react-query/src/__tests__/regression-8434-transition.test.tsx b/packages/react-query/src/__tests__/regression-8434-transition.test.tsx index c4952d8c2b..4849c4d9c1 100644 --- a/packages/react-query/src/__tests__/regression-8434-transition.test.tsx +++ b/packages/react-query/src/__tests__/regression-8434-transition.test.tsx @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/require-await */ import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest' import * as React from 'react' -import {act, render, screen} from '@testing-library/react' +import { act, render, screen } from '@testing-library/react' import { QueryClientProvider, useQuery } from '..' import { QueryCache } from '../index' import { createQueryClient, queryKey, sleep } from './utils' @@ -15,7 +15,7 @@ describe('react transitions', () => { beforeAll(() => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - global.IS_REACT_ACT_ENVIRONMENT = true; + global.IS_REACT_ACT_ENVIRONMENT = true queryClient.setDefaultOptions({ queries: { experimental_prefetchInRender: true }, }) @@ -51,9 +51,7 @@ describe('react transitions', () => { return (
- {isPending && pending...} @@ -66,12 +64,12 @@ describe('react transitions', () => { await act(async () => { render( - }> - + }> + , - ); - }); + ) + }) screen.getByText('loading...') expect(screen.queryByText('button')).toBeNull() expect(screen.queryByText('pending...')).toBeNull() @@ -80,32 +78,26 @@ describe('react transitions', () => { // Resolve the query, should show the data await act(async () => { resolveByCount[0]!() - }); + }) expect(screen.queryByText('loading...')).toBeNull() screen.getByRole('button') expect(screen.queryByText('pending...')).toBeNull() - screen.getByText('data: test0'); + screen.getByText('data: test0') // Update in a transition, should show pending state, and existing content await act(async () => { - screen.getByRole('button', {name: 'increment'}).click() - }); - + screen.getByRole('button', { name: 'increment' }).click() + }) + expect(screen.queryByText('loading...')).toBeNull() expect(screen.queryByText('pending...')).not.toBeNull() - // resolve outside of transition - resolveByCount[1]!() - - // wait 1 tick - await sleep(0) - - // wait for transition to finish - await act(async () => { - }); + act(() => { + resolveByCount[1]!() + }) expect(screen.queryByText('loading...')).toBeNull() expect(screen.queryByText('pending...')).toBeNull() - screen.getByText('data: test1'); + screen.getByText('data: test1') }) -}) \ No newline at end of file +}) From 996daa0c76988772fac523d9701bceb0964926a1 Mon Sep 17 00:00:00 2001 From: Alexander Johansson Date: Fri, 20 Dec 2024 11:39:47 +0100 Subject: [PATCH 07/11] meep --- .../regression-8434-transition.test.tsx | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/react-query/src/__tests__/regression-8434-transition.test.tsx b/packages/react-query/src/__tests__/regression-8434-transition.test.tsx index 4849c4d9c1..1e4abaafec 100644 --- a/packages/react-query/src/__tests__/regression-8434-transition.test.tsx +++ b/packages/react-query/src/__tests__/regression-8434-transition.test.tsx @@ -86,18 +86,21 @@ describe('react transitions', () => { // Update in a transition, should show pending state, and existing content await act(async () => { - screen.getByRole('button', { name: 'increment' }).click() - }) - - expect(screen.queryByText('loading...')).toBeNull() - expect(screen.queryByText('pending...')).not.toBeNull() - - act(() => { - resolveByCount[1]!() + for (let i = 0; i < 100; i++) { + screen.getByRole('button', { name: 'increment' }).click() + } }) + + // resolve all + for (const resolve of Object.values(resolveByCount)) { + await sleep(1) + await act(async () => { + resolve() + }) + } expect(screen.queryByText('loading...')).toBeNull() expect(screen.queryByText('pending...')).toBeNull() - screen.getByText('data: test1') + screen.getByText('data: test100') }) }) From 969c1c87611c45d55a4b44193b65f38bd4ed67e0 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Fri, 20 Dec 2024 10:41:43 +0000 Subject: [PATCH 08/11] ci: apply automated fixes --- .../src/__tests__/regression-8434-transition.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-query/src/__tests__/regression-8434-transition.test.tsx b/packages/react-query/src/__tests__/regression-8434-transition.test.tsx index 1e4abaafec..312729b71a 100644 --- a/packages/react-query/src/__tests__/regression-8434-transition.test.tsx +++ b/packages/react-query/src/__tests__/regression-8434-transition.test.tsx @@ -90,8 +90,8 @@ describe('react transitions', () => { screen.getByRole('button', { name: 'increment' }).click() } }) - - // resolve all + + // resolve all for (const resolve of Object.values(resolveByCount)) { await sleep(1) await act(async () => { From aaff18f2c375a4196a466e600644cdae4cd3bb37 Mon Sep 17 00:00:00 2001 From: Alexander Johansson Date: Fri, 20 Dec 2024 12:44:31 +0100 Subject: [PATCH 09/11] meep --- .../src/__tests__/regression-8434-transition.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-query/src/__tests__/regression-8434-transition.test.tsx b/packages/react-query/src/__tests__/regression-8434-transition.test.tsx index 312729b71a..f370275457 100644 --- a/packages/react-query/src/__tests__/regression-8434-transition.test.tsx +++ b/packages/react-query/src/__tests__/regression-8434-transition.test.tsx @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/require-await */ -import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest' -import * as React from 'react' import { act, render, screen } from '@testing-library/react' +import * as React from 'react' +import { afterAll, beforeAll, describe, expect, it } from 'vitest' import { QueryClientProvider, useQuery } from '..' import { QueryCache } from '../index' import { createQueryClient, queryKey, sleep } from './utils' From dcf9eb19a7146586093c26e48460b6819d2d31a1 Mon Sep 17 00:00:00 2001 From: Alexander Johansson Date: Fri, 20 Dec 2024 12:51:36 +0100 Subject: [PATCH 10/11] meep --- ...34-transition.test.tsx => regression-8384-transition.test.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/react-query/src/__tests__/{regression-8434-transition.test.tsx => regression-8384-transition.test.tsx} (100%) diff --git a/packages/react-query/src/__tests__/regression-8434-transition.test.tsx b/packages/react-query/src/__tests__/regression-8384-transition.test.tsx similarity index 100% rename from packages/react-query/src/__tests__/regression-8434-transition.test.tsx rename to packages/react-query/src/__tests__/regression-8384-transition.test.tsx From 91b0e2cc5a1687cda7e72d397d2b1beecb73e38b Mon Sep 17 00:00:00 2001 From: Alexander Johansson Date: Fri, 20 Dec 2024 18:23:19 +0100 Subject: [PATCH 11/11] what --- .../src/__tests__/regression-8384-transition.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-query/src/__tests__/regression-8384-transition.test.tsx b/packages/react-query/src/__tests__/regression-8384-transition.test.tsx index f370275457..14a47804ed 100644 --- a/packages/react-query/src/__tests__/regression-8384-transition.test.tsx +++ b/packages/react-query/src/__tests__/regression-8384-transition.test.tsx @@ -79,6 +79,7 @@ describe('react transitions', () => { await act(async () => { resolveByCount[0]!() }) + // HELP WANTED - get the below to fail as the repro does expect(screen.queryByText('loading...')).toBeNull() screen.getByRole('button') expect(screen.queryByText('pending...')).toBeNull()