Testing Vue Composables via Subclass Mocking and Dependency Injection

import { ref } from 'vue';
import { describe, it, expect } from 'vitest';
 
export class BaseApiClient {
  async fetchData(): Promise<string[]> {
    return ['real-prod-data'];
  }
}
 
export class MockApiClient extends BaseApiClient {
  override async fetchData(): Promise<string[]> {
    return ['mock-alpha', 'mock-beta'];
  }
}
 
export function useDataFetcher(client = new BaseApiClient()) {
  const data = ref<string[]>([]);
  const load = async () => { data.value = await client.fetchData(); };
  return { data, load };
}
 
describe('useDataFetcher composable', () => {
  it('populates reactive state using injected mock class', async () => {
    const { data, load } = useDataFetcher(new MockApiClient());
    await load();
    expect(data.value).toEqual(['mock-alpha', 'mock-beta']);
  });
});