测试环境搭建指南：从零开始构建完善的测试体系

测试环境搭建指南从零开始构建完善的测试体系前言各位前端小伙伴不知道你们有没有这样的经历在自己电脑上测试好好的一到CI环境就各种失败。我曾经因为测试环境和生产环境不一致导致线上出现了一个严重bug。后来我意识到测试环境的一致性至关重要测试环境搭建步骤1. 安装依赖# 安装Vitest测试框架 npm install -D vitest # 安装Vue测试工具 npm install -D vue/test-utils # 安装Playwright端到端测试 npm install -D playwright/test npx playwright install # 安装Mock工具 npm install -D msw2. 配置Vitest创建vitest.config.tsimport { defineConfig } from vitest/config import vue from vitejs/plugin-vue import { resolve } from path export default defineConfig({ plugins: [vue()], test: { environment: jsdom, globals: true, coverage: { provider: v8, reporter: [text, json, html], exclude: [node_modules/, dist/, *.config.ts] }, setupFiles: [./vitest.setup.ts] }, resolve: { alias: { : resolve(__dirname, src) } } })3. 创建测试入口文件创建vitest.setup.tsimport { expect } from vitest import matchers from testing-library/jest-dom/matchers expect.extend(matchers) import { setupServer } from msw/node import { handlers } from ./mocks/handlers const server setupServer(...handlers) beforeAll(() server.listen({ onUnhandledRequest: error })) afterEach(() server.resetHandlers()) afterAll(() server.close())4. 配置Playwright创建playwright.config.tsimport { defineConfig, devices } from playwright/test export default defineConfig({ testDir: ./tests, fullyParallel: true, forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, workers: process.env.CI ? 1 : undefined, reporter: html, use: { baseURL: http://localhost:5173, trace: on-first-retry, }, projects: [ { name: chromium, use: { ...devices[Desktop Chrome] }, }, { name: firefox, use: { ...devices[Desktop Firefox] }, }, { name: webkit, use: { ...devices[Desktop Safari] }, }, { name: Mobile Chrome, use: { ...devices[Pixel 5] }, }, { name: Mobile Safari, use: { ...devices[iPhone 14] }, }, ], webServer: { command: npm run dev, url: http://localhost:5173, reuseExistingServer: !process.env.CI, } })5. 创建Mock数据创建mocks/handlers.tsimport { http, HttpResponse } from msw export const handlers [ http.get(/api/users, () { return HttpResponse.json([ { id: 1, name: John Doe, email: johnexample.com }, { id: 2, name: Jane Smith, email: janeexample.com } ]) }), http.post(/api/login, async ({ request }) { const data await request.json() if (data.email adminexample.com data.password password) { return HttpResponse.json({ token: mock-jwt-token, user: { id: 1, name: Admin } }) } return HttpResponse.json({ error: Invalid credentials }, { status: 401 }) }) ]测试目录结构src/ ├── components/ │ ├── Button.vue │ └── Button.test.ts ├── utils/ │ ├── calculator.ts │ └── calculator.test.ts ├── api/ │ ├── users.ts │ └── users.test.ts └── App.vue tests/ ├── login.spec.ts ├── dashboard.spec.ts └── checkout.spec.ts mocks/ └── handlers.ts vitest.config.ts playwright.config.ts vitest.setup.tsCI/CD集成GitHub Actions配置创建.github/workflows/test.ymlname: Test on: push: branches: [ main ] pull_request: branches: [ main ] jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkoutv4 - name: Use Node.js uses: actions/setup-nodev4 with: node-version: 20 - name: Install dependencies run: npm ci - name: Run unit tests run: npm run test:unit - name: Run end-to-end tests run: npm run test:e2e - name: Upload coverage report uses: actions/upload-artifactv4 with: name: coverage-report path: coverage/GitLab CI配置创建.gitlab-ci.ymlstages: - test unit-test: stage: test image: node:20 script: - npm ci - npm run test:unit artifacts: reports: junit: coverage/junit.xml e2e-test: stage: test image: mcr.microsoft.com/playwright:v1.40.0-jammy script: - npm ci - npm run test:e2e测试脚本配置{ scripts: { test:unit: vitest run, test:unit:watch: vitest, test:unit:coverage: vitest run --coverage, test:e2e: playwright test, test:e2e:headed: playwright test --headed, test:e2e:debug: playwright test --debug, test: npm run test:unit npm run test:e2e } }测试环境隔离使用环境变量// src/config.ts export const config { apiUrl: import.meta.env.VITE_API_URL || http://localhost:3000, timeout: Number(import.meta.env.VITE_TIMEOUT) || 5000 } // .env.test VITE_API_URLhttp://localhost:3000 VITE_TIMEOUT10000数据库隔离// tests/utils/database.ts import { PrismaClient } from prisma/client const prisma new PrismaClient() export async function setupTestDatabase() { await prisma.user.deleteMany({}) await prisma.post.deleteMany({}) } export async function teardownTestDatabase() { await prisma.$disconnect() } export async function createTestUser(data: PartialUser) { return prisma.user.create({ data: { email: data.email || testexample.com, name: data.name || Test User, ...data } }) }测试辅助工具Testing Libraryimport { render, screen, fireEvent } from testing-library/vue import Button from ./Button.vue test(button renders correctly, () { render(Button, { props: { text: Click me } }) const button screen.getByRole(button, { name: /click me/i }) expect(button).toBeInTheDocument() fireEvent.click(button) })Vue Test Utilsimport { mount } from vue/test-utils import Counter from ./Counter.vue test(counter increments, async () { const wrapper mount(Counter) expect(wrapper.find(.count).text()).toBe(0) await wrapper.find(button).trigger(click) expect(wrapper.find(.count).text()).toBe(1) })测试环境调试使用debug模式# Vitest调试 npx vitest --inspect-brk # Playwright调试 npx playwright test --debug生成测试报告# 单元测试报告 npx vitest run --coverage open coverage/index.html # 端到端测试报告 npx playwright test open playwright-report/index.html常见问题解决问题1测试环境与生产环境不一致解决方案使用相同的Node.js版本和依赖版本# 使用.nvmrc echo 20.10.0 .nvmrc # 使用package-lock.json锁定依赖 npm ci问题2测试依赖外部服务解决方案使用Mock替代真实服务// 使用MSW拦截API请求 vi.mock(axios, () ({ default: vi.fn(() Promise.resolve({ data: mockData })) }))问题3测试运行缓慢解决方案并行运行测试避免依赖外部服务使用更快的测试框架如Vitest替代Jest// vitest.config.ts export default defineConfig({ test: { maxWorkers: 4 } })问题4测试不稳定解决方案确保测试隔离避免测试间依赖使用自动等待// ✅ 使用自动等待 await expect(page.locator(textSuccess)).toBeVisible() // ❌ 避免硬编码等待 await page.waitForTimeout(1000)总结搭建一个完善的测试环境需要选择合适的测试框架Vitest用于单元测试Playwright用于端到端测试配置测试环境设置JSDOM环境、Mock服务、覆盖率报告集成CI/CD确保每次代码提交都自动运行测试保持环境一致使用环境变量、锁定依赖版本调试和优化使用调试工具、优化测试性能现在开始构建你的测试环境吧一个好的测试环境可以让你的开发更加高效和可靠。最后一句忠告测试环境不是一劳永逸的需要持续维护和优化