component testing suport

[binvb]

Is your feature request related to a problem? Please describe.
i can't find any document about code coverage width component testing, can code-coverage suport it? thank you

[parky128]

+1 on this, anyone able to comment around supporting coverage for component tests?

[SystemParadox]

It seems to work if you follow the e2e coverage guide and just substitute e2e for component everywhere.

[ShellyDCMS]

@SystemParadox , Did you manage to collect coverage for Angular Cypress component tests? If so, could you share your repo?

[SystemParadox]

We use svelte not angular, but once you've got component tests working, following the e2e coverage guide should work, just substitute e2e for component everywhere.

[bindea-mihai]

@ShellyDCMS It's been a pain but managed to configure code coverage for cypress component tests.
You can find a working solution here

[jerkovicl]

@bindea-mihai thx alot for this, it works with lib also

[ShellyDCMS]

@bindea-mihai , you rock!!! Thanks, man.

[jerkovicl]

@bindea-mihai @ShellyDCMS Now we only need coverage for cypress e2e tests and we are golden

[bindea-mihai]

@jerkovicl this is a very good tutorial to add coverage to e2e tests

[jerkovicl]

@bindea-mihai yeah i found that aswell and didnt work for me, Istanbul loader plugin didn't instrument code sadly

[ShellyDCMS]

@jerkovicl , the e2e tutorial didn't work for me as well at first, but then I took a look at the example repo (which has minor differences) and it worked.

[jerkovicl]

@ShellyDCMS thx for the tip, managed to set it up in the end

[TonySuSeismic]

It seems cypress/code-coverage/task just can support e2e testing even I tried @bindea-mihai mentioned solution, any ideas? thanks

Cypress version: 12.4.1
node: v14.18.2
npm: 6.14.15
@cypress/code-coverage: ^3.10.0
@cypress/webpack-preprocessor: ^5.12.0

"nyc": {
    "extends": "@istanbuljs/nyc-config-typescript",
    "all": true,
    "include": [
      "src-v2/**/*.{js,jsx,ts,tsx}"
    ],
    "exclude": [
      "cypress/**/*.{js,jsx,ts,tsx}"
    ],
    "excludeAfterRemap": false
  },

I know that cypress plugin will use .nyc_output/out.json file to generate code coverage report, I tried below code for component testing but the file .nyc_output/out.json will not be updated (just includes e2e related file coverage info) so code coverage report can't be generated correclty.

component: {  
        setupNodeEvents(on, config) {  
            require('@cypress/code-coverage/task')(on, config)  
            return config  
        },  
        devServer: {  
            framework: 'react',  
            bundler: 'webpack',  
            webpackConfig: require(webpackConfigFilePath)  
        },  
        specPattern: '**/*.cy.[jt]s(x)?',  
        supportFile: 'cypress/support/component.tsx'  
    }

For e2e it works what means after I finished e2e testing the file .nyc_output/out.json will be updated and code coverage report can be generated correctly.

e2e: {  
        setupNodeEvents(on, config) {  
            require('@cypress/code-coverage/task')(on, config)  
            return config  
        },  
        supportFile: 'cypress/support/e2e.ts'  
    }  

BTW, I can't see begin and end collect code coverage info in cypress GUI for component testing, but I can see it in e2e testing, another thing is that I can see all instrument file information in window.coverage in the F12 "Application under test iframe" when do component testing what includes component testing imported react component file, but don't know why it doesn't work as office said at https://www.npmjs.com/package/@cypress/code-coverage

If you have instrumented your application's code and see the window.coverage object, then this plugin will save the coverage into .nyc_output folder and will generate reports after the tests finish (even in the interactive mode). Find the LCOV and HTML report in the coverage/lcov-report folder.

[MetRonnie]

I'm using Vite and have got the code instrumenting happening in the component tests (window.__coverage__ exists) but there is no measurement/reporting of the coverage when running the component tests.

Edit: ah, the reason it wasn't working was because I missed the need for

// cypress/component/support/component.js
import '@cypress/code-coverage/support'