Mocking Injected Asynchronous Service Contracts in Vitest Component Specs

import { describe, it, expect, vi } from 'vitest';
import { mount, flushPromises } from '@vue/test-utils';
import type { InjectionKey } from 'vue';
import UserProfile from './UserProfile.vue';
 
interface AuthServiceContract {
  fetchPermissions(userId: string): Promise<string[]>;
}
 
const AUTH_KEY: InjectionKey<AuthServiceContract> = Symbol('AUTH_KEY');
 
describe('UserProfile Async Permissions', () => {
  it('renders resolved permissions after async injection completes', async () => {
    const mockAuthService: AuthServiceContract = {
      fetchPermissions: vi.fn().mockResolvedValue(['read:reports', 'write:drafts'])
    };
 
    const wrapper = mount(UserProfile, {
      props: { userId: 'usr_42' },
      global: {
        provide: {
          [AUTH_KEY as symbol]: mockAuthService
        }
      }
    });
 
    expect(wrapper.text()).toContain('Loading...');
    await flushPromises();
 
    expect(mockAuthService.fetchPermissions).toHaveBeenCalledWith('usr_42');
    expect(wrapper.findAll('[data-test="perm-item"]')).toHaveLength(2);
  });
});