Add Vitest as Alternative to Jest for Angular

[elfelli]

Add Vitest as Alternative to Jest for Angular

Description

This PR implements support for Vitest as an alternative testing framework to Jest for Angular applications, as requested in issue #31134.

Angular now provides experimental Vitest support through the official @angular/build:unit-test builder without requiring third-party dependencies like @angular-builders/jest, making it a cleaner and more streamlined alternative.

Changes

User-Facing Changes

• Angular users are now prompted during generation to choose between Jest (default) and Vitest
• New option: --client-test-framework (jest | vitest)
• Jest remains the default for backward compatibility

Implementation Details

Modified Files:

• generators/client/command.ts - Added clientTestFramework configuration option with prompt (Angular only)
• generators/client/application.ts - Added conditional logic to derive test framework and boolean properties
• generators/angular/files-angular.ts - Conditional file generation based on test framework choice
• generators/angular/resources/package.json - Added vitest (4.0.2) and jsdom (26.0.0) dependencies
• generators/angular/templates/angular.json.ejs - Conditional builder configuration
• generators/angular/templates/angular.json.esbuild.ejs - Conditional builder configuration (esbuild variant)
• generators/angular/templates/package.json.ejs - Conditional dependencies and scripts

New Template Files:

• generators/angular/templates/vitest.config.ts.ejs - Vitest configuration with coverage, reporters, and exclusions
• generators/angular/templates/tsconfig.vitest.json.ejs - TypeScript configuration for Vitest tests
• generators/angular/templates/src/main/webapp/app/test-setup.ts.ejs - Test bootstrap file initializing Angular TestBed with zone.js

Technical Approach

• Uses Angular's official @angular/build:unit-test builder with runner: "vitest"
• Conditionally generates test framework files (Jest: jest.conf.js, tsconfig.spec.json | Vitest: vitest.config.ts, tsconfig.vitest.json, test-setup.ts)
• Conditionally includes dependencies (Jest packages or Vitest + jsdom)
• Works with both webpack and esbuild bundlers
• No impact on Vue (continues to use Vitest) or React (continues to use Jest)

Testing

✅ Angular + Vitest: Verified correct generation with proper builder, config files, and dependencies
✅ Angular + Jest (default): Verified no regression, works as before
✅ Vue framework: Verified still defaults to Vitest
✅ React framework: Verified still defaults to Jest
✅ Linting: npm run lint passes with no warnings

Backward Compatibility

✅ Jest remains the default for Angular applications
✅ No breaking changes to existing functionality
✅ Vue and React frameworks unaffected
✅ Existing .yo-rc.json configurations without clientTestFramework will default to Jest

Checklist

• Code follows project conventions and style
• Lint passes without warnings
• Manual testing completed for all scenarios
• Backward compatibility maintained
• No breaking changes introduced
• Documentation updated (commit message provides context)

Related Issue

Fix #31134

Screenshots/Examples

Generated with Vitest:

"test": {
  "builder": "@angular/build:unit-test",
  "options": {
    "runner": "vitest",
    "tsConfig": "tsconfig.vitest.json",
    "buildTarget": "::development"
  }
}

Generated with Jest (default):

"test": {
  "builder": "@angular-builders/jest:run",
  "options": {
    "configPath": "jest.conf.js",
    "tsConfig": "tsconfig.spec.json"
  }
}

Additional Notes

This implementation follows the pattern established by Vue's Vitest integration while adapting it for Angular's specific requirements (TestBed initialization, zone.js, official Angular CLI builder).

The Vitest support is marked as experimental in the prompt text to align with Angular's official documentation.

[mshima]

Vitest support is already in the works.
Zone.js incompatibility landed here #31154.
Mock behavior difference landed here #31156
Vitest support is almost ready here #31135

[mshima]

Thanks for your contribution.

[mshima]

Angular doesn’t support vitest.config file generators/angular/templates/vitest.config.ts.ejs