Vue-Query in Jest

[max-zinn]

Hi,

I am pretty stuck for a while now with trying to integrate @tanstack/vue-query into our project. The runtime code works but I am struggling with refactoring our unit tests that now have to use tanstack query.
I am trying to directly modify the data ref returned by useQuery, but I get this error: Error: vue-query hooks can only be used inside setup() function. which makes sense in some way, but I can't wrap my head around a solution. Is there anyone facing the same issue or has already a solution?

Many thanks :)

[louis-young]

Hi 👋

I'm not a Vue user but it seems odd to attempt to mutate the data property of a query. Why are you trying to do this? The typical approach is to intercept the network request using a tool like Mock Service Worker.

[max-zinn]

I tried this but for some reason tanstack didn't call the queryFn when in jest env. After a few hours of debugging and research I tried a different approach. Currently I am using jest.fn() for mocking the useQuery function and at each test that requires data from the specific useQuery, I set the response with mockReturnValue. Still not optimal but that is the way which is currently doing the job.

[Enaium]

If you are using the jsx style, you need to use defineComponent.

Good

const Test = defineComponent({
  const { data } = useQuery({...})
  setup() {
    return () => <div>{data}</div>
  },
})

Bad

const Test = ()=> {
  const { data } = useQuery({...})
  return <div>{data}</div>
}

But I don't like to using defineComponent.