tested vue single file components should show 100% code coverage instead of 0%

[fergusmeiklejohn]

Issue description or question

Vue apps usually have many small components which are essentially functional: they receive props and render html. They are easy to test, but the code coverage stays at 0%. Code coverage is useful because it shows at a glance what components haven't been tested yet, so 0% is misleading. Could you add a feature which treats these components like pure functions: if all the props are tested they should report 100% code coverage?

[smcenlly]

Are you able to provide a simple example for us that has this problem?

[fergusmeiklejohn]

Hi @smcenlly I mean a props only component like this:

<template>
  <div>
    <p>{{prop1}}</p>
    <p>{{prop2}}</p>
  </div>
</template>

<script>
export default {
  name: "propsComponent",
  props: {
    prop1: String,
    prop2: String
  }
}
</script>

It will show as 0% code coverage even if you write a simple test.
Arguably we don't need a test maybe but the point I'm making is about the code coverage being 0% even with such a straightforward test that covers all the props.

But if we put a computed property in there and test that, the code coverage will become 100%:

<template>
  <div>
    <p>{{prop1}}</p>
    <p>{{prop2}}</p>
    
    <p>{{together}}</p>
  </div>
</template>

<script>
export default {
  name: "propsComponent",
  props: {
    prop1: String,
    prop2: String
  },
  computed: {
    together() {
      return this.prop1 + this.prop2
    }
  }
}
</script>

[smcenlly]

This is expected behavior due to the way Vue internals/Jest transforms SFC props-only components and is not related to Wallaby. In Wallaby App, you should see coverage reported as n/a, not 0.

Using your example, I wrote the following test:

it('renders properly', () => {
  const msg = 'hello world'
  const wrapper = shallowMount(HelloWorld, {
    propsData: { prop1: 'hello', prop2: 'world' }
  })
  expect(wrapper.text()).toMatch(msg)
})

Using the jest CLI, my test passes but when I collect coverage from jest using npx jest --collectCoverage, I receive the following:

 PASS  tests/unit/example.spec.js
  HelloWorld.vue
    √ renders props.msg when passed (11ms)

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |        0 |        0 |        0 |        0 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.299s
Ran all test suites.

If I change the script to simply define a variable (e.g. const now = new Date(); at the start of the script tag), I receive:

 PASS  tests/unit/example.spec.js
  √ renders properly (11ms)

----------------|----------|----------|----------|----------|-------------------|
File            |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------------|----------|----------|----------|----------|-------------------|
All files       |      100 |      100 |      100 |      100 |                   |
 HelloWorld.vue |      100 |      100 |      100 |      100 |                   |
----------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.142s
Ran all test suites.

In order to report on coverage for single file components, Jest/Vue SFC script needs to contain executable JavaScript. You will see that the Vue repository also contains another issue about templates not being included in coverage calculations (vuejs/vue-jest#198), for example, in the case of v-if, v-else blocks.

If the Vue/Jest integration changes to support your scenario, Wallaby should then also report it correctly.

[fergusmeiklejohn]

@smcenlly thanks for taking the time to explain it :-)