Support angular with @nx/vite (configuration) plugin

[the-ult]

Thanks to the amazing work of Brandon Roberts and @yjaaidi on the vitest support for Angular within Nx, we can now generate new projects with Vitest.

• Suggest Vitest as an option for Angular apps/libraries #26339

However, when you wish to migrate an existing library, or add vitest to an existing Angular library with the @nx/vite plugin it does not generate the proper vite.config.mts file

Angular

Generated when creating a new library with testrunner=vitest:
vite.config.mts

/// <reference types='vitest' />
import angular from '@analogjs/vite-plugin-angular';
import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import { defineConfig } from 'vite';

export default defineConfig({
  root: __dirname,
  cacheDir: '../../../node_modules/.vite/libs/shared/foo',
  plugins: [angular(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
  // Uncomment this if you are using workers.
  // worker: {
  //  plugins: [ nxViteTsPaths() ],
  // },
  test: {
    watch: false,
    globals: true,
    environment: 'jsdom',
    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
    setupFiles: ['src/test-setup.ts'],
    reporters: ['default'],
    coverage: {
      reportsDirectory: '../../../coverage/libs/shared/foo',
      provider: 'v8',
    },
  },
});

And when using @nx/vite
vitest.config.ts -> not an mts file

/// <reference types='vitest' />
import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import { defineConfig } from 'vite';

export default defineConfig({
  root: __dirname,
  cacheDir: '../../../node_modules/.vite/libs/shared/utils',
  plugins: [nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
  // Uncomment this if you are using workers.
  // worker: {
  //  plugins: [ nxViteTsPaths() ],
  // },
  test: {
    watch: false,
    globals: true,
    environment: 'happy-dom',
    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
    reporters: ['default'],
    coverage: {
      reportsDirectory: '../../../coverage/libs/shared/utils',
      provider: 'v8',
    },
  },
});

These are missing

• plugins: [angular(),
• setupFiles: ['src/test-setup.ts'],

Would be great if you could select the option, that it is an angular project (uiFramework), or even better if that is detected automatically

[yjaaidi]

Hey! Indeed, this is on my personal backlog 😉
I hope to be able to handle this next week.

[yjaaidi]

It would be nice if we could also add the vitest option to the preset (for users creating a new workspaces)

[the-ult]

Indeed.

And maybe even a schematic to migrate jest to vitest? 😇

[yjaaidi]

I have some plans for that 😉