Skip to content

Conversation

@manudeli
Copy link
Collaborator

@manudeli manudeli commented May 2, 2025

Why

There are many shared test utilities like sleep, mockVisibilityState, etc., duplicated across multiple @tanstack/* packages. This makes it hard to maintain consistency and often leads to minor discrepancies in behavior.

To address this, I’ve made a new internal package: @tanstack/query-test-utils under packages/query-test-utils, which centralizes these test utilities.

Ask

Please let me know if you're okay with adding this internal package for shared testing purposes. I'm happy to revise the approach if there's a better alternative!

@nx-cloud
Copy link

nx-cloud bot commented May 2, 2025

View your CI Pipeline Execution ↗ for commit eb1f343.

Command Status Duration Result
nx affected --targets=test:sherif,test:knip,tes... ✅ Succeeded 2m 41s View ↗
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 1m 46s View ↗

☁️ Nx Cloud last updated this comment at 2025-05-07 13:28:36 UTC

@manudeli manudeli force-pushed the query-test-utils/init branch 4 times, most recently from e3038ad to b9e67d1 Compare May 2, 2025 09:08
@pkg-pr-new
Copy link

pkg-pr-new bot commented May 2, 2025

More templates

@tanstack/angular-query-devtools-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@9095

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@9095

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@9095

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@9095

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@9095

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@9095

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@9095

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@9095

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@9095

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@9095

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@9095

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@9095

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@9095

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@9095

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@9095

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@9095

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@9095

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@9095

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@9095

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@9095

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@9095

commit: eb1f343

@codecov
Copy link

codecov bot commented May 2, 2025

Codecov Report

Attention: Patch coverage is 77.77778% with 2 lines in your changes missing coverage. Please review.

Project coverage is 44.55%. Comparing base (373546b) to head (eb1f343).
Report is 2 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #9095      +/-   ##
==========================================
+ Coverage   44.53%   44.55%   +0.01%     
==========================================
  Files         204      207       +3     
  Lines        8150     8159       +9     
  Branches     1828     1820       -8     
==========================================
+ Hits         3630     3635       +5     
- Misses       4077     4081       +4     
  Partials      443      443              
Components Coverage Δ
@tanstack/angular-query-devtools-experimental ∅ <ø> (∅)
@tanstack/angular-query-experimental 85.04% <ø> (ø)
@tanstack/eslint-plugin-query 83.02% <ø> (ø)
@tanstack/query-async-storage-persister 43.85% <ø> (ø)
@tanstack/query-broadcast-client-experimental 24.39% <ø> (ø)
@tanstack/query-codemods 0.00% <ø> (ø)
@tanstack/query-core 96.14% <ø> (ø)
@tanstack/query-devtools 3.61% <ø> (ø)
@tanstack/query-persist-client-core 73.46% <ø> (ø)
@tanstack/query-sync-storage-persister 84.61% <ø> (ø)
@tanstack/query-test-utils 77.77% <77.77%> (∅)
@tanstack/react-query 95.42% <ø> (ø)
@tanstack/react-query-devtools 10.00% <ø> (ø)
@tanstack/react-query-next-experimental ∅ <ø> (∅)
@tanstack/react-query-persist-client 100.00% <ø> (ø)
@tanstack/solid-query 77.84% <ø> (-0.64%) ⬇️
@tanstack/solid-query-devtools ∅ <ø> (∅)
@tanstack/solid-query-persist-client 100.00% <ø> (ø)
@tanstack/svelte-query 88.15% <ø> (ø)
@tanstack/svelte-query-devtools ∅ <ø> (∅)
@tanstack/svelte-query-persist-client 100.00% <ø> (ø)
@tanstack/vue-query 71.10% <ø> (ø)
@tanstack/vue-query-devtools ∅ <ø> (∅)
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@manudeli manudeli force-pushed the query-test-utils/init branch 2 times, most recently from 73d0c27 to 7e9683f Compare May 2, 2025 17:47
Copy link
Collaborator Author

@manudeli manudeli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR is for an internal query-test-utils package that consolidates common test utilities such as sleep, mockVisibilityState, and others, which were previously duplicated across various TanStack Query packages. This helps reduce redundancy and improve test consistency across packages.

Comment on lines -1 to -52
/* istanbul ignore file */

export function flushPromises(timeout = 0): Promise<unknown> {
return new Promise(function (resolve) {
setTimeout(resolve, timeout)
})
}

export function simpleFetcher(): Promise<string> {
return new Promise((resolve) => {
setTimeout(() => {
return resolve('Some data')
}, 0)
})
}

export function getSimpleFetcherWithReturnData(returnData: unknown) {
return () =>
new Promise((resolve) => setTimeout(() => resolve(returnData), 0))
}

export function infiniteFetcher({
pageParam,
}: {
pageParam?: number
}): Promise<string> {
return new Promise((resolve) => {
setTimeout(() => {
return resolve('data on page ' + pageParam)
}, 0)
})
}

export function rejectFetcher(): Promise<Error> {
return new Promise((_, reject) => {
setTimeout(() => {
return reject(new Error('Some error'))
}, 0)
})
}

export function successMutator<T>(param: T): Promise<T> {
return new Promise((resolve) => {
setTimeout(() => {
return resolve(param)
}, 0)
})
}

export function errorMutator<T>(_: T): Promise<Error> {
return rejectFetcher()
}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unify these

Comment on lines -1 to -5
export function sleep(timeout: number): Promise<void> {
return new Promise((resolve, _reject) => {
setTimeout(resolve, timeout)
})
}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unify these

Comment on lines -1 to -14
import { QueryClient } from '@tanstack/svelte-query'

import type { QueryClientConfig } from '@tanstack/svelte-query'

export function createQueryClient(config?: QueryClientConfig): QueryClient {
return new QueryClient(config)
}

export function sleep(timeout: number): Promise<void> {
return new Promise((resolve, _reject) => {
setTimeout(resolve, timeout)
})
}

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unify these

Comment on lines -51 to -56
export function sleep(timeout: number): Promise<void> {
return new Promise((resolve, _reject) => {
setTimeout(resolve, timeout)
})
}

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unify these

Comment on lines -9 to -14
let queryKeyCount = 0
export function queryKey() {
queryKeyCount++
return [`query_${queryKeyCount}`]
}

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unify these

Comment on lines -45 to -53
export function createQueryClient(config?: QueryClientConfig): QueryClient {
return new QueryClient(config)
}

export function mockVisibilityState(
value: DocumentVisibilityState,
): MockInstance<() => DocumentVisibilityState> {
return vi.spyOn(document, 'visibilityState', 'get').mockReturnValue(value)
}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unify these

Comment on lines -61 to -71
let queryKeyCount = 0
export function queryKey(): Array<string> {
queryKeyCount++
return [`query_${queryKeyCount}`]
}

export function sleep(timeout: number): Promise<void> {
return new Promise((resolve, _reject) => {
setTimeout(resolve, timeout)
})
}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unify these

Comment on lines -1 to -18
import { QueryClient } from '@tanstack/react-query'
import type { QueryClientConfig } from '@tanstack/react-query'

export function createQueryClient(config?: QueryClientConfig): QueryClient {
return new QueryClient(config)
}

let queryKeyCount = 0
export function queryKey(): Array<string> {
queryKeyCount++
return [`query_${queryKeyCount}`]
}

export function sleep(timeout: number): Promise<void> {
return new Promise((resolve, _reject) => {
setTimeout(resolve, timeout)
})
}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unify these

Comment on lines -1 to -5
export function sleep(timeout: number): Promise<void> {
return new Promise((resolve, _reject) => {
setTimeout(resolve, timeout)
})
}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unify these

Comment on lines -6 to -14
export function createQueryClient(config?: QueryClientConfig): QueryClient {
return new QueryClient(config)
}

function sleep(timeout: number): Promise<void> {
return new Promise((resolve, _reject) => {
setTimeout(resolve, timeout)
})
}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unify these

@manudeli manudeli marked this pull request as ready for review May 2, 2025 18:09
@manudeli manudeli requested a review from Copilot May 2, 2025 18:09
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR introduces an internal package (@tanstack/query-test-utils) for shared testing utilities, streamlining the usage of functions like sleep and standardizing the instantiation of QueryClient across various test files. Key changes include replacing duplicated local test utilities with imports from the new package, and updating test files to use new QueryClient() instead of a custom createQueryClient() helper.

Reviewed Changes

Copilot reviewed 116 out of 117 changed files in this pull request and generated no comments.

Show a summary per file
File Description
packages/query-core/src/tests/infiniteQueryObserver.test.tsx Replaced local test utils with shared ones and updated QueryClient instantiation.
packages/query-core/src/tests/infiniteQueryObserver.test-d.tsx Updated imports and QueryClient instantiation for type tests.
packages/query-core/src/tests/infiniteQueryBehavior.test.tsx Uniformly replaced local sleep and createQueryClient with shared utilities and new QueryClient.
packages/query-core/src/tests/hydration.test.tsx Refactored dehydration/rehydration tests to use the shared sleep function and direct QueryClient instantiation.
packages/query-async-storage-persister/src/tests/utils.ts Removed duplicated sleep function in favor of the shared package.
packages/query-async-storage-persister/src/tests/asyncThrottle.test.ts Updated tests to use shared sleep function instead of local delay.
packages/angular-query-persist-client/src/tests/with-persist-query-client.test.ts Adjusted import order to use shared query-test-utils.
packages/angular-query-persist-client/src/tests/utils.ts Removed duplicate utility functions in favor of the shared package.
packages/angular-query-experimental/src/tests/* Across multiple files, updated query and mutation functions to use the shared sleep utility and adjusted error/promise handling accordingly.
codecov.yml Added the new package to the code coverage configuration.
Files not reviewed (1)
  • package.json: Language not supported

@manudeli manudeli self-assigned this May 2, 2025
@manudeli manudeli requested a review from lachlancollins May 2, 2025 18:14
Copy link
Collaborator

@TkDodo TkDodo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thank you 🙏

@manudeli manudeli requested a review from TkDodo May 4, 2025 14:12
@manudeli manudeli force-pushed the query-test-utils/init branch 2 times, most recently from 89c0431 to 11f4dd5 Compare May 6, 2025 17:18
@manudeli manudeli force-pushed the query-test-utils/init branch from 11f4dd5 to 4c28e94 Compare May 6, 2025 19:08
@TkDodo TkDodo merged commit d0552af into TanStack:main May 7, 2025
7 checks passed
minseong0324 pushed a commit to minseong0324/Tanstack-query that referenced this pull request May 7, 2025
* test(query-test-utils): init

* refactor(tests): replace createQueryClient with new QueryClient instantiation across test files

* refactor(tests): remove unused imports in utils test file

* refactor(tests): replace fetcher functions with sleep-based implementations in query tests

* refactor(tests): replace simpleFetcher with sleep-based implementations in query tests

* fix(query-core): update test:build script to remove pnpm prefix

* refactor(tests): extract query function into a variable for clarity in useQuery tests

* chore(tsconfig): remove temporary Vitest TypeScript configuration file

* chore: add @tanstack/query-test-utils as a devDependency in multiple packages

---------

Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants