--- title: Testing Vue Components That Use TanStack Query | daily.dev description: A practical walkthrough of testing Vue components that use TanStack Query, covering the specific gotchas that don't appear in normal Vue component tests:... canonical: https://daily.dev/posts/testing-vue-components-that-use-tanstack-query-rlowbblcx twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Testing Vue Components That Use TanStack Query | daily.dev og:description: A practical walkthrough of testing Vue components that use TanStack Query, covering the specific gotchas that don't appear in normal Vue component tests:... og:url: https://daily.dev/posts/testing-vue-components-that-use-tanstack-query-rlowbblcx og:image: https://api.daily.dev/og/posts/rLOWbBlCX.png og:image:alt: Testing Vue Components That Use TanStack Query og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Testing Vue Components That Use TanStack Query **[Telerik](https://daily.dev/sources/telerik)** · 8 min read · 0 upvotes · 1 comments ## Summary A practical walkthrough of testing Vue components that use TanStack Query, covering the specific gotchas that don't appear in normal Vue component tests: needing a fresh QueryClient per test, mocking fetch instead of the library itself, and managing async cascades with flushPromises or vi.waitFor. The piece builds a reusable mountWithQuery helper and a global fetch-stubbing setup file, then walks through testing loading/error states, mutations, and the trickier case of a mutation invalidating a query so a list refreshes. It closes with a rule of thumb: test what your component does, never what TanStack Query itself does internally. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Why does mounting a Vue component that uses TanStack Query fail in my test with a vague error? It fails because the component expects a QueryClient to be provided through the app instance, and mounting without one throws a vague error. The fix is a small helper that wraps mount and injects a fresh QueryClient via app.provide for every test, with retry set to false and gcTime set to 0 so caches from one test never bleed into the next. _Developers debugging Vue and TanStack Query test setups can find similar testing patterns on daily.dev._ ### How do I mock fetch globally for Vitest tests so my TanStack Query components don't hit a real API? Use vi.stubGlobal in a global setup file referenced by setupFiles in vitest.config.js so every test starts with a fresh, fake fetch and the real one is restored afterward. Since fetch resolves to a Response object with .ok, .status, and .json(), a small jsonResponse helper avoids rebuilding that shape repeatedly across tests. _Anyone setting up fetch mocking conventions for a test suite can track practical patterns like this on daily.dev._ ### Why does my TanStack Query mutation test not show the updated list after invalidateQueries runs? A single flushPromises call is often not enough because the async cascade has multiple hops: the submit resolves, the mutation's onSuccess calls invalidateQueries, the list refetches, and only then does the DOM update. Adding a second await flushPromises() after submit, or wrapping the assertion in vi.waitFor, reliably catches the delayed update. _Teams chasing flaky mutation-invalidation tests can compare debugging approaches like this on daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@leonidbugaev** · 0 upvotes > The invalidateQueries case is the one I'd keep. Three mockResolvedValueOnce in a known order, and if the mutation forgets the key the list just sits there. Mocking the library itself would never fail that. ## Similar posts on daily.dev - [Data Fetching with TanStack Query for Vue](https://daily.dev/posts/data-fetching-with-tanstack-query-for-vue-t5iagulxk) · Telerik · 5 upvotes · 0 comments - [Handling Mutations with TanStack Query for Vue](https://daily.dev/posts/handling-mutations-with-tanstack-query-for-vue-abiiglpxm) · Telerik · 13 upvotes · 0 comments - [A gentle introduction to TanStack Query](https://daily.dev/posts/a-gentle-introduction-to-tanstack-query-e5yjmxkk9) · Neciu Dan · 79 upvotes · 5 comments --- Tags: [#testing](https://daily.dev/tags/testing), [#vuejs](https://daily.dev/tags/vuejs), [#tanstack](https://daily.dev/tags/tanstack), [#vitest](https://daily.dev/tags/vitest) [View this post on daily.dev](https://daily.dev/posts/testing-vue-components-that-use-tanstack-query-rlowbblcx) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Testing Vue Components That Use TanStack Query","url":"https://daily.dev/posts/testing-vue-components-that-use-tanstack-query-rlowbblcx","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/testing-vue-components-that-use-tanstack-query-rlowbblcx"},"datePublished":"2026-09-02T20:14:31.762Z","dateModified":"2026-09-02T22:02:57.696Z","description":"A practical walkthrough of testing Vue components that use TanStack Query, covering the specific gotchas that don't appear in normal Vue component tests:...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/bda2c39ab3e82e8feb1107b340fd96b0?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/bda2c39ab3e82e8feb1107b340fd96b0?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Telerik","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Telerik","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/5ee6d4bef8ac4f84886d06f5881963e7","url":"https://daily.dev/sources/telerik"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/testing-vue-components-that-use-tanstack-query-rlowbblcx","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"testing,vuejs,tanstack,vitest","timeRequired":"PT8M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Telerik","item":"https://daily.dev/sources/telerik"},{"@type":"ListItem","position":3,"name":"Testing Vue Components That Use TanStack Query"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/testing-vue-components-that-use-tanstack-query-rlowbblcx","comment":[{"@type":"Comment","text":"The invalidateQueries case is the one I’d keep. Three mockResolvedValueOnce in a known order, and if the mutation forgets the key the list just sits there. Mocking the library itself would never fail that.","datePublished":"2026-09-03T11:00:58.664Z","url":"https://daily.dev/posts/rLOWbBlCX#c-ASGXcDEfm","author":{"@type":"Person","name":"Leonid Bugaev","url":"https://daily.dev/leonidbugaev","image":"https://lh3.googleusercontent.com/a/ACg8ocLhMgurwTmJElWaH9A8Ju8cHvZxgMCDt009jEYkmFCyUGAoaGSw=s96-c"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/testing-vue-components-that-use-tanstack-query-rlowbblcx#faq","mainEntity":[{"@type":"Question","name":"Why does mounting a Vue component that uses TanStack Query fail in my test with a vague error?","acceptedAnswer":{"@type":"Answer","text":"It fails because the component expects a QueryClient to be provided through the app instance, and mounting without one throws a vague error. The fix is a small helper that wraps mount and injects a fresh QueryClient via app.provide for every test, with retry set to false and gcTime set to 0 so caches from one test never bleed into the next. Developers debugging Vue and TanStack Query test setups can find similar testing patterns on daily.dev."}},{"@type":"Question","name":"How do I mock fetch globally for Vitest tests so my TanStack Query components don't hit a real API?","acceptedAnswer":{"@type":"Answer","text":"Use vi.stubGlobal in a global setup file referenced by setupFiles in vitest.config.js so every test starts with a fresh, fake fetch and the real one is restored afterward. Since fetch resolves to a Response object with .ok, .status, and .json(), a small jsonResponse helper avoids rebuilding that shape repeatedly across tests. Anyone setting up fetch mocking conventions for a test suite can track practical patterns like this on daily.dev."}},{"@type":"Question","name":"Why does my TanStack Query mutation test not show the updated list after invalidateQueries runs?","acceptedAnswer":{"@type":"Answer","text":"A single flushPromises call is often not enough because the async cascade has multiple hops: the submit resolves, the mutation's onSuccess calls invalidateQueries, the list refetches, and only then does the DOM update. Adding a second await flushPromises() after submit, or wrapping the assertion in vi.waitFor, reliably catches the delayed update. Teams chasing flaky mutation-invalidation tests can compare debugging approaches like this on daily.dev."}}]} ```