search

vuejs / vue-jest

Jest Vue transformer
MIT License
744 stars 157 forks source link

vue SFC template coverage #198

Open tkesgar opened 5 years ago

tkesgar commented 5 years ago

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:

mendicm commented 4 years ago

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 commented 4 years ago

Any suggestion about this? I have the same question.

ThePeach commented 4 years ago

which version of jest are you using? npm ls jest ? if you're on v25, that might be the reason, see other issue: https://github.com/vuejs/vue-jest/issues/217, downgrade might be the best way to get around this without too much hassle

thekonz commented 4 years ago

@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 Githubissues.

  • Githubissues is a development platform for aggregating issues.