How to disable coverage report for <template> and <style> section in the vue file

[zhangbg]

I want to collect coverage report for the <script> section in the vue file. Is there any idea to disable coverage report for and <style> section in the vue file?

[AriPerkkio]

Both c8 and istabul coverage providers utilize source maps when mapping covered transformed code back to source files. If the <style> block is included in source maps it will be shown in coverage report. It's the Vue compiler that does that.

On Vitest repository there is test/coverage-test/src/Defined.vue which looks fine to me when using coverage.provider: istanbul. The <style> block is not included but the <template> is.

[mityaua]

So what about template tag? Is it possible to exclude this tag from coverage? (istanbul).

[AriPerkkio]

Something like this could work:

import { defineConfig } from "vitest/config";
import vue from "@vitejs/plugin-vue";
import * as compiler from "vue/compiler-sfc";

export default defineConfig({
  plugins: [
    vue({
      compiler: {
        ...compiler,
        // Remove source maps from Vue templates
        compileTemplate: (...options) => ({
          ...compiler.compileTemplate(...options),
          map: undefined,
        }),
      },
    }),
  ],
});

[philly-vanilly]

@zhangbg

I want to collect coverage report for the <script> section in the vue file. Is there any idea to disable coverage report for and <style> section in the vue file?

very easily. use search-replace in your IDE to add v-8 ignore tags in your components like this:

/* v8 ignore start */
<template>
  ...
</template>
/* v8 ignore end */

as for styles, those are ignored by default

[timrayers]

Is it possible to set this at a project level, rather than in every file?

[mityaua]

Is it possible to set this at a project level, rather than in every file?

and is it possible for certain html elements? cuz now /* v8 ignore start */ comment inside vue template tag renders too.

[roshnimridha04]

/* v8 ignore start /

...

/ v8 ignore end */ does not seem to work with latest version 4. Any of you have solution how to ignore coverage in the html in .vue files

[AriPerkkio]

See:

• Ignore code in SFC <template> tags in coverage report. #8957

[roshnimridha04]

My existing tests somehow fail with this approach mentioned here: #8957. I started getting weird issues like At least one or <script> is required in a single file component. I have my templates and scripts defined and had been working amazingly fine since years and even with earlier version of vitest things used to work fine.
Will /* v8 ignore start */ in templates not work at all ? Have that been removed? any ther way to comment out only the templates from vue files. while the scripts get covered.

[AriPerkkio]

ignore start does not work in Vitest v4. The exclusions are applied in differently.

I would recommend to open this at https://github.com/vuejs/core/issues as its source maps don't generally work with any Javascript coverage tooling. They should provide way to exclude all <template> from source maps easily.

[AriPerkkio]

Continues at:

• Add ignore start and ignore stop coverage ignore hints #9203