vue-composable-tester

Vue Composable Tester

Utility to test composition api functions for Vue.js

Install

$ npm install -D vue-composable-tester

Supported Vue versions

Vue Composable Tester supports both Vue v3 and Vue v2 with @vue/composition-api.

Example

Basic usage

Let's say we have the following composable to be tested:

import { ref } from 'vue'

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

  function increment() {
    count.value++
  }

  return {
    count,
    increment
  }
}

You can test it by wrapping with mount helper. The return value of mount includes result property that is the result of the composable function:

import { mount } from 'vue-composable-tester'
import { useCounter } from './counter'

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

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

Trigger mount/unmount lifecycle

Since mount helper actually mounts a component under the hood, onMount and related lifecycle hooks will be called respectively:

import { mount } from 'vue-composable-tester'
import { onMounted, nextTick } from 'vue'

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

  onMounted(() => {
    fetchCount().then((result) => {
      count.value = result
    })
  })

  return {
    count,
  }
}

test('fetches count on mount', async () => {
  // Mock fetch function with count 100
  const fetchMock = jest.fn().mockResolvedValue(100)

  const { result } = mount(() => useCounter(fetchMock))

  // You may want to wait until mocked value is resolved
  await nextTick()

  expect(result.count.value).toBe(100)
})

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

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

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

provide/inject

When you have some injected values in your composables, you can mock them by using provide helper in provider option of mount helper:

import { mount } from 'vue-composable-tester'
import { inject, provide } from 'vue'

function useCounter() {
  const store = inject('store')
  const count = computed(() => store.state.count)

  return {
    count,
  }
}

test('should be injected', () => {
  const { result } = mount(() => useCounter(), {
    provider: () => {
      provide('store', {
        state: {
          count: 10
        }
      })
    },
  })
  expect(result.count.value).toBe(10)
})

License

MIT