Vue components with no script breaks code coverage

[cexbrayat]

Describe the bug

Let's consider a valid Vue component like the following, with no script:

<template>
  <h1>Empty</h1>
</template>

with a unit test like:

import { mount } from '@vue/test-utils'
import Empty from '../components/Empty.vue'

test('mount component', async() => {
  const wrapper = mount(Empty)
  expect(wrapper.text()).toContain('Empty')
})

The resulting code coverage is broken.

The result is:

---------------------------------------|---------|----------|---------|---------|-------------------
File                                   | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
---------------------------------------|---------|----------|---------|---------|-------------------
All files                              |   89.83 |      100 |     100 |   89.83 |
 ...vue/vitest/examples/vue/components |     100 |      100 |     100 |     100 |
  AsyncComp.vue                        |     100 |      100 |     100 |     100 |
  AsyncWrapper.vue                     |     100 |      100 |     100 |     100 |
  Hello.vue                            |     100 |      100 |     100 |     100 |
 components                            |   68.42 |      100 |     100 |   68.42 |
  Empty.vue                            |   68.42 |      100 |     100 |   68.42 | 12-17
---------------------------------------|---------|----------|---------|---------|-------------------

Note that the file path is broken for all components, except the empty one.
But the empty one, has an issue with code coverage: it should be 100%.
When opening the HTML report for this component you get:

coverage/components/Empty.vue.html:

Unable to lookup source: /components/Empty.vue (ENOENT: no such file or directory, open '/components/Empty.vue')
Error: Unable to lookup source: /components/Empty.vue (ENOENT: no such file or directory, open '/components/Empty.vue')
    at Context.defaultSourceLookup [as sourceFinder] (/Users/cedric/Code/vue/vitest/node_modules/.pnpm/istanbul-lib-report@3.0.0/node_modules/istanbul-lib-report/lib/context.js:17:15)
    at Context.getSource (/Users/cedric/Code/vue/vitest/node_modules/.pnpm/istanbul-lib-report@3.0.0/node_modules/istanbul-lib-report/lib/context.js:71:21)

Reproduction

The component and test are available in https://github.com/cexbrayat/vitest/tree/repro/empty-vue-component-coverage

In the examples/vue directory, run pnpm coverage.

As a workaround, adding a script with just a comment fixes the code coverage:

<template>
  <h1>Empty</h1>
</template>
<script setup>
// empty
</script>

result:

------------------|---------|----------|---------|---------|-------------------
File              | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
------------------|---------|----------|---------|---------|-------------------
All files         |     100 |      100 |     100 |     100 |
 AsyncComp.vue    |     100 |      100 |     100 |     100 |
 AsyncWrapper.vue |     100 |      100 |     100 |     100 |
 Empty.vue        |     100 |      100 |     100 |     100 |
 Hello.vue        |     100 |      100 |     100 |     100 |
------------------|---------|----------|---------|---------|-------------------

System Info

System:
    OS: macOS 12.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 7.24 GB / 64.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.2 - ~/.volta/tools/image/node/16.13.2/bin/node
    Yarn: 1.22.17 - ~/.volta/tools/image/yarn/1.22.17/bin/yarn
    npm: 8.4.0 - ~/.volta/tools/image/npm/8.4.0/bin/npm
  Browsers:
    Chrome: 97.0.4692.99
    Firefox: 96.0.2
    Safari: 15.2
  npmPackages:
    @vitejs/plugin-vue: ^2.1.0 => 2.1.0
    vitest: latest => 0.2.6

Used Package Manager

pnpm

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.
• 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.

[Demivan]

Unable to lookup source error and incorrect paths will be fixed in #692.

We still have an issue with coverage reporting lines 12-17 as not being covered.

[1pm]

Incorrect coverage is reported also when vueI18n plugin is used (I haven't tested with other plugins)

Without vueI18n

// vite.config.js
export default defineConfig({
  plugins: [vue()],
  // ...
})

---------------------|---------|----------|---------|---------|-------------------
File                 | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
---------------------|---------|----------|---------|---------|-------------------
All files            |    77.8 |     90.9 |   54.54 |    77.8 |                   
 components          |     100 |      100 |      20 |     100 |                   
  TheIcon.vue        |     100 |      100 |      20 |     100 |                   

With vueI18n

// vite.config.js
export default defineConfig({
  plugins: [vue(), vueI18n()],
  // ...
})

---------------------|---------|----------|---------|---------|-------------------
File                 | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
---------------------|---------|----------|---------|---------|-------------------
All files            |   69.86 |    94.73 |   66.66 |   69.86 |                   
 components          |   90.65 |      100 |   55.55 |   90.65 |                   

[DannyFeliz]

@1pm is this still a problem when testing with the latest version?

[cexbrayat]

For those watching this issue, it looks like the Vite Vue plugin that will be released with Vite v3 fixes it.

See https://github.com/vitejs/vite/blob/plugin-vue@3.0.0-alpha.2/packages/plugin-vue/CHANGELOG.md#300-alpha2-2022-06-19 and particularly this commit vitejs/vite@ccfccec that fixes the sourcemaps for SFC components with no script

I gave it a try on my projects, and the code coverage is now accurate

[sheremet-va]

Resolved by Vite 3 and @vitejs/plugin-vue 3