自动化测试深度实战：Jest单元测试与Cypress端到端测试指南

本文链接：https://blog.csdn.net/weixin_69882801/article/details/145660245

一、测试体系全景解析

1.1 现代前端测试架构

1.2 工具链生态对比

维度	Jest	Cypress	Playwright
执行环境	Node.js	浏览器	多浏览器
测试类型	单元/组件测试	E2E测试	E2E测试
执行速度	快（毫秒级）	较慢（秒级）	中等
调试能力	控制台日志	时间旅行调试器	追踪器
网络控制	需手动Mock	内置拦截	全局拦截
移动端支持	无	有限	完善
典型场景	业务逻辑验证	用户流程验证	跨平台兼容测试

二、Jest单元测试深度实践

2.1 高级配置详解

// jest.config.js
module.exports = {
  preset: 'ts-jest',
  moduleNameMapper: {
    '\\.(css|less)$': 'identity-obj-proxy',
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  transform: {
    '^.+\\.(t|j)sx?$': ['babel-jest', {
      presets: [
        ['@babel/preset-env', { targets: { node: 'current' } }],
        '@babel/preset-react'
      ]
    }]
  },
  coverageReporters: ['html', 'lcov', 'text-summary'],
  reporters: [
    'default',
    ['jest-junit', { outputDirectory: 'reports', outputName: 'junit.xml' }]
  ]
};

2.2 复杂组件测试案例

场景：数据获取组件

// UserList.jsx
import { useEffect, useState } from 'react';
import axios from 'axios';

export default function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await axios.get('/api/users');
        setUsers(response.data);
      } catch (error) {
        console.error('Fetch error:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []);

  return (
    <div>
      {loading ? (
        <div data-testid="loader">Loading...</div>
      ) : (
        <ul data-testid="user-list">
          {users.map(user => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

测试套件实现

// UserList.test.jsx
import { render, screen, waitFor } from '@testing-library/react';
import axios from 'axios';
import UserList from './UserList';

jest.mock('axios');

describe('UserList Component', () => {
  beforeEach(() => {
    axios.get.mockReset();
  });

  test('显示加载状态', async () => {
    axios.get.mockImplementation(() => 
      new Promise(() => {})
    );
    render(<UserList />);
    expect(screen.getByTestId('loader')).toBeInTheDocument();
  });

  test('成功渲染用户列表', async () => {
    const mockUsers = [
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' }
    ];
    axios.get.mockResolvedValue({ data: mockUsers });
    
    render(<UserList />);
    
    await waitFor(() => {
      expect(screen.getByTestId('user-list')).toBeInTheDocument();
      expect(screen.getAllByRole('listitem')).toHaveLength(2);
      expect(screen.getByText('Alice')).toBeInTheDocument();
    });
  });

  test('处理网络错误', async () => {
    const consoleSpy = jest.spyOn(console, 'error');
    axios.get.mockRejectedValue(new Error('Network Error'));
    
    render(<UserList />);
    
    await waitFor(() => {
      expect(consoleSpy).toHaveBeenCalledWith(
        'Fetch error:', 
        expect.any(Error)
      );
      expect(screen.queryByTestId('user-list')).toBeNull();
    });
  });
});

三、Cypress端到端测试工程化

3.1 企业级项目配置

// cypress.config.js
const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
    viewportWidth: 1920,
    viewportHeight: 1080,
    experimentalStudio: true,
    setupNodeEvents(on, config) {
      require('cypress-mochawesome-reporter/plugin')(on);
      on('task', {
        queryDb: (query) => require('./cypress/plugins/db')(query),
        generateReport: (data) => {
          require('fs').writeFileSync('cypress/reports/run.log', data);
          return null;
        }
      });
    },
    env: {
      API_HOST: 'https://api.example.com',
      AUTH_TOKEN: Cypress.env('CI') ? process.env.AUTH_TOKEN : 'dev-token'
    }
  },
  reporter: 'mochawesome',
  reporterOptions: {
    reportDir: 'cypress/reports',
    overwrite: false,
    html: true,
    json: true
  }
});

3.2 复杂场景测试策略

测试场景：电商下单流程

// checkout.cy.js
describe('电商下单流程', () => {
  before(() => {
    cy.task('queryDb', 'DELETE FROM orders WHERE user_id=test_user');
    cy.loginViaApi(Cypress.env('TEST_ACCOUNT'));
  });

  afterEach(() => {
    cy.saveLocalStorageCache();
  });

  it('完整购物流程验证', () => {
    cy.visit('/products');
    
    // 商品选择
    cy.get('[data-cy=product-card]:first').within(() => {
      cy.get('[data-cy=add-to-cart]').click();
    });
    
    // 购物车操作
    cy.visit('/cart');
    cy.get('[data-cy=checkout-button]').click();
    
    // 填写地址
    cy.fillShippingAddress({
      name: '张三',
      street: '人民路100号',
      city: '上海'
    });
    
    // 支付流程
    cy.selectPaymentMethod('credit-card');
    cy.enterCardDetails({
      number: '4111111111111111',
      expiry: '12/25',
      cvc: '123'
    });
    
    // 下单确认
    cy.get('[data-cy=confirm-order]').click();
    
    // 结果验证
    cy.url().should('include', '/order-success');
    cy.get('[data-cy=order-number]').should('have.length.gt', 0);
    cy.task('queryDb', 'SELECT * FROM orders').then(orders => {
      expect(orders).to.have.length(1);
    });
  });
});

自定义命令扩展

// cypress/support/commands.js
Cypress.Commands.add('loginViaApi', (user) => {
  cy.request('POST', `${Cypress.env('API_HOST')}/login`, {
    email: user.email,
    password: user.password
  }).then(({ body }) => {
    window.localStorage.setItem('authToken', body.token);
  });
});

Cypress.Commands.add('fillShippingAddress', (address) => {
  cy.get('[data-cy=name-input]').type(address.name);
  cy.get('[data-cy=street-input]').type(address.street);
  cy.get('[data-cy=city-select]').select(address.city);
});

Cypress.Commands.add('assertVisualRegression', (selector) => {
  cy.get(selector).then(($el) => {
    const styles = window.getComputedStyle($el[0]);
    expect(styles.backgroundColor).to.equal('rgb(255, 255, 255)');
    expect(parseFloat(styles.fontSize)).to.be.closeTo(16, 0.5);
  });
});

四、持续集成高级配置

4.1 GitLab CI完整流水线

# .gitlab-ci.yml
stages:
  - test
  - build
  - deploy

unit-test:
  stage: test
  image: node:18
  cache:
    key: ${CI_COMMIT_REF_SLUG}
    paths:
      - node_modules/
  script:
    - npm ci
    - npm test -- --ci --reporters=default --reporters=jest-junit
  artifacts:
    reports:
      junit: junit.xml
    paths:
      - coverage/

e2e-test:
  stage: test
  image: cypress/browsers:node18-chrome114
  needs: []
  parallel: 3
  variables:
    CYPRESS_RECORD_KEY: $CYPRESS_KEY
  script:
    - npm ci
    - npm run start:ci &
    - npm run cy:run -- --record --parallel --group "Chrome Tests"
  artifacts:
    paths:
      - cypress/screenshots/
      - cypress/videos/

deploy-prod:
  stage: deploy
  image: alpine
  rules:
    - if: $CI_COMMIT_TAG
  script:
    - apk add aws-cli
    - aws s3 sync build/ s3://prod-bucket --delete

4.2 性能优化策略

依赖缓存策略

# 缓存策略示例
cache:
  key: ${CI_COMMIT_REF_SLUG}-${CI_JOB_NAME}
  paths:
    - node_modules/
    - .npm
  policy: pull-push

测试分片执行

# 分割测试文件
cypress run --spec "cypress/e2e/checkout/*.js" --env grep="checkout"

容器资源优化

FROM cypress/browsers:node18-chrome114
RUN apt-get update && \
    apt-get install -y libgtk2.0-0 libnotify-dev libgconf-2-4 libnss3 libxss1 \
    libasound2 libxtst6 xauth xvfb && \
    rm -rf /var/lib/apt/lists/*
ENV DISPLAY=:99

测试数据管理

// 使用FactoryBot生成测试数据
Cypress.Commands.add('createUser', (attributes = {}) => {
  const defaultUser = {
    name: 'Test User',
    email: `test_${Date.now()}@example.com`,
    password: 'password123'
  };
  return cy.task('createUser', { ...defaultUser, ...attributes });
});

五、质量门禁与监控体系

5.1 测试覆盖率深度分析

5.2 SonarQube集成配置

# sonar-project.properties
sonar.projectKey=frontend-app
sonar.sources=src
sonar.tests=src
sonar.test.inclusions=**/*.test.jsx,**/*.cy.js
sonar.javascript.lcov.reportPaths=coverage/lcov.info
sonar.typescript.coverage.reportPaths=coverage/lcov.info
sonar.qualitygate.wait=true

5.3 性能基准测试

// cypress/plugins/index.js
module.exports = (on, config) => {
  on('before:browser:launch', (browser, launchOptions) => {
    if (browser.name === 'chrome') {
      launchOptions.args.push('--enable-benchmarking');
      launchOptions.args.push('--enable-metrics-reporting');
    }
    return launchOptions;
  });
  
  on('task', {
    getMetrics: () => {
      return window.performance.toJSON().timing;
    }
  });
};

六、企业级最佳实践

6.1 测试策略矩阵

测试类型	执行频率	触发条件	超时时间	负责人
单元测试	每次提交	代码变更	5m	开发工程师
集成测试	每日	主分支更新	15m	QA工程师
E2E冒烟测试	每小时	环境部署	30m	运维团队
性能测试	每周	版本发布前	2h	专项团队
安全扫描	每次构建	流水线触发	20m	安全团队

6.2 测试数据管理

七、疑难问题解决方案

7.1 常见问题诊断表

问题现象	可能原因	解决方案
测试在CI中失败本地成功	环境差异/时区设置	统一Docker基础镜像
Cypress截图不一致	字体渲染差异	禁用字体抗锯齿
测试随机失败	异步操作未正确处理	增加重试机制
覆盖率报告缺失	源码映射配置错误	检查babel配置和sourcemap生成
网络请求超时	接口响应时间过长	调整默认超时时间
内存泄漏导致测试失败	未清理全局状态	使用beforeEach清理测试上下文

7.2 测试稳定性增强方案

// 全局重试配置
Cypress.on('test:after:run', (test, runnable) => {
  if (test.state === 'failed') {
    const retries = runnable._retries || 0;
    if (retries < 2) {
      runnable._retries = retries + 1;
      test.state = 'pending';
    }
  }
});