Upgrade to Vitest v4 #9862
Upgrade to Vitest v4 #9862
Conversation
|
WalkthroughVite devDependency upgraded from ^6.3.6 to ^6.4.1 across 30+ example and integration package.json files, with root-level dependencies ( Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Areas requiring attention:
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
TkDodo
left a comment
TkDodo
left a comment
There was a problem hiding this comment.
awesome. can you please fix the conflicts and I’ll try to ship it
|
|
||
| expect(queryFn).toHaveBeenCalledOnce() | ||
| expect(queryFn).toHaveBeenCalledWith(context) | ||
| expect(queryFn).toHaveBeenCalledExactlyOnceWith(context) |
There was a problem hiding this comment.
oh this is a nice new matcher 👍
|
|
||
| afterEach(() => { | ||
| vi.useRealTimers() | ||
| Fallback.mockClear() |
There was a problem hiding this comment.
Left over from debugging why the test broke on the upgrade. Forgot to remove sorry
|
@TkDodo sorry missed these comments will get this fixed tomorrow/day after |
|
@TkDodo Fixed merge conflicts but now one test is failing, need to double check why |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (9)
examples/react/optimistic-updates-ui/next-env.d.ts (1)
3-3: Same concern as previous next-env.d.ts files.This file has the same manual edit concern raised for
examples/react/infinite-query-with-max-pages/next-env.d.ts. Please verify these imports are auto-generated by Next.js tooling.examples/react/optimistic-updates-cache/tsconfig.json (1)
9-9: Same JSX runtime concern as other tsconfig files.This JSX runtime change from
"preserve"to"react-jsx"has the same compatibility implications flagged inexamples/react/prefetching/tsconfig.json. Please verify this is intentional and tested across all affected examples.examples/react/optimistic-updates-ui/tsconfig.json (1)
9-9: Same JSX runtime concern as other tsconfig files.Duplicate of the JSX runtime compatibility concern raised in previous tsconfig.json files.
examples/react/nextjs-suspense-streaming/tsconfig.json (1)
19-19: Same JSX runtime concern as other tsconfig files.This is the same JSX runtime change flagged in multiple other tsconfig.json files. Verify compatibility and intentionality.
examples/react/auto-refetching/next-env.d.ts (1)
3-3: Same concern as other next-env.d.ts files.Duplicate of the auto-generated file editing concern raised for previous next-env.d.ts files.
examples/react/pagination/tsconfig.json (1)
18-18: Same JSX runtime concern as other tsconfig files.This is the same JSX runtime compatibility concern raised across multiple tsconfig.json files in this PR.
examples/react/load-more-infinite-scroll/tsconfig.json (1)
18-18: Verify JSX runtime change is intentional.Same concern as in
examples/react/auto-refetching/tsconfig.json- thejsxoption changed from"preserve"to"react-jsx". Please verify this is intentional and compatible with the React version used in this example.examples/react/nextjs-app-prefetching/tsconfig.json (1)
19-19: Verify JSX runtime change is intentional.Same JSX runtime change from
"preserve"to"react-jsx"as in other examples. Please verify this is intentional and compatible.examples/react/nextjs/tsconfig.json (1)
18-18: Verify JSX runtime change is intentional.Same JSX runtime change from
"preserve"to"react-jsx"as in other examples. Please confirm this is intentional and part of the Vitest v4 upgrade requirements.
🧹 Nitpick comments (6)
examples/solid/default-query-function/package.json (1)
17-17: Consider using exact version "6.4.1" if strict pinning is required.The caret in
^6.4.1allows minor and patch updates (6.4.x, 6.x where x ≥ 4) rather than pinning to the exact version. If the PR aims to pin the Vite version as mentioned in the description, use"vite": "6.4.1"instead. Vite 6.4.1 is secure with no known vulnerabilities.examples/react/prefetching/tsconfig.json (1)
3-7: LGTM: Formatting improvements.The multi-line formatting of the
lib,include, andexcludearrays improves readability with no semantic changes.Also applies to: 22-29
examples/react/optimistic-updates-cache/tsconfig.json (1)
5-8: LGTM: Formatting improvements.The multi-line formatting of the configuration arrays improves readability without changing behavior.
Also applies to: 21-26
examples/react/optimistic-updates-ui/tsconfig.json (1)
5-8: LGTM: Formatting improvements.Multi-line array formatting enhances readability with no semantic changes.
Also applies to: 21-26
examples/react/nextjs-suspense-streaming/tsconfig.json (1)
4-8: LGTM: Formatting improvements.Multi-line formatting improves readability without semantic changes.
Also applies to: 34-36
examples/react/pagination/tsconfig.json (1)
3-7: LGTM: Formatting improvements.The multi-line array formatting enhances readability with no semantic changes.
Also applies to: 22-29
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (50)
eslint.config.js(1 hunks)examples/react/algolia/package.json(1 hunks)examples/react/auto-refetching/next-env.d.ts(1 hunks)examples/react/auto-refetching/tsconfig.json(2 hunks)examples/react/basic-graphql-request/package.json(1 hunks)examples/react/basic/package.json(1 hunks)examples/react/chat/package.json(1 hunks)examples/react/default-query-function/package.json(1 hunks)examples/react/devtools-panel/package.json(1 hunks)examples/react/eslint-legacy/package.json(1 hunks)examples/react/infinite-query-with-max-pages/next-env.d.ts(1 hunks)examples/react/infinite-query-with-max-pages/tsconfig.json(2 hunks)examples/react/load-more-infinite-scroll/next-env.d.ts(1 hunks)examples/react/load-more-infinite-scroll/tsconfig.json(2 hunks)examples/react/nextjs-app-prefetching/tsconfig.json(2 hunks)examples/react/nextjs-suspense-streaming/tsconfig.json(3 hunks)examples/react/nextjs/next-env.d.ts(1 hunks)examples/react/nextjs/tsconfig.json(2 hunks)examples/react/offline/package.json(1 hunks)examples/react/optimistic-updates-cache/next-env.d.ts(1 hunks)examples/react/optimistic-updates-cache/tsconfig.json(2 hunks)examples/react/optimistic-updates-ui/next-env.d.ts(1 hunks)examples/react/optimistic-updates-ui/tsconfig.json(2 hunks)examples/react/pagination/next-env.d.ts(1 hunks)examples/react/pagination/tsconfig.json(2 hunks)examples/react/playground/package.json(1 hunks)examples/react/prefetching/next-env.d.ts(1 hunks)examples/react/prefetching/tsconfig.json(2 hunks)examples/react/react-router/package.json(1 hunks)examples/react/rick-morty/package.json(1 hunks)examples/react/shadow-dom/package.json(1 hunks)examples/react/simple/package.json(1 hunks)examples/react/star-wars/package.json(1 hunks)examples/react/suspense/package.json(1 hunks)examples/solid/basic-graphql-request/package.json(1 hunks)examples/solid/basic/package.json(1 hunks)examples/solid/default-query-function/package.json(1 hunks)examples/solid/simple/package.json(1 hunks)examples/svelte/auto-refetching/package.json(1 hunks)examples/svelte/basic/package.json(1 hunks)examples/svelte/load-more-infinite-scroll/package.json(1 hunks)examples/svelte/optimistic-updates/package.json(1 hunks)examples/svelte/playground/package.json(1 hunks)examples/svelte/simple/package.json(1 hunks)examples/svelte/ssr/package.json(1 hunks)examples/svelte/star-wars/package.json(1 hunks)examples/vue/basic/package.json(1 hunks)examples/vue/dependent-queries/package.json(1 hunks)examples/vue/persister/package.json(1 hunks)examples/vue/simple/package.json(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- examples/react/infinite-query-with-max-pages/tsconfig.json
🚧 Files skipped from review as they are similar to previous changes (28)
- examples/vue/dependent-queries/package.json
- examples/svelte/load-more-infinite-scroll/package.json
- examples/react/suspense/package.json
- examples/react/chat/package.json
- examples/svelte/auto-refetching/package.json
- examples/solid/basic/package.json
- examples/react/playground/package.json
- examples/react/devtools-panel/package.json
- examples/react/star-wars/package.json
- examples/react/prefetching/next-env.d.ts
- examples/svelte/optimistic-updates/package.json
- examples/svelte/simple/package.json
- examples/react/react-router/package.json
- examples/react/basic/package.json
- examples/react/load-more-infinite-scroll/next-env.d.ts
- examples/solid/simple/package.json
- examples/svelte/playground/package.json
- examples/svelte/star-wars/package.json
- examples/react/simple/package.json
- examples/react/shadow-dom/package.json
- examples/solid/basic-graphql-request/package.json
- examples/react/pagination/next-env.d.ts
- examples/react/basic-graphql-request/package.json
- examples/svelte/basic/package.json
- examples/vue/persister/package.json
- examples/react/rick-morty/package.json
- examples/react/optimistic-updates-cache/next-env.d.ts
- examples/react/offline/package.json
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-08-19T03:18:18.303Z
Learnt from: oscartbeaumont
Repo: TanStack/query PR: 9564
File: packages/solid-query-devtools/src/production.tsx:2-3
Timestamp: 2025-08-19T03:18:18.303Z
Learning: In the solid-query-devtools package, the codebase uses a pattern of type-only default imports combined with typeof for component type annotations (e.g., `import type SolidQueryDevtoolsComp from './devtools'` followed by `typeof SolidQueryDevtoolsComp`). This pattern is consistently used across index.tsx and production.tsx files, and the maintainers prefer consistency over changing this approach.
Applied to files:
examples/solid/default-query-function/package.jsonexamples/react/load-more-infinite-scroll/tsconfig.jsonexamples/react/nextjs/next-env.d.tsexamples/react/optimistic-updates-ui/tsconfig.jsonexamples/react/optimistic-updates-cache/tsconfig.jsonexamples/react/infinite-query-with-max-pages/next-env.d.tsexamples/react/auto-refetching/next-env.d.tsexamples/react/optimistic-updates-ui/next-env.d.tsexamples/react/nextjs-app-prefetching/tsconfig.json
📚 Learning: 2025-09-02T17:57:33.184Z
Learnt from: TkDodo
Repo: TanStack/query PR: 9612
File: packages/query-async-storage-persister/src/asyncThrottle.ts:0-0
Timestamp: 2025-09-02T17:57:33.184Z
Learning: When importing from tanstack/query-core in other TanStack Query packages like query-async-storage-persister, a workspace dependency "tanstack/query-core": "workspace:*" needs to be added to the package.json.
Applied to files:
examples/solid/default-query-function/package.json
🔇 Additional comments (12)
examples/react/algolia/package.json (1)
23-23: Vite 6.4.1 is compatible with Vitest v4 and receives security patches.Vitest v4 requires Vite >=v6.0.0, and Vite 6.4 receives important fixes and security patches. The version bump from 6.3.6 to 6.4.1 is appropriate and aligns with the PR's Vitest v4 upgrade objectives.
examples/react/eslint-legacy/package.json (1)
25-25: Version bump is appropriate and secure.The upgrade from
^6.3.6to^6.4.1is a straightforward patch-level bump within the actively maintained 6.x series. This version is fully compatible with Vitest v4 and has no known security vulnerabilities.examples/react/default-query-function/package.json (1)
19-19: The vite 6.4.1 upgrade is valid and safe.No direct vulnerabilities have been found for vite 6.4.1, it is compatible with Vitest 4.x (which lists vite ^6.0.0 as a compatible dependency), and the caret range aligns with standard monorepo override practices. The change appropriately supports the Vitest v4 upgrade objective.
examples/vue/basic/package.json (1)
18-18: Vite 6.4.1 is compatible with Vitest v4.The patch version bump (6.3.6 → 6.4.1) aligns with Vitest v4's requirement for Vite >=v6.0.0. Vite 6.4.x is an actively supported version line receiving important fixes and security patches, making this a safe and intentional upgrade.
examples/vue/simple/package.json (1)
18-18:andeslint.config.js (1)
53-61: LGTM! Configuration aligns with Vitest v4 upgrade best practices.Spreading
vitest.configs.recommended.rulesensures compatibility with the new plugin version, and the explicit override forvitest/no-standalone-expectto includetestIfas a recognized test block function is necessary—testIfis actively used throughout test files as a conditional test wrapper.examples/svelte/ssr/package.json (1)
21-21: Vite version bump to 6.4.1 is appropriate for Vitest v4 upgrade.The upgrade to
^6.4.1is compatible with Vitest 4.0.8 (the root version). Vite 6.x is officially supported by Vitest v4, and this minor bump aligns with the PR's upgrade objectives. Note that Vite 6 + Vitest 4 integration has some known issues aroundresolve.conditions, so running the full test suite locally (which you've already done) is the right verification approach.examples/react/prefetching/tsconfig.json (1)
18-18: Verify JSX runtime change is compatible with React version and codebase.Changing from
"preserve"to"react-jsx"switches to React's automatic JSX runtime. Confirm:
- React version is 17.0.0 or higher
- Explicit
import Reactstatements in example files have been removed or are handled correctly- The connection to the Vitest v4 upgrade is clarified (no JSX runtime changes are mentioned in Vitest v4 migration guide)
examples/react/infinite-query-with-max-pages/next-env.d.ts (1)
3-3: Remove manual import from auto-generated file.The import "./.next/types/routes.d.ts" should not be manually added to next-env.d.ts. This file is auto-generated by Next.js and any manual edits will be overwritten on the next build or dev command. Instead, ensure
.next/types/**/*.tsis included in your project'stsconfig.jsoninclude array, which is the correct way Next.js provides typed route information.examples/react/nextjs-app-prefetching/tsconfig.json (1)
38-38: LGTM: Standard Next.js type inclusion.The addition of
".next/dev/types/**/*.ts"is a standard Next.js TypeScript configuration for including generated type definitions during development.examples/react/nextjs/next-env.d.ts (1)
3-3: LGTM: Standard Next.js route type import.The import of
./.next/types/routes.d.tsis part of Next.js's typed routing feature, providing type safety for routes. This is a standard pattern for Next.js projects with TypeScript.examples/react/auto-refetching/tsconfig.json (1)
18-18: Verify JSX runtime change is intentional and compatible.The
jsxoption changed from"preserve"to"react-jsx", which enables the new JSX transform introduced in React 17. While this is generally a positive modernization, it's unclear if this change is related to the Vitest v4 upgrade or was an unintended side-effect.Please confirm:
- This change is intentional
- The example uses React 17 or later
- This doesn't break the example's functionality
#!/bin/bash # Description: Check React version in this example and verify it supports react-jsx transform # Find package.json and check React version fd -t f "^package.json$" examples/react/auto-refetching --exec cat {} \; | jq -r '.dependencies.react // .devDependencies.react // "not found"'
|
@TkDodo Sorry it took me a while went on holiday. Fixed up all the Knip, ESLint and other issues caused by the conflict with main. Let me know if I need to do any more work to it. |
2 participants
🎯 Changes
Upgrade TanStack Query to use Vitest 4. Most changes were around mocks, testing functions being used and some config tweaks.
A few gotchas I am unsure about:
Please let me know if I have messed with things that should not be touched.
✅ Checklist
pnpm run test:pr.🚀 Release Impact
Summary by CodeRabbit
Chores
Tests
✏️ Tip: You can customize this high-level summary in your review settings.