GitHub Actions构建React应用遇TS2688错误：找不到@types/jest类型定义

你遇到的问题是GitHub Actions构建时找不到@types/jest类型定义文件，但本地构建正常，且package.json已声明该依赖。主要原因可能是CI环境中依赖安装不完整或配置差异，以下是针对性解决方法：

可能原因及对应方案 #

1. PNPM版本不匹配 #

本地使用的PNPM版本与GitHub Actions中全局安装的PNPM版本不一致，可能导致依赖安装异常。

• 解决方法：在CI脚本中指定与本地一致的PNPM版本，比如：

  npm install -g pnpm@8.6.10 # 替换为你本地的版本号，可通过`pnpm -v`查看
  

2. 依赖未正确安装（Dev依赖遗漏） #

虽然pnpm install默认会安装所有依赖，但CI环境可能存在缓存或网络问题，导致@types/jest（通常属于devDependencies）未安装成功。

• 排查步骤：在pnpm install后添加检查命令，确认依赖是否安装：

  pnpm list @types/jest
  

• 强制重新安装：若检查发现未安装，可使用pnpm install --force强制重新拉取依赖。

3. TSConfig配置问题 #

你的tsconfig.json中compilerOptions.types可能包含了jest，但生产构建场景下不需要该类型定义，本地环境因安装了jest相关依赖所以能正常编译，CI环境则因类型缺失报错。

• 解决方法：创建专门用于生产构建的tsconfig.build.json，移除jest类型并排除测试文件：

  {
    "extends": "./tsconfig.json",
    "compilerOptions": {
      "types": [] // 或保留生产需要的类型，比如["node"]等
    },
    "exclude": ["src/**/*.test.tsx", "src/**/*.spec.tsx"]
  }
  

  同步修改package.json中的build命令：

  "scripts": {
    "build": "export NODE_ENV=production && tsc --project tsconfig.build.json && vite build --mode production"
  }
  

4. 启用PNPM依赖缓存 #

GitHub Actions中启用依赖缓存可避免重复安装时的异常，同时加快构建速度。

• 修改actions/setup-node步骤：

  - uses: actions/setup-node@v3
    with:
      node-version: 16
      cache: 'pnpm' # 启用PNPM依赖缓存
  

调整后的CI脚本示例 #

name: rd-component-publish

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          cache: 'pnpm'
      - name: Build React App
        run: |
          git config --global url."https://github".insteadOf ssh://git@github
          npm install -g pnpm@8.6.10 # 替换为本地PNPM版本
          pnpm install
          pnpm list @types/jest # 检查依赖安装状态
          pnpm run build
        env:
          CI: false
      - uses: JS-DevTools/npm-publish@v2
        with:
          token: ${{ secrets.NPM_TOKEN }}

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