自动化测试是保障代码质量的关键环节。本文将介绍如何构建完整的前端自动化测试体系。
1 单元测试实践
// Jest + Vue Test Utils 示例import{mount}from'@vue/test-utils'importButtonfrom'@/components/Button.vue'describe('Button.vue',()=>{test('renders button text correctly',()=>{constwrapper=mount(Button,{slots:{default:'Click me'}})expect(wrapper.text()).toContain('Click me')})test('emits click event when clicked',async()=>{constwrapper=mount(Button)awaitwrapper.trigger('click')expect(wrapper.emitted()).toHaveProperty('click')})test('is disabled when disabled prop is true',()=>{constwrapper=mount(Button,{props:{disabled:true}})expect(wrapper.attributes('disabled')).toBeDefined()})})2 端到端测试
// Cypress 测试示例describe('用户登录流程',()=>{beforeEach(()=>{cy.visit('/login')})it('成功登录',()=>{cy.get('[data-testid=username]').type('testuser')cy.get('[data-testid=password]').type('password123')cy.get('[data-testid=submit]').click()cy.url().should('include','/dashboard')cy.get('[data-testid=welcome-message]').should('contain','欢迎，testuser')})it('登录失败',()=>{cy.get('[data-testid=username]').type('wronguser')cy.get('[data-testid=password]').type('wrongpass')cy.get('[data-testid=submit]').click()cy.get('[data-testid=error-message]').should('contain','用户名或密码错误')})})3 测试覆盖率与质量保证
// 测试覆盖率配置// jest.config.jsmodule.exports={collectCoverage:true,coverageDirectory:'coverage',coverageReporters:['html','text','lcov'],coverageThreshold:{global:{branches:80,functions:80,lines:80,statements:80}}}// GitHub Actions 自动化测试// .github/workflows/test.yml/* name: Run Tests on: [push, pull_request] jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Setup Node.js uses: actions/setup-node@v2 with: node-version: '16' - name: Install dependencies run: npm ci - name: Run unit tests run: npm run test:unit - name: Run e2e tests run: npm run test:e2e */
