vitest icon indicating copy to clipboard operation
vitest copied to clipboard

Wrong coverage result with Svelte bind operator

Open ysitbon opened this issue 3 years ago • 0 comments

Describe the bug

Hello,

Before beginning, I know that this issue should probably be addressed to Svelte directly. Maybe how it generates code. That could be c8 also. Since I've spotted it first in vitest to remove any doubts I preferred to post it here first. Please, don't hesitate to redirect me in the right direction if I'm wrong!

With Svelte using the bind operator coverage returns invalid results. For example with the exact same component, where the only difference is the usage of bind:this={ref} at the root element of the component, the branch coverage pass from 100% to 0%.

Here the component definition without bind ButtonCoverageValid.svelte:

<script>
  export let text = "MyText";
</script>
<button {...$$restProps}>{text}</button>

And the one with the bind operator ButtonCoverageInvalid.svelte:

<script>
  export let text = "MyText";
  export let ref;
</script>
<button bind:this={ref} {...$$restProps}>{text}</button>

Both run the same test and here the result from the coverage:

------------------------------|---------|----------|---------|---------|-------------------
File                          | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
------------------------------|---------|----------|---------|---------|-------------------
All files                     |     100 |        0 |     100 |     100 | 
 ButtonCoverageInvalid.svelte |     100 |        0 |     100 |     100 | 5
 ButtonCoverageValid.svelte   |     100 |      100 |     100 |     100 | 
------------------------------|---------|----------|---------|---------|-------------------

When looking into the reports, the coverage highlights invalid values. The highlighting is more relevant on bigger components with multiple lines of html template instead of only one in this case.

Reproduction

Here is a github repository specially created to reproduce the error with the minimal requirement https://github.com/ysaskia/coverage-svelte-bind-operator

Just clone then npm install and then npm run test.

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
    Memory: 16.29 GB / 31.78 GB
  Binaries:
    Node: 16.14.2 - ~\AppData\Local\nvs\default\node.EXE
    npm: 8.7.0 - ~\AppData\Local\nvs\default\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (100.0.1185.44)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    vitest: ^0.9.4 => 0.9.4

Used Package Manager

npm

Validations

ysitbon avatar Apr 22 '22 14:04 ysitbon