Unit testing

[BhaskaranR]

do we have any examples with vitest or jest?

[DamianOsipiuk]

Hi, there is no guide currently regarding testing.

If you are thinking about testing vue-query, then probably the only setup that you will need is to turn off retries, and increase the cache time to prevent "Jest did not exit one second after the test run completed" error message.

import { VueQueryPlugin, VueQueryPluginOptions } from 'vue-query';
const vueQueryOptions: VueQueryPluginOptions = {
  queryClientConfig: {
    defaultOptions: {
      queries: {
        retry: false,
        cacheTime: Infinity
      }
    }
  }
}

app.use(VueQueryPlugin, vueQueryOptions);

Other than that, just mock your API calls and you should be good to go.

[wobsoriano]

If you want to test using vitest I think you can do something like this

npm install vue-query && npm install vue-test-composables vitest p-wait-for -D

import { useQuery, useQueryProvider } from 'vue-query'
import { renderComposable } from 'vue-test-composables'
import { test, expect } from 'vitest'
import waitFor from 'p-wait-for'

function useTodo() {
  return useQuery('todo', () =>
    fetch('https://jsonplaceholder.typicode.com/todos/1').then(
      (res) => res.json
    )
  )
}

test('useTodo', async () => {
  const { result } = renderComposable(() => useTodo(), {
    provider() {
      useQueryProvider({
        defaultOptions: {
          queries: {
            retry: false,
            cacheTime: Infinity,
          },
        },
      })
    },
  })

  await waitFor(() => result.isSuccess.value)

  await expect(result.data.value).resolves.toMatchObject({
    userId: 1,
    id: 1,
    title: 'delectus aut autem',
    completed: false,
  })
})

[wobsoriano]

// vitest.config.ts
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    environment: 'happy-dom'
  },
})