vitest with AnalogJS angular-vite-plugin | Error: No test suite found in file

I have a monorepo with an Angular project and a few Node.js projects.

Running vitest locally, all tests are passing. However, in GitHub Actions, the Angular tests are failing.

GitHub Actions test error

⎯⎯⎯⎯⎯⎯ 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.

Here is my vitest config:

vitest.config.mts

/// <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,
  },
})

By commenting out the angular() plugin, the error No test suite found in file is resolved, but then all of the tests fail, since vitest doesn't support Angular out of the box (as of January 2025).

• Analog vite-plugin-angular relies on the tsconfig.json to find the files to pass to the TypeScript compiler.
• For repositories that have a non-standard structure, like some monorepos with Nx, the default search heuristic in the Analog Angular plugin may fail to select the correct tsconfig.json.

Solution: pass tsconfig and workspaceRoot to Angular plugin

In your case, you have repository structure like:

• repo_name/apps/angular-project/vitest.config.mts
• repo_name/apps/angular-project/tsconfig.spec.ts

So the repository root directory relative to vitest.config.mts is at ../../

Then, relative to this repository root directory, your tsconfig.spec.ts is located at: apps/angular-project/vitest.config.mts

vitest.config.mts

/// <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({
      tsconfig: 'apps/angular-project/tsconfig.spec.json',
      workspaceRoot: path.resolve(__dirname, '../../'),
    }),
    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,
  },
})