Next.js测试策略 #

        /\
       /  \
      / E2E\
     /------\
    / 集成测试 \
   /----------\
  /   单元测试   \
 /--------------\

npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
    plugins: [react()],
    test: {
        environment: 'jsdom',
        globals: true,
        setupFiles: './vitest.setup.ts',
    },
})

import '@testing-library/jest-dom'

{
    "scripts": {
        "test": "vitest",
        "test:coverage": "vitest --coverage"
    }
}

import { describe, it, expect } from 'vitest'
import { formatDate, slugify } from './utils'

describe('formatDate', () => {
    it('should format date correctly', () => {
        const date = new Date('2024-01-15')
        expect(formatDate(date)).toBe('2024年1月15日')
    })
    
    it('should handle invalid date', () => {
        expect(() => formatDate(new Date('invalid'))).toThrow()
    })
})

describe('slugify', () => {
    it('should convert to slug', () => {
        expect(slugify('Hello World')).toBe('hello-world')
    })
    
    it('should remove special characters', () => {
        expect(slugify('Hello! @World#')).toBe('hello-world')
    })
})

import { renderHook, act } from '@testing-library/react'
import { describe, it, expect } from 'vitest'
import { useCounter } from './useCounter'

describe('useCounter', () => {
    it('should initialize with default value', () => {
        const { result } = renderHook(() => useCounter())
        expect(result.current.count).toBe(0)
    })
    
    it('should increment count', () => {
        const { result } = renderHook(() => useCounter())
        
        act(() => {
            result.current.increment()
        })
        
        expect(result.current.count).toBe(1)
    })
    
    it('should decrement count', () => {
        const { result } = renderHook(() => useCounter(5))
        
        act(() => {
            result.current.decrement()
        })
        
        expect(result.current.count).toBe(4)
    })
})

import { render, screen, fireEvent } from '@testing-library/react'
import { describe, it, expect } from 'vitest'
import { Button } from './Button'

describe('Button', () => {
    it('should render correctly', () => {
        render(<Button>Click me</Button>)
        expect(screen.getByText('Click me')).toBeInTheDocument()
    })
    
    it('should handle click', () => {
        const handleClick = vi.fn()
        render(<Button onClick={handleClick}>Click me</Button>)
        
        fireEvent.click(screen.getByText('Click me'))
        
        expect(handleClick).toHaveBeenCalledTimes(1)
    })
    
    it('should be disabled', () => {
        render(<Button disabled>Click me</Button>)
        expect(screen.getByText('Click me')).toBeDisabled()
    })
})

import { render, screen, fireEvent, waitFor } from '@testing-library/react'
import { describe, it, expect } from 'vitest'
import { LoginForm } from './LoginForm'

describe('LoginForm', () => {
    it('should submit form with valid data', async () => {
        const onSuccess = vi.fn()
        render(<LoginForm onSuccess={onSuccess} />)
        
        fireEvent.change(screen.getByLabelText(/邮箱/i), {
            target: { value: 'test@example.com' },
        })
        
        fireEvent.change(screen.getByLabelText(/密码/i), {
            target: { value: 'password123' },
        })
        
        fireEvent.click(screen.getByText(/登录/i))
        
        await waitFor(() => {
            expect(onSuccess).toHaveBeenCalled()
        })
    })
    
    it('should show error with invalid data', async () => {
        render(<LoginForm />)
        
        fireEvent.click(screen.getByText(/登录/i))
        
        await waitFor(() => {
            expect(screen.getByText(/请输入邮箱/i)).toBeInTheDocument()
        })
    })
})

import { render, screen } from '@testing-library/react'
import { describe, it, expect } from 'vitest'
import { UserList } from './UserList'

const mockUsers = [
    { id: '1', name: 'User 1', email: 'user1@example.com' },
    { id: '2', name: 'User 2', email: 'user2@example.com' },
]

describe('UserList', () => {
    it('should render users', () => {
        render(<UserList users={mockUsers} />)
        
        expect(screen.getByText('User 1')).toBeInTheDocument()
        expect(screen.getByText('User 2')).toBeInTheDocument()
    })
    
    it('should show empty message', () => {
        render(<UserList users={[]} />)
        
        expect(screen.getByText(/暂无用户/i)).toBeInTheDocument()
    })
})

npm install -D @playwright/test
npx playwright install

import { defineConfig } from '@playwright/test'

export default defineConfig({
    testDir: './e2e',
    fullyParallel: true,
    use: {
        baseURL: 'http://localhost:3000',
    },
    webServer: {
        command: 'npm run dev',
        url: 'http://localhost:3000',
        reuseExistingServer: !process.env.CI,
    },
})

import { test, expect } from '@playwright/test'

test.describe('Authentication', () => {
    test('should login successfully', async ({ page }) => {
        await page.goto('/login')
        
        await page.fill('input[name="email"]', 'test@example.com')
        await page.fill('input[name="password"]', 'password123')
        await page.click('button[type="submit"]')
        
        await expect(page).toHaveURL('/dashboard')
        await expect(page.locator('h1')).toContainText('欢迎')
    })
    
    test('should show error with invalid credentials', async ({ page }) => {
        await page.goto('/login')
        
        await page.fill('input[name="email"]', 'wrong@example.com')
        await page.fill('input[name="password"]', 'wrongpassword')
        await page.click('button[type="submit"]')
        
        await expect(page.locator('.error-message')).toContainText('登录失败')
    })
})

test.describe('Blog', () => {
    test('should display blog posts', async ({ page }) => {
        await page.goto('/blog')
        
        await expect(page.locator('article')).toHaveCount(10)
    })
    
    test('should navigate to post detail', async ({ page }) => {
        await page.goto('/blog')
        
        await page.click('article:first-child a')
        
        await expect(page).toHaveURL(/\/blog\/.+/)
    })
})

import { vi } from 'vitest'

global.fetch = vi.fn()

describe('API calls', () => {
    beforeEach(() => {
        vi.clearAllMocks()
    })
    
    it('should fetch users', async () => {
        const mockUsers = [{ id: '1', name: 'User 1' }]
        
        ;(fetch as any).mockResolvedValueOnce({
            ok: true,
            json: async () => mockUsers,
        })
        
        const users = await getUsers()
        
        expect(users).toEqual(mockUsers)
        expect(fetch).toHaveBeenCalledWith('/api/users')
    })
})

import { vi } from 'vitest'

vi.mock('./actions', () => ({
    createPost: vi.fn(),
}))

describe('CreatePostForm', () => {
    it('should call createPost on submit', async () => {
        const createPost = vi.fn().mockResolvedValue({ success: true })
        vi.mocked(createPost).mockImplementation(createPost)
        
        render(<CreatePostForm />)
        
        fireEvent.change(screen.getByLabelText(/标题/i), {
            target: { value: 'Test Post' },
        })
        
        fireEvent.click(screen.getByText(/发布/i))
        
        await waitFor(() => {
            expect(createPost).toHaveBeenCalled()
        })
    })
})

describe('Component', () => {
    it('should do something when condition', () => {
        // 测试代码
    })
})

it('should increment counter', () => {
    // Arrange
    const { result } = renderHook(() => useCounter())
    
    // Act
    act(() => {
        result.current.increment()
    })
    
    // Assert
    expect(result.current.count).toBe(1)
})

npm run test:coverage