1---
2title: Test Complex Composables with Host Component Wrapper
3impact: MEDIUM
4impactDescription: Composables using lifecycle hooks or provide/inject fail when tested directly without a component context
5type: capability
6tags: [vue3, testing, composables, vitest, lifecycle-hooks, provide-inject]
7---
8 
9# Test Complex Composables with Host Component Wrapper
10 
11**Impact: MEDIUM** - Composables that use Vue lifecycle hooks (`onMounted`, `onUnmounted`) or dependency injection (`inject`) require a component context to function. Testing them directly will cause errors or incorrect behavior.
12 
13Simple composables using only reactivity APIs can be tested directly. Complex composables need a helper function that creates a host component context.
14 
15## Task Checklist
16 
17- [ ] Identify if composable uses lifecycle hooks or inject
18- [ ] For simple composables (refs, computed only): test directly
19- [ ] For complex composables: use `withSetup` helper pattern
20- [ ] Clean up by unmounting the test app after each test
21- [ ] Use `app.provide()` to mock injected dependencies
22 
23**Simple Composable - Test Directly:**
24```javascript
25// composables/useCounter.js
26import { ref, computed } from 'vue'
27 
28export function useCounter(initialValue = 0) {
29  const count = ref(initialValue)
30  const doubled = computed(() => count.value * 2)
31  const increment = () => count.value++
32 
33  return { count, doubled, increment }
34}
35```
36 
37```javascript
38// useCounter.test.js
39import { describe, it, expect } from 'vitest'
40import { useCounter } from './useCounter'
41 
42// CORRECT: Simple composable can be tested directly
43describe('useCounter', () => {
44  it('initializes with default value', () => {
45    const { count } = useCounter()
46    expect(count.value).toBe(0)
47  })
48 
49  it('increments count', () => {
50    const { count, increment } = useCounter()
51    increment()
52    expect(count.value).toBe(1)
53  })
54 
55  it('computes doubled value', () => {
56    const { count, doubled, increment } = useCounter(5)
57    expect(doubled.value).toBe(10)
58    increment()
59    expect(doubled.value).toBe(12)
60  })
61})
62```
63 
64**Complex Composable - Use Host Wrapper:**
65```javascript
66// composables/useFetch.js
67import { ref, onMounted, onUnmounted, inject } from 'vue'
68 
69export function useFetch(url) {
70  const data = ref(null)
71  const error = ref(null)
72  const loading = ref(true)
73  let controller = null
74 
75  // Uses inject - needs component context
76  const apiClient = inject('apiClient')
77 
78  // Uses lifecycle hooks - needs component context
79  onMounted(async () => {
80    controller = new AbortController()
81    try {
82      const response = await apiClient.get(url, { signal: controller.signal })
83      data.value = response.data
84    } catch (e) {
85      if (e.name !== 'AbortError') error.value = e
86    } finally {
87      loading.value = false
88    }
89  })
90 
91  onUnmounted(() => {
92    controller?.abort()
93  })
94 
95  return { data, error, loading }
96}
97```
98 
99```javascript
100// test-utils.js
101import { createApp } from 'vue'
102 
103/**
104 * Helper to test composables that need component context
105 */
106export function withSetup(composable) {
107  let result
108 
109  const app = createApp({
110    setup() {
111      result = composable()
112      // Return a render function to suppress warnings
113      return () => {}
114    }
115  })
116 
117  app.mount(document.createElement('div'))
118 
119  return [result, app]
120}
121```
122 
123```javascript
124// useFetch.test.js
125import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
126import { flushPromises } from '@vue/test-utils'
127import { withSetup } from './test-utils'
128import { useFetch } from './useFetch'
129 
130describe('useFetch', () => {
131  let app
132  const mockApiClient = {
133    get: vi.fn()
134  }
135 
136  afterEach(() => {
137    // IMPORTANT: Clean up to trigger onUnmounted
138    app?.unmount()
139  })
140 
141  it('fetches data on mount', async () => {
142    mockApiClient.get.mockResolvedValue({ data: { id: 1, name: 'Test' } })
143 
144    const [result, testApp] = withSetup(() => useFetch('/api/test'))
145    app = testApp
146 
147    // Provide mocked dependency
148    app.provide('apiClient', mockApiClient)
149 
150    // Wait for async operations
151    await flushPromises()
152 
153    expect(result.data.value).toEqual({ id: 1, name: 'Test' })
154    expect(result.loading.value).toBe(false)
155    expect(result.error.value).toBeNull()
156  })
157 
158  it('handles errors', async () => {
159    const testError = new Error('Network error')
160    mockApiClient.get.mockRejectedValue(testError)
161 
162    const [result, testApp] = withSetup(() => useFetch('/api/test'))
163    app = testApp
164    app.provide('apiClient', mockApiClient)
165 
166    await flushPromises()
167 
168    expect(result.error.value).toBe(testError)
169    expect(result.data.value).toBeNull()
170  })
171})
172```
173 
174## Enhanced withSetup Helper with Provide Support
175```javascript
176// test-utils.js
177export function withSetup(composable, options = {}) {
178  let result
179 
180  const app = createApp({
181    setup() {
182      result = composable()
183      return () => {}
184    }
185  })
186 
187  // Apply global provides before mounting
188  if (options.provide) {
189    Object.entries(options.provide).forEach(([key, value]) => {
190      app.provide(key, value)
191    })
192  }
193 
194  app.mount(document.createElement('div'))
195 
196  return [result, app]
197}
198 
199// Usage
200const [result, app] = withSetup(() => useMyComposable(), {
201  provide: {
202    apiClient: mockApiClient,
203    currentUser: { id: 1, name: 'Test User' }
204  }
205})
206```
207 
208## Testing with @vue/test-utils mount
209```javascript
210import { mount } from '@vue/test-utils'
211import { defineComponent } from 'vue'
212import { useFetch } from './useFetch'
213 
214test('useFetch in component context', async () => {
215  const TestComponent = defineComponent({
216    setup() {
217      const { data, loading } = useFetch('/api/users')
218      return { data, loading }
219    },
220    template: '<div>{{ loading ? "Loading..." : data }}</div>'
221  })
222 
223  const wrapper = mount(TestComponent, {
224    global: {
225      provide: {
226        apiClient: mockApiClient
227      }
228    }
229  })
230 
231  await flushPromises()
232  expect(wrapper.text()).toContain('Test data')
233})
234```
235 
236## Reference
237- [Vue.js Testing Guide - Testing Composables](https://vuejs.org/guide/scaling-up/testing#testing-composables)
238- [Vue Test Utils - Mounting Components](https://test-utils.vuejs.org/guide/)
239