React项目Cypress GitHub Action运行持续报错问题求助

问题描述 #

尝试配置Cypress GitHub Action工作流，实现代码推送到dev/staging/prod分支、以及Pull Request合并前的自动化测试，但每次工作流运行都会抛出错误。初步怀疑问题与cypress-io/github-action@v2默认使用的Node版本有关，但多次调整配置后错误仍未解决。

现有配置 #

package.json #

{
  "name": "crossa-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@stitches/react": "^1.2.8",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "apisauce": "^2.1.5",
    "axios": "^0.27.2",
    "axios-retry": "^3.2.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "docker:build-image-staging": "docker-compose build --no-cache staging",
    "docker:build-image-prod": "docker-compose build --no-cache prod",
    "docker:staging": "docker-compose up staging",
    "docker:prod": "docker-compose up prod",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public",
    "cypress:open": "cypress open",
    "cypress:run": "cypress run"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "plugin:cypress/recommended"
    ],
    "overrides": [
      {
        "files": [
          "**/*.stories.*"
        ],
        "rules": {
          "import/no-anonymous-default-export": "off"
        }
      }
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@storybook/addon-a11y": "^6.4.19",
    "@storybook/addon-actions": "^6.4.19",
    "@storybook/addon-essentials": "^6.4.19",
    "@storybook/addon-interactions": "^6.4.19",
    "@storybook/addon-links": "^6.4.19",
    "@storybook/builder-webpack5": "^6.4.19",
    "@storybook/manager-webpack5": "^6.4.19",
    "@storybook/node-logger": "^6.4.19",
    "@storybook/preset-create-react-app": "^4.1.0",
    "@storybook/react": "^6.4.19",
    "@storybook/testing-library": "0.0.9",
    "cypress": "^10.1.0",
    "eslint-plugin-cypress": "^2.12.1",
    "webpack": "^5.70.0"
  }
}

cypress.yml 工作流配置 #

name: Cypress Tests
on:
  push:
    branches:
      - dev
      - staging
      - prod
    pull_request:
jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Cypress run
        uses: cypress-io/github-action@v2
        with:
          build: npm run build
          start: npm start

运行报错截图 #

根因分析与修复方案 #

核心问题点 #

• Node版本不兼容：cypress-io/github-action@v2默认内置Node 12运行时，而项目依赖的react-scripts@5.0.0、Cypress 10.x最低要求Node 14及以上版本，和项目中@types/node@16.x指定的版本差直接导致依赖安装、构建阶段报错。
• YAML配置缩进错误：当前配置中pull_request触发规则被错误缩进至push.branches同级，实际PR事件根本不会触发工作流。
• Action版本过旧：v2版本的cypress-action不兼容Cypress 10.x采用的新目录结构，且缺少服务启动等待、依赖缓存等必要配置，容易出现服务未启动就运行测试、依赖安装不一致的问题。
• 缺少服务就绪检测：React开发服务启动需要一定时间，默认配置下Cypress不会等待服务完全就绪就开始执行测试，直接导致连接失败报错。

修复后完整工作流配置 #

name: Cypress Tests
on:
  push:
    branches:
      - dev
      - staging
      - prod
  pull_request:
jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - name: 检出代码
        uses: actions/checkout@v3
      
      - name: 配置Node环境
        uses: actions/setup-node@v3
        with:
          node-version: 16
          cache: 'npm'
      
      - name: 安装依赖
        run: npm ci
      
      - name: 运行Cypress测试
        uses: cypress-io/github-action@v5
        with:
          build: npm run build
          start: npm start
          wait-on: 'http://localhost:3000'
          wait-on-timeout: 120

调整说明 #

• 显式指定Node 16版本，和项目依赖的类型定义版本对齐，彻底解决默认低版本Node的兼容问题
• 修正YAML缩进，将pull_request提升至和push同级，确保所有PR提交都会触发自动化测试
• 升级cypress-action到v5版本，原生支持Cypress 10.x的目录结构，兼容性更稳定
• 增加wait-on配置，等待本地3000端口的React服务完全启动后再执行测试，将超时时间设置为120秒，适配CI环境下较慢的构建速度
• 开启npm依赖缓存，使用npm ci严格按照lock文件安装依赖，避免本地和CI环境依赖版本漂移的问题
• 升级checkout action到v3维护版本，解决旧版本action在新runner节点上的运行兼容问题

内容的提问来源于stack exchange，提问作者Michael Ekwere