Usage with jest

Hi!

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?

[DamianOsipiuk]

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

Vue.use(vueQueryPlugin)

[DamianOsipiuk]

@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:

config.global.provide = {
  [VUE_QUERY_CLIENT]: new QueryClient({
    defaultOptions: {
      queries: {
        retry: false,
      },
    },
  }),
};

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