메뉴
Testing strategy across unit, component, composable, API integration, and E2E layers. Use when adding tests, choosing the right tier for a piece of behaviour, setting up vitest or Playwright, or designing test seams for Nitro-side effects.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Form request validation and comprehensive validation testing. Use when creating or modifying form requests, validation rules, or validation tests.
Feature module pattern organizing domain logic into queries, mutations, and actions. Use when implementing data fetching with filters, API mutations with loading states, business logic with UI feedback, or organizing domain-specific code.
File-based routing with page patterns for lists, details, and navigation. Use when creating pages, defining page meta (permissions, layouts), implementing list/detail patterns, or setting up breadcrumbs and headers.
Foundational architecture for Nuxt 4 + Vue 3 + Nuxt UI applications. Use when starting new projects, understanding project structure, or making architectural decisions about directory organization, technology choices, and pattern selection.
Vue component patterns with Composition API and script setup. Use when creating components, understanding script setup order convention, organizing component directories, or implementing component patterns like slideovers, modals, and tables.
Creating custom Vue composables with proper patterns. Use when building reusable stateful logic, shared state management, or encapsulating feature-specific behavior.
| name | nuxt-testing |
| description | Testing strategy across unit, component, composable, API integration, and E2E layers. Use when adding tests, choosing the right tier for a piece of behaviour, setting up vitest or Playwright, or designing test seams for Nitro-side effects. |
Pick the cheapest tier that gives a real signal. Real infrastructure or test seams over mocks. Test user-visible behaviour, not implementation details.
@nuxt/test-utils, Testing Library, composable test helpersrequest fixture/api/_dev/* endpoints and env-driven driver swaps for Nitro side effects| Behaviour | Tier |
|---|---|
| Pure logic (models, enums, utils) | Unit (vitest) |
| Composable in isolation | Unit (vitest + withSetup) |
| Component DOM + user interaction | Component (Testing Library) |
| Server route, full request pipeline | API integration (Playwright request) |
| Cross-step user journeys, real browser | E2E (Playwright page) |
Prefer API integration over UI E2E for server-side pipelines — faster, more deterministic, same Playwright runner.
setTimeout() in a test → use findBy*, waitFor(), or vi.waitFor()wrapper.vm.someInternalRef → test what the user seesmount(Component, { props: { modelValue, 'onUpdate:modelValue': … } }) → drive v-model from the user side: type in the field, assert the rendered valuefullyParallel: true with a shared in-memory test seam → set workers: 1 and clear state in beforeEach// vitest.config.ts
import { defineVitestConfig } from '@nuxt/test-utils/config'
export default defineVitestConfig({
test: { environment: 'happy-dom' }
})
// playwright.config.ts — auto-spawn dev server, env-driven test mode
webServer: {
command: 'npm run dev -- --port 3100',
url: 'http://localhost:3100',
reuseExistingServer: !process.env.CI,
env: { NUXT_EMAIL_DRIVER: 'memory', /* provider test keys */ }
}