@altack/vite-angular-preprocessor

@altack/vite-angular-preprocessor

Compile your Angular test specs using cypress-vite

Install

npm i @altack/vite-angular-preprocessor cypress-vite

Setup

[cypress.config.ts]

import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
import { defineConfig } from 'cypress';
import vitePreprocessor from 'cypress-vite';
import { resolve } from 'path';

const CYPRESS_CONFIG = {
    ...
};

export default defineConfig({
    e2e: {
        ...nxE2EPreset(__filename, { cypressDir: 'src' }),
        ...CYPRESS_CONFIG,
        setupNodeEvents: (on, config) => {
            on(
                'file:preprocessor',
                vitePreprocessor({
                    configFile: resolve(__dirname, './vite.config.mts')
                })
            );
            return config;
        }
    }
});

[vite.config.mts]

import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import ngPreprocessor from '@altack/vite-angular-preprocessor';
import { externalizeDeps } from 'vite-plugin-externalize-deps';
import { join } from 'node:path';
export default defineConfig({
  build: {
    target: 'es2022'
  },
  resolve: {
    extensions: ['.ts']
  },
  plugins: [
    externalizeDeps({ // required if you want to skip most of node_modules imports
      except: [/^@angular\/.+$/, /^rxjs(\/.+)?$/, 'tslib'],
      useFile: join(__dirname, '../../package.json')
    }),
    tsconfigPaths({ projects: ['../../tsconfig.base.json'] }), // required for Nx Monorepos
    ngPreprocessor()
  ]
});