Registry / testing / vue-composable-testing

vue-composable-testing

JSON →
library0.2.0jsnpmunverified

A lightweight utility for testing Vue 3 composables outside of a full component context. v0.2.0 enables developers to invoke composables with `renderComposable`, inspect reactive state via the `result` object, and handle lifecycle hooks like `onUnmounted` by manually unmounting the underlying component. Supports Vue plugins (e.g., Pinia) and provider/inject patterns via a custom wrapper. Ships TypeScript types. Alternative to mounting a full SFC or using `@vue/test-utils` composable test helpers, with a simpler API focused on composable logic.

testing
npm install vue-composable-testing
package ↗
INSTALL
IMPORT
SIG · VUE-COMPOSABLE-TES
V
vue-composable-testing
testingjavascriptv0.2.0
harness data pending
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

renderComposable
✓ import { renderComposable } from 'vue-composable-testing'
✗ const { renderComposable } = require('vue-composable-testing')
Package is ESM-only and ships TypeScript declarations. CommonJS require will fail.
renderComposable (Default Import)
✓ import renderComposable from 'vue-composable-testing'
✗ import { renderComposable } from 'vue-composable-testing'
The package exports `renderComposable` as both a named export and the default export. Both are valid, but named import is more explicit.
Vue ref type
✓ import { ref } from 'vue'
The library itself doesn't re-export Vue types; you must import Vue's Composition API separately.

Shows how to test a simple composable (useCounter) with renderComposable, assert reactive state, and trigger unmount lifecycle.

// counter.ts import { ref } from 'vue' export function useCounter() { const count = ref(0) function increment() { count.value++ } return { count, increment } } // counter.test.ts import { renderComposable } from 'vue-composable-testing' import { useCounter } from './counter' test('increments count', () => { const { result, unmount } = renderComposable(() => useCounter()) expect(result.count.value).toBe(0) result.increment() expect(result.count.value).toBe(1) unmount() // triggers onUnmounted lifecycle })
Debug
Known issues
gotchaThe `result` object is not reactive itself; it holds the returned reactive refs/computed from the composable. Directly assigning to `result` properties won't trigger Vue reactivity unless you use `.value` on refs.
fix
Access reactive state via `.value` on refs/properties returned by the composable, e.g. `result.count.value`.
affects: >=0.2.0
gotchaLifecycle hooks like `onMounted` or `onUnmounted` only run if you call `unmount()` (returned by renderComposable). If you don't call `unmount`, `onUnmounted` never fires.
fix
Call the `unmount` function returned from `renderComposable` at the end of a test to trigger cleanup lifecycle hooks.
affects: >=0.2.0
gotchaThe `wrapper` option expects a component definition that calls `slots.default()` to render the composable. If you forget to return a slot, the composable won't have access to provided values.
fix
Always return `() => slots.default?.()` from the wrapper component's setup function.
affects: >=0.2.0
Errors
Common errors & fixes
ReferenceError: ref is not defined
Missing import of Vue's Composition API functions (`ref`, `reactive`, etc.) in the composable file or test.
fix
Add `import { ref } from 'vue'` at the top of your composable module.
TypeError: renderComposable is not a function
The package is installed as a dependency but not imported correctly (e.g., using CommonJS require in an ESM-only project).
fix
Use ESModule import: `import { renderComposable } from 'vue-composable-testing'`.
Error: [Vue warn]: inject() can only be used inside setup()
Trying to use `inject` outside of the composable called within `renderComposable`, or the wrapper component doesn't provide values before calling slots.
fix
Ensure the `provide` call in the wrapper happens before `slots.default?.()` and that the composable is invoked inside the `renderComposable` callback.
Upgrade
Version history
0.2.0latest on npm
Audit
Dependencies

No dependency data recorded yet.

Agent activity
11 hits · last 30 days
node
10
Resources
packagevue-composable-testing ↗
vue-composable-testing — npm install vue-composable-testing · libregistry