Unable to get Code Coverage working

[JessicaSachs]

Thank you for taking time to open a new issue. Please answer a few questions to help us fix it faster. You can delete text that is irrelevant to the issue.

Is this a bug report or a feature request?

Bug Report

Reproduction

Using this example repository, I'm unable to get Code Coverage working for Component Testing.

• https://github.com/jessicasachs/crossword
• I followed this blog post https://vuejsdevelopers.com/2020/07/20/code-coverage-vue-cypress/

Only the *.js files are being covered, even though I set the extensions via babel.config.js as per the instructions.

[bahmutov]

Can I get more info because

• I forked the repo and cloned it locally
• ran yarn to install
• ran npm run test:components
• clicked CrosswordBoard.spec.js spec

After the test finished in .nyc_output I see the js and vue file results

I can open the HTML report with open coverage/lcov-report/index.html to see all files

[JessicaSachs]

Gleb and I synced, a clean installation from vue-cli with the Greetings.spec.js doesn't have coverage information and we're not sure why.

My crossword example all of a sudden started having coverage information, but previously did not.

Steps to reproduce:

npx vue create my-new-project
cd my-new-project
npx vue add cypress-experimental
npm run test:components

[bahmutov]

Reproduction from scratch: https://github.com/JessicaSachs/vue-cc-example

The UI shows a warning - no coverage information

window.__coverage__ object is undefined

[bahmutov]

Debugging with code coverage flag

DEBUG=code-coverage npm run test:components

  code-coverage reset code coverage in interactive mode +0ms
⚠️ file /Users/gleb/git/vue-cc-example/.nyc_output/out.json has no coverage information
Did you forget to instrument your web application? Read https://github.com/cypress-io/code-coverage#instrument-your-application
  code-coverage ⚠️ file /Users/gleb/git/vue-cc-example/.nyc_output/out.json has no coverage information +0ms
  code-coverage ⚠️ file /Users/gleb/git/vue-cc-example/.nyc_output/out.json has no coverage information +0ms
  code-coverage combined NYC options { 'report-dir': './coverage', reporter: [ 'lcov', 'clover', 'json', 'json-summary' ], extension: [ '.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx' ], excludeAfterRemap: false } +1ms
  code-coverage calling NYC reporter with options { 'report-dir': '/Users/gleb/git/vue-cc-example/coverage', reporter: [ 'lcov', 'clover', 'json', 'json-summary' ], extension: [ '.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx' ], excludeAfterRemap: false, tempDir: '/Users/gleb/git/vue-cc-example/.nyc_output', reportDir: '/Users/gleb/git/vue-cc-example/coverage' } +109ms
  code-coverage current working directory is /Users/gleb/git/vue-cc-example +0ms
  code-coverage after reporting, returning the report folder name /Users/gleb/git/vue-cc-example/coverage +26ms
  code-coverage Final coverage in /Users/gleb/git/vue-cc-example/coverage/coverage-final.json +1ms
  code-coverage There are 0 key(s) in /Users/gleb/git/vue-cc-example/coverage/coverage-final.json +0ms

[bahmutov]

More debugging with plugin

$ DEBUG=cypress-vue-unit-test npm run test:components

> my-new-project@0.1.0 test:components /Users/gleb/git/vue-cc-example
> vue-cli-service test:components

 INFO  Starting component tests...
  cypress-vue-unit-test adding code coverage plugin +0ms
  cypress-vue-unit-test found plugin VueLoaderPlugin already +1ms
final webpack
{

...
  plugins: [
    VueLoaderPlugin {},
    DefinePlugin { definitions: [Object] },

[bahmutov]

Ok, for the project from scratch the problem was - there was no <script> section in that .vue file, thus the coverage was empty. Added a note to the README, and we will extend the scaffolded example to have some code.