vue-testing-best-practices

النتيجة المتوقعة:

• 安裝所需的套件：
• ```bash
• npm install -D vitest @vue/test-utils happy-dom
• ```
•  
• 配置 vite.config.js：
• ```javascript
• export default defineConfig({
• plugins: [vue()],
• test: {
• globals: true,
• environment: 'happy-dom',
• setupFiles: ['./src/test/setup.js']
• }
• })
• ```
•  
• 在 package.json 中添加測試腳本：
• ```json
• {"scripts": {"test": "vitest", "test:run": "vitest run"}}
• ```

النتيجة المتوقعة:

• 使用 flushPromises 等待非同步元件：
• ```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')
• })
• ```

النتيجة المتوقعة:

• 建立 Playwright 測試：
• ```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')
• })
• ```