使用Vitest+AnalogJS angular-vite-plugin在GitHub Actions中遇无测试套件错误

问题背景 #

维护包含Angular项目和多个Node.js项目的monorepo时，本地运行Vitest所有测试正常，但GitHub Actions执行Angular测试时出现以下错误：

⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯

 FAIL |angular-project|  src/app/app.component.spec.ts [ apps/angular-project/src/app/app.component.spec.ts ]
Error: No test suite found in file /home/runner/work/my-org/my-repo/apps/angular-project/src/app/app.component.spec.ts
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed (1)
      Tests  no tests
   Start at  15:22:08
   Duration  762ms (transform 46ms, setup 26ms, collect 16ms, tests 0ms, environment 449ms, prepare 551ms)

 ELIFECYCLE  Command failed with exit code 1.

注释angular()插件可解决该报错，但Vitest原生不支持Angular，导致所有测试失败。使用的Vitest配置如下：

/// <reference types="vitest" />
/* eslint-disable no-restricted-globals */

import angular from '@analogjs/vite-plugin-angular'
import path from 'node:path'
import { defineConfig } from 'vite'
import viteTsConfigPaths from 'vite-tsconfig-paths'

const PROJECT_NAME = 'angular-project'

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      GITHUB_ACTIONS?: string
    }
  }
}

export default defineConfig({
  root: 'apps/angular-project',

  plugins: [
    angular(),
    viteTsConfigPaths({
      projects: ['../../tsconfig.base.json', './tsconfig.json', './tsconfig.spec.json'],
    }),
  ],

  test: {
    name: PROJECT_NAME,
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./src/test-setup.ts'],
    include: ['./src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
    reporters: process.env.GITHUB_ACTIONS ? ['verbose', 'github-actions'] : 'default',
    server: {
      deps: {
        inline: ['@angular/material'],
      },
    },
    env: process.env,
    coverage: {
      provider: 'v8',
      reportsDirectory: './coverage',
    },
  },

  define: {
    'import.meta.vitest': true,
  },
})

解决方案 #

1. 确保依赖安装完整且版本兼容 #

GitHub Actions环境中，依赖安装可能因缓存或lockfile问题导致@analogjs相关包缺失或版本不匹配：

• 在工作流中使用npm ci而非npm install，严格按照lockfile安装依赖：

  - name: Install dependencies
    run: npm ci
  

• 升级@analogjs/vite-plugin-angular到最新稳定版：

  npm install @analogjs/vite-plugin-angular@latest --save-dev
  

• 同步本地与GitHub Actions的Node.js版本，在工作流中指定：

  - name: Use Node.js 20.x
    uses: actions/setup-node@v4
    with:
      node-version: '20.x'
      cache: 'npm'
  

2. 调整Vitest配置中的路径解析 #

GitHub Actions的工作目录结构可能导致相对路径解析异常，修改include和setupFiles为基于root的绝对路径：

test: {
  // ...其他配置
  setupFiles: [path.resolve(__dirname, 'src/test-setup.ts')],
  include: [path.resolve(__dirname, 'src/**/*.{test,spec}.ts')],
}

或者简化路径（因root已设为apps/angular-project，直接写相对root的路径）：

test: {
  // ...其他配置
  setupFiles: ['src/test-setup.ts'],
  include: ['src/**/*.{test,spec}.ts'],
}

3. 配置@analogjs/vite-plugin-angular的测试模式 #

显式指定插件在测试环境下的转译配置，确保Angular组件和测试文件被正确处理：

plugins: [
  angular({
    test: true, // 启用测试模式
    tsconfig: './tsconfig.spec.json', // 指定测试用的tsconfig
  }),
  viteTsConfigPaths({
    projects: ['../../tsconfig.base.json', './tsconfig.json', './tsconfig.spec.json'],
  }),
],

4. 确保GitHub Actions工作目录正确 #

在运行测试命令前，切换到Angular项目的目录：

- name: Run Angular tests
  working-directory: ./apps/angular-project
  run: npx vitest

或者在package.json的scripts中指定工作目录：

{
  "scripts": {
    "test:angular": "cd apps/angular-project && vitest"
  }
}

然后在工作流中运行：

- name: Run Angular tests
  run: npm run test:angular

5. 禁用Vitest缓存（临时排查） #

GitHub Actions中的缓存可能残留旧转译结果，尝试禁用缓存：

test: {
  // ...其他配置
  cache: false,
}

或者在工作流中添加清理缓存步骤：

- name: Clear Vitest cache
  run: rm -rf node_modules/.vitest

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