Vue Composable Tester

Utility to test composition api functions for Vue.js

Install

``sh
$ npm install -D vue-composable-tester
`

Supported Vue versions

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

Example

$3

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

`js
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:

`js
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)
})
`

$3

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

`js
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:

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

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

$3

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

`js
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