vue SFC template coverage

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 <v-if> 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 <v-if> 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

[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! 😅

[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 🙃