Menü
Vue.js 3 testing with Vitest including component and composable tests
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
Multi-provider LLM integration for phrase generation (Groq, OpenAI, Gemini, extensible)
Cycle ORM patterns, configuration and common pitfalls for Symfony integration
Docker with multi-stage builds, security best practices and Docker Compose
Symfony framework with PestPHP testing and Clean Architecture patterns
WCAG 2.2 AA compliance for SAAC applications
Symfony with Pest PHP testing framework and TDD patterns
| name | vue-vitest |
| description | Vue.js 3 testing with Vitest including component and composable tests |
| license | MIT |
| compatibility | opencode |
| metadata | {"type":"testing","framework":"vitest","language":"typescript"} |
// composables/useAuth.spec.ts
import { describe, it, expect, vi } from 'vitest';
import { useAuth } from './useAuth';
describe('useAuth', () => {
it('should authenticate user with valid credentials', async () => {
// Arrange
const mockLogin = vi.fn().mockResolvedValue({ token: 'abc123' });
// Act
const { login, isAuthenticated } = useAuth({ loginFn: mockLogin });
await login('user@test.com', 'password');
// Assert
expect(isAuthenticated.value).toBe(true);
expect(mockLogin).toHaveBeenCalledWith('user@test.com', 'password');
});
});
// components/UserCard.spec.ts
import { describe, it, expect } from 'vitest';
import { mount } from '@vue/test-utils';
import UserCard from './UserCard.vue';
describe('UserCard', () => {
it('renders user information correctly', () => {
const wrapper = mount(UserCard, {
props: {
user: {
name: 'John Doe',
email: 'john@example.com'
}
}
});
expect(wrapper.text()).toContain('John Doe');
expect(wrapper.text()).toContain('john@example.com');
});
it('emits event when button is clicked', async () => {
const wrapper = mount(UserCard, {
props: { user: { name: 'Test', email: 'test@test.com' } }
});
await wrapper.find('button').trigger('click');
expect(wrapper.emitted()).toHaveProperty('select');
});
});
// stores/user.spec.ts
import { setActivePinia, createPinia } from 'pinia';
import { useUserStore } from './user';
describe('User Store', () => {
beforeEach(() => {
setActivePinia(createPinia());
});
it('updates user profile', () => {
const store = useUserStore();
store.updateProfile({ name: 'Jane Doe' });
expect(store.profile.name).toBe('Jane Doe');
});
});
// components/PictogramCard.spec.ts
import { render, screen } from '@testing-library/vue'
import userEvent from '@testing-library/user-event'
import PictogramCard from './PictogramCard.vue'
describe('PictogramCard - Accesibilidad', () => {
it('tiene aria-label descriptivo', () => {
render(PictogramCard, { props: { label: 'Comer', imageSrc: '/comer.png' } })
expect(screen.getByRole('button', { name: 'Comer' })).toBeDefined()
})
it('tiene tamaño mínimo de 44x44px para WCAG 2.2 AA', () => {
render(PictogramCard, { props: { label: 'Comer', imageSrc: '/comer.png' } })
const button = screen.getByRole('button')
expect(button.className).toContain('min-h-[44px]')
expect(button.className).toContain('min-w-[44px]')
})
it('es activable con teclado (Enter y Space)', async () => {
const { emitted } = render(PictogramCard, {
props: { label: 'Comer', imageSrc: '/comer.png' }
})
const button = screen.getByRole('button')
button.focus()
await userEvent.keyboard('{Enter}')
expect(emitted().select).toBeDefined()
})
})