vue SFC template coverage

[tkesgar]

Version

1.0.0-beta.29

Reproduction link

https://github.com/tkesgar/vue-jest-test-coverage

Steps to reproduce

The repro is a project created using @vue/cli with a component to be tested and its unit test. For coverage, I added babel-plugin-istanbul and nyc as described here. There are two code branches, one in the template using and one in the script tag (a conditional expression).

How to reproduce:

1. Clone reproduction repo
2. yarn
3. yarn test:unit --coverage

What is expected?

Coverage should report at least two uncovered lines, one in the template via and one in the script.

What is actually happening?

Only one uncovered line is reported.

Example run:

yarn run v1.16.0
$ vue-cli-service test:unit --coverage
 PASS  tests/unit/TestComponent.spec.js
 PASS  tests/unit/example.spec.js
-----------------------------------------------------|----------|----------|----------|----------|-------------------|
File                                                 |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------------------------------------------------|----------|----------|----------|----------|-------------------|
All files                                            |      100 |       50 |      100 |      100 |                   |
 vue-jest-test-coverage                              |      100 |       50 |      100 |      100 |                   |
  unknown                                            |      100 |       50 |      100 |      100 |                22 |
 vue-jest-test-coverage/src/components/TestComponent |      100 |       50 |      100 |      100 |                   |
  index.vue                                          |      100 |       50 |      100 |      100 |                22 |
 vue-jest-test-coverage/tests/unit                   |      100 |      100 |      100 |      100 |                   |
  TestComponent.spec.js                              |      100 |      100 |      100 |      100 |                   |
  example.spec.js                                    |      100 |      100 |      100 |      100 |                   |
-----------------------------------------------------|----------|----------|----------|----------|-------------------|

Test Suites: 2 passed, 2 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        1.396s
Ran all test suites.
Done in 2.09s.

---

I am still relatively new into Vue, coming from React where code coverage works as expected. My guess is Vue internally converts the template into string during compilation phase, therefore template branching such as v-if cannot be detected.

I have looked for information on template coverage but I can't find any answer. Here is a number of links I discovered in forum:

• https://forum.vuejs.org/t/template-coverage/34836
• https://forum.vuejs.org/t/no-coverage-for-new-components/60449
• https://forum.vuejs.org/t/vue-files-and-istanbul-code-coverage/20929

[mendicm]

This is my first time doing Vue testing and this was one of my first doubts. It would be great to have some kind of coverage support in the templates.

[thonrt]

Any suggestion about this? I have the same question.

[ThePeach]

which version of jest are you using? npm ls jest ?
if you're on v25, that might be the reason, see other issue: #217, downgrade might be the best way to get around this without too much hassle

[thekonz]

@ThePeach This is not an issue with the v25 of jest. Do not confuse the two.

This issue is about capturing the code coverage of <template> blocks. The coverage of the <script> block works fine.

In the v25 jest issue, it does not capture the code coverage of any .vue files (or other non-.js files).

[mendicm]

@ThePeach This issue refers to the coverage of the <template> block.

[ThePeach]

sorry! misread!

[aberonni]

@tkesgar did you manage to make any progress on this? Also curious whether this is possible

[tkesgar]

So far still no. Thankfully it is just a minor inconvenience; with carefully written test set it should be covered anyway (e.g. should show button if X, should not show button if not X).

I'm taking a wild guess here: I don't think it is possible with templates. Maybe it will be possible with JSX (using render()), but I haven't tried it and my colleagues all preferred the more HTML-like templates 🙃

[jbrnsk]

Hope it's okay to bump this thread, because it's a frustration that I run into with Vue's test coverage coming from React and JSX. And this was the most relevant and recent discussion on this I could find.

It's nice to see the actual HTML that's covered, and I have yet to see a way to do this with Vue. This results in a lot of false coverage reporting in our app. A very basic example SFC:

<template>
  <div class="App">
    <p v-if="toggled">
      Toggled
    </p>
    <p v-else>
      I pasted something weird here. Oops!
    </p>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      toggled: true,
    };
  },
};
</script>

And the type of very simple snapshot test that I had grown accustomed to in React:

import { shallowMount, createLocalVue } from '@vue/test-utils';
import TestApp from '../TestApp.vue';

const localVue = createLocalVue();

describe('Components/TestApp', () => {
  describe('snapshot', () => {
    it('should match snapshot', () => {
      const cmp = shallowMount(TestApp, { localVue });
      expect(cmp.element).toMatchSnapshot();
      cmp.destroy();
    });
  });
});

The coverage report told me I have everything under control:

But it's not actually the case. The v-else in the template is clearly not covered. I'm not sure if Vue templates work in a way that allow this under-the-hood, but hopefully it's on their radar for Vue 3 (which I haven't seen), because this is a fairly problematic lack of transparency in the test coverage reporter IMHO.

Vue:

Random React/JSX example I grabbed from the internet:

I know you said in your most recent comment it's only a minor inconvenience, but I think you're letting them off the hook a bit here. For all of these dev problems that are simply resolved by being a little more careful, there are 100 npm modules available to patch that particular hole in our brains. 😄

And it's odd how little discussion I've seen on this one in particular, but maybe I'm just not very good at searching the internet for Vue issues yet. Thank you for coming to my TED Talk! 😅

[iliubinskii]

Any news on this?
I am also a bit disappointed that test coverage report ignores section.