Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.


I wanted to test a shallow mounted component with jest and vue-test-utils@next and as you could imagine I run into

No queryClient found in Vue context, use 'useQueryProvider' to set one in the root component.

Any ideas how to approch this issue besides writing a jest mock?

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:13 (6 by maintainers)

github_iconTop GitHub Comments

DamianOsipiukcommented, Aug 5, 2021

Hi, If you do not want to incorporate jest mock, you can write a tiny plugin wrapper in your project. Then when the library will expose its own plugin, you can just change the import without additional changes.

Something like this should work for you:

import { VUE_QUERY_CLIENT, QueryClient } from 'vue-query';

export const vueQueryPlugin = {
  install: (app, options) => {
    const queryClient = new QueryClient(options);
    app.provide(VUE_QUERY_CLIENT, queryClient)

and then call it in your test file

DamianOsipiukcommented, Nov 27, 2021

@sem4phor I took a look at the reproduction repository and noticed few issues:

  1. you do not mock network requests in your tests
  2. you do not use something like node-fetch for jest environment
  3. you do not wait for actual request to be done before second assertion

To fix it you could:

  • mock fetch to fix all the issues.
  • install node-fetch as dev dependency and assign it via import fetch from "node-fetch"; global.fetch = fetch; in setup.js. This will solve the issue with jest throwing an error that fetch is not defined. But do not solve third issue.
  • (This is not recommended as it will slow down your tests) If you do not mock network request, you have to actually wait for it. Ex by implementing your own flushPromises that would wait for ex. 100ms before next assertion.

Also you should disable retries on failure (this will make the second issue from above clearly visible) in vue-query by providing config to QueryClient. Ex from your repo: = {
  [VUE_QUERY_CLIENT]: new QueryClient({
    defaultOptions: {
      queries: {
        retry: false,

If you fix those issues, tests would work as intended.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Jest · Delightful JavaScript Testing
Jest is a JavaScript testing framework designed to ensure correctness of any JavaScript codebase. It allows you to write tests with an approachable,...
Read more >
Jest Tutorial for Beginners: Getting Started With JavaScript ...
Jest is a JavaScript test runner, that is, a JavaScript library for creating, running, and structuring tests. Jest ships as an NPM package,...
Read more >
What Is Jest – A Tutorial on How to Use Jest - LambdaTest
Usage : According to the State of JS survey, Jest has been the most widely used testing framework for JavaScript testing, among other...
Read more >
Jest Tutorial - JavaScript Unit Testing Using Jest Framework
In this Jest tutorial, we will learn about various Jest features, Jest matchers and how to use Jest framework for JavaScript Unit Testing....
Read more >
Jest Testing Tutorial: 5 Easy Steps - Testim Blog
Jest itself is actually not a library but a framework. There's even a CLI tool that you can use from the command line....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found