Add C8 Coverage support for Vue template logic

[JessicaSachs]

Clear and concise description of the problem

Currently, there's no support for reporting coverage of SFC files where the logic is performed in the template instead of the script block.

For example, in a test, if you mount this component with prop msg, the run will show 100% coverage, even though line No. 11 is not covered.

HelloWorld.spec.ts

Logic in template

Logic in script

When you refactor the file to pull the logic into the script tag instead of the template, the coverage report correctly reports the uncovered lines of code.

Missing coverage

Suggested solution

No idea. Jest + Istanbul doesn't solve this either.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[Demivan]

Template coverage is already working and is trying to mark v-if as not covered:

Problem is Vite sourcemaps. Not sure if this is the issue with Vite itself or Vue plugin.

@patak-dev Is there a way to investigate Vite sourcemaps after each plugin? Something like https://github.com/antfu/vite-plugin-inspect but for sourcemaps?

[Demivan]

@JessicaSachs Vite PR created.

Coverage with fix:

[Demivan]

Fixed in @vitejs/plugin-vue v2.2.1

update: Not fixed yet :)

[patak-dev]

There was an issue while publishing, it will be fixed when we solve it

[patak-dev]

Publishing issue is fixed, solved in https://www.npmjs.com/package/@vitejs/plugin-vue/v/2.2.2

[JessicaSachs]

So cool! I can't wait to give it a try.

[ebisbe]

@JessicaSachs did you try it?

@Demivan I'm seeing different results just by swapping C8 and Istanbul.
This first screenshot is with Istanbul

The second one with C8

"@vitejs/plugin-vue": "^3.1.2",
"@vitejs/plugin-vue": "^3.1.2",
"@vitest/coverage-c8": "^0.24.3",
"@vitest/coverage-istanbul": "^0.24.3",
"vite": "^3.1.8",
"vitest": "^0.24.3"

I'm seeing different results as well with different tests. For now I'll stick with Istanbul as it's the accurate one.

[Demivan]

@ebisbe Tried your example with c8. Seems to be working correctly.

Maybe you have some other Vite plugins that are modifying code but not providing correct sourcemaps.

[ebisbe]

@Demivan I was thinking something like that might happen. I'll review this afternoon removing plugins.

[ebisbe]

The issue is with @antfu unplugin-vue-components. There are a few unresolved issues so I'll stick with istanbul as it's working fine.

[tw-eugeneoei]

hello @Demivan @patak-dev . understand that this issue has been closed. however, i am facing a similar issue where the Branch coverage in c8 report remains at 100% when using the v-if and v-else directives to conditionally render a block within VueJS.

here are the dependencies versions:

• vue: ^3.2.45
• vitest: ^0.25.6
• @testing-library/vue: ^6.6.1
• @vitest/coverage-c8: ^0.28.5,

the vue file is as follows:

<script setup lang="ts">
import { ref } from "vue";

const showDefaultMessage = ref(true);

const toggleMessage = () => {
  showDefaultMessage.value = !showDefaultMessage.value;
};
</script>

<template>
  <main>
    <h1 v-if="showDefaultMessage">Hello world</h1>
    <h1 v-else>Hola Human</h1>
    <button @click="toggleMessage">Toggle Message</button>
  </main>
</template>

a test has been written to check that Hello world renders correctly on load. no test has been written for the v-else block.

describe("HomeView", async () => {
  it("should display 'Hello world' on load", () => {
    const { getByRole } = render(HomeView);
    getByRole("heading", { name: "Hello world" });
  });
});

however, the coverage on Branch remains at 100%

is this an expected or known behaviour? I have created a minimally reproducible repo and it can be found here.

also, using istanbul does show a different Branch coverage. below is the screenshot.