スキル vue-testing-best-practices

📦

vue-testing-best-practices

Name: vue-testing-best-practices
Author: github.com/vuejs-ai

安全

Richte Vue.js-Tests mit Vitest und Playwright ein

こちらからも入手できます: github.com/vuejs-ai

Vue.js-Anwendungen benötigen zuverlässige Testing-Strategien. Diese Skill bietet Best Practices für Unit-Testing mit Vitest und Vue Test Utils, Komponententest-Muster, Mocking-Strategien und E2E-Testing mit Playwright.

対応: Claude Codex Code(CC)

📊 70 十分

スキルZIPをダウンロード

Claudeでアップロード

設定 → 機能 → スキル → スキルをアップロードへ移動

オンにして利用開始

テストする

「vue-testing-best-practices」を使用しています。 How do I set up Vitest for my Vue 3 project?

期待される結果:

Install the required packages:
```bash
npm install -D vitest @vue/test-utils happy-dom
```
Configure vite.config.js:
```javascript
export default defineConfig({
plugins: [vue()],
test: {
globals: true,
environment: 'happy-dom',
setupFiles: ['./src/test/setup.js']
}
})
```
Add test scripts to package.json:
```json
{"scripts": {"test": "vitest", "test:run": "vitest run"}}
```

「vue-testing-best-practices」を使用しています。 How do I test a component that uses async components?

期待される結果:

Use flushPromises to wait for async components:
```javascript
import { mount, flushPromises } from '@vue/test-utils'
import { defineAsyncComponent } from 'vue'
const AsyncWidget = defineAsyncComponent(() =>
import('./Widget.vue')
)
test('renders async component', async () => {
const wrapper = mount(AsyncWidget)
await flushPromises()
expect(wrapper.text()).toContain('Widget Content')
})
```

「vue-testing-best-practices」を使用しています。 How do I write a Playwright test for a Vue login flow?

期待される結果:

Create a Playwright test:
```typescript
import { test, expect } from '@playwright/test'
test('user can log in', async ({ page }) => {
await page.goto('/login')
await page.getByLabel('Email').fill('user@example.com')
await page.getByLabel('Password').fill('password123')
await page.getByRole('button', { name: 'Sign In' }).click()
await expect(page).toHaveURL('/dashboard')
})
```

セキュリティ監査

安全

v1 • 2/11/2026

All static findings are false positives. This is a documentation skill containing Vue.js testing best practices. The scanner misinterpreted markdown code examples and Vite configuration patterns as security threats. No malicious code, credential access, or data exfiltration patterns exist.

スキャンされたファイル

2,227

解析された行数

検出結果

総監査数

セキュリティ問題は見つかりませんでした

監査者: claude

品質スコア

アーキテクチャ

100

保守性

コンテンツ

コミュニティ

100

セキュリティ

仕様準拠

作れるもの

Einrichtung der Test-Infrastruktur

Neues Vue 3-Projekt benötigt ein Test-Setup. Erhalte Schritt-für-Schritt-Anleitung zur Installation von Vitest, Konfiguration von vite.config.js und Auswahl zwischen happy-dom und jsdom-Umgebungen.

Fehlersuche bei inkonsistenten asynchronen Tests

Komponententests scheitern aufgrund von Timing-Problemen intermittierend. Lerne Muster zur Verwendung von flushPromises, nextTick und async await für korrekte Testausführungsreihenfolge.

Implementierung der E2E-Test-Strategie

Vue-App benötigt Cross-Browser-E2E-Tests. Konfiguriere Playwright mit korrekter Browser-Unterstützung, CI-Integration und Page Object-Mustern für wartbare Tests.

これらのプロンプトを試す

Einfacher Vue-Komponententest

Write a Vitest test for a Vue 3 Counter component. The component has a count value and increment button. Use Vue Test Utils mount and test that clicking the button updates the displayed count.

Testing components with async setup

Test a Vue component that uses defineAsyncComponent to load a child component. The child takes time to load. Show how to use flushPromises to wait for the async component to render before making assertions.

Mocking Pinia stores in tests

Create a Vue component test where the component uses a Pinia store for state. Mock the store to provide test data. Show how to set up the Pinia instance in the test environment.

Playwright E2E user flow

Write a Playwright E2E test for a Vue login page. The test should navigate to /login, fill in email and password, submit the form, and verify the user is redirected to the dashboard with a welcome heading.

ベストプラクティス

Use Vitest for Vue 3 projects as it shares configuration with Vite and provides native ESM support
Test components through their public interface rather than internal implementation details to reduce brittleness
Use flushPromises() to handle async operations in Vue components, including dynamic imports and Suspense

回避

Avoid snapshot-only testing as the sole verification method since passing snapshots does not guarantee correct behavior
Do not test implementation details like internal state or private methods, which change during refactoring
Avoid tightly coupling tests to component structure by using data-testid attributes instead of CSS selectors

よくある質問

Should I use happy-dom or jsdom for Vue testing?

Happy-dom is faster but may have compatibility gaps. Jsdom provides better compatibility with browser APIs. Use happy-dom for simple components and jsdom when testing requires full browser APIs.

How do I test a composable that uses lifecycle hooks?

Use the helper wrapper pattern: mount a test component that uses the composable in its setup(), then test the component behavior to verify the composable works correctly.

What is the difference between mount and shallowMount?

mount renders the full component tree including child components. shallowMount stubs child components, making tests faster and more isolated. Use shallowMount when you want to test only the current component.

How do I test teleported components like modals?

Use attachTo option with mount to place the component in the document body, or use wrapper.findComponent with { attachedToDocument: true } to query teleported elements.

When should I use E2E tests vs component tests?

Component tests verify individual component behavior. E2E tests verify complete user flows across your application. Use both: component tests for fast feedback on component logic, E2E tests for critical user journeys.

How do I handle authentication in Playwright tests?

Use page.context().storageState() to save authenticated state after logging in once, then load that state in subsequent tests. This avoids repeating login steps and reduces test execution time.