cypress/plugins/index.ts

ts
import codeCoverageTask from '@cypress/code-coverage/task';
import { startDevServer } from '@cypress/vite-dev-server';
import path from 'node:path';

export default (
  on: Cypress.PluginEvents,
  config: Cypress.PluginConfigOptions,
): void | Cypress.ConfigOptions | Promise<Cypress.ConfigOptions> => {
  on('dev-server:start', async (options) => {
    return startDevServer({
      options,
      viteConfig: {
        configFile: path.resolve(__dirname, '..', '..', 'vite.config.ts'),
      },
    });
  });

  codeCoverageTask(on, config);

  return config;
};

cypress/support/index.ts

ts
import '@cypress/code-coverage/support';
import './commands';

vite.config.ts

ts
/// <reference types="vitest" />
import content from '@originjs/vite-plugin-content';
import { quasar, transformAssetUrls } from '@quasar/vite-plugin';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'node:path';
import type { PluginOption } from 'vite';
import { defineConfig } from 'vite';
import istanbul from 'vite-plugin-istanbul';

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  const plugins: PluginOption[] = [
    vue({
      template: { transformAssetUrls },
    }),
    quasar({
      autoImportComponentCase: 'pascal',
      sassVariables: 'src/quasar-variables.scss',
    }),
    content(),
  ];

  console.log('command:', command);
  console.log('mode:', mode);
  // if (command === 'serve' && mode === 'development') {
  console.info('Adding istanbul plugin');
  plugins.push(
    istanbul({
      include: 'src/*',
      exclude: ['node_modules', 'cypress/', 'test/'],
      extension: ['.ts', '.vue'],
      cypress: true,
      forceBuildInstrument: true,
    }),
  );
  // }

  return {
    plugins,
    test: {
      environment: 'happy-dom',
      coverage: {
        reporter: ['cobertura', 'html', 'text'],
        all: true,
        include: ['src/**/*.{ts,vue}'],
        exclude: ['src/**/*.d.ts', 'src/**/*.spec.ct.ts'],
      },
      reporters: ['default', 'junit'],
      outputFile: 'junit.xml',
    },
    resolve: {
      alias: {
        '@': resolve(__dirname, './src'),
      },
    },
    css: {
      postcss: {
        plugins: [
          {
            postcssPlugin: 'internal:charset-removal',
            AtRule: {
              charset(atRule) {
                if (atRule.name === 'charset') {
                  atRule.remove();
                }
              },
            },
          },
        ],
      },
    },
    server: {
      port: 5173,
    },
    preview: {
      port: 4173,
    },
  };
});

@User not, sure but maybe you have some knowledge about this?

Component Testing + Code Cov is untested for Vite.

We need help fixing it.

It's one of the things that's broken/never build for the Alpha.

yeah, feels like it

But I don't know how to add it to Vite easily

This is for a diff project -- not faker, yes?

yeah

This would be really helpful for the community if you could help figure it out.

I can tell you the general structure of how the code coverage plugin works.

DM if you're ever interested in picking it up.

I think we're looking at 4-6 weeks before I can look at it?

But we'll see.

If it's important to you I will try to fix it.

prio like hell 😛

I'd like to track this

I did not create an issue in cypress right now, cause I'm assuming that I configured something wrongly and/or my Cypress+Vite+Vue3+TS setup is to strong

Make sure to update the issue above and/or @mention me if you do something new