vue-test-composables

Test composables in Vue 2 and 3.

Installation:

pnpm add vue-test-composables -D

If your app is using Vue 2, you also need to install the composition api: @vue/composition-api.

Basic usage

A simple counter composable:

import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)

  function increment() {
    count.value++
  }

  return {
    count,
    increment,
  }
}

To test, render it using the renderComposable function provided by the library:

import { renderComposable } from 'vue-test-composables'
import { useCounter } from './counter'

test('should increment count', () => {
  const { result } = renderComposable(() => useCounter())

  expect(result.count.value).toBe(0)
  result.increment()
  expect(result.count.value).toBe(1)
})

You can unmount the underlying component by using unmount helper returned by mount to trigger onUnmounted and related lifecycle hooks:

const { result, unmount } = renderComposable(() => useCounter())

// Unmount underlying comonent to trigger lifecycle hooks
unmount()

Provide/Inject

Example using vue-query

import { useQuery, useQueryProvider } from 'vue-query'
import { renderComposable } from 'vue-test-composables'

function useUser() {
  return useQuery('user', () =>
    fetch('/api/user').then(
      res => res.json,
    ),
  )
}

test('useUser', async() => {
  const { result, waitFor } = renderComposable(() => useUser(), {
    provider() {
      useQueryProvider()
    },
  })

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

  await expect(result.data.value).resolves.toMatchObject({
    id: 1,
    username: 'johndoe',
    email: '[email protected]',
  })
})

Credits

This is a fork of vue-composable-tester with some modifications using vue-demi.

License

MIT