<template> line is shown as not covered if v-if used in component (4.6+, 5.0+)

[TheJaredWilcurt]

Related plugins

• plugin-vue
• plugin-vue-jsx

Describe the bug

In 4.5.2 and below components with v-if would have 100% test coverage, now with 4.6.0 and above they will report the first line of the Vue component (<template>) as not being covered in tests.

I've made the min-repro as simple as possible, it boils down to this:

Example:

<template>
  <div v-if="true"></div>
</template>

<script>
export default {
  name: 'App'
};
</script>

import { shallowMount } from '@vue/test-utils';

import App from '../../src/App.vue';

describe('App.vue', () => {
  test('Shallow mount', async () => {
    const wrapper = shallowMount(App);

    expect(true)
      .toEqual(true);
  });
});

Reproduction

https://github.com/TheJaredWilcurt/vite-plugin-vue-min-repro

Steps to reproduce

1. clone repo
2. npm install
3. npm t

System Info

Tested on Node 20 and 21, Ubuntu 22.04 LTS and also GHA.

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[TheJaredWilcurt]

[email protected]@4.6.0

[TheJaredWilcurt]

I made a new branch in the minrepro with today's date and the latest versions for all dependencies. Issue is still present:

• https://github.com/TheJaredWilcurt/vite-plugin-vue-min-repro/tree/2024-08-18

[TheJaredWilcurt]

Issue still present with latest dependencies:

• https://github.com/TheJaredWilcurt/vite-plugin-vue-min-repro/tree/2024-12-27

[boboldehampsink]

Same here, still stuck on 4.5.2 all this time...

[dryton]

Also unable to upgrade from 4.5.2 due to this coverage issue

[boboldehampsink]

Now also unable to use Vite 6 as 4.5.2 requires Vite 5

[edison1105]

It no longer works due to reuseAST, starting from version vue v3.4.3,

vite-plugin-vue/packages/plugin-vue/src/template.ts

Lines 214 to 226 in 8204fce

	/**
	* Versions before 3.4.3 have issues when the user has passed additional
	* template parse options e.g. `isCustomElement`.
	*/
	function canReuseAST(version: string | undefined) {
	if (version) {
	const [_, minor, patch] = version.split('.').map(Number)
	if (minor >= 4 && patch >= 3) {
	return true
	}
	}
	return false
	}

---

here is a workaround

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
+import * as CompilerDOM from '@vue/compiler-dom'

export default defineConfig({
  plugins: [
    vue({
+      template:{
+        compiler: CompilerDOM
+      }
    })
  ],
  test: {
    environment: 'happy-dom',
    globals: true,
    coverage: {
      exclude: [
        '**/main.js'
      ]
    }
  }
});

[boboldehampsink]

I have another workaround which patches the compiler version so it skips ast re-use:

vitest.config.js

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, version: '3.4.2' },
    }),
  ],
});