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'

[Benoit-Vasseur]

Hi,

I have the coverage "partialy working". I use Vite and and this plugin to instrument my code : https://www.npmjs.com/package/vite-plugin-istanbul
The branches are good but the numbers seems wrong. They are too high.

I have a single test with one mount but my report tells me that my component runs twice :/.

Anyone with the same issue ?

[mwitty]

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'

Thank you! I was also missing this.

[thevladisss]

Did anyone experience problem instrumenting code for component testing based on webpack?

It works for E2E testing and code is properly instrumented as coverage is available on window, while for component testing it is not.

I am using @quasar/quasar-app-extension-testing-e2e-cypress/cct-dev-server for my dev server which basically mimics webpack config that is used for build and development where coverage available.

Any thoughts appreciated

[shrinidhimayya]

Not able to generate proper coverage info for cypress component tests. It says "Could not find any coverage information in your application by looking at the window coverage object. Did you forget to instrument your application?"
I am trying with svelte framework and bundler webpack. Documentation is all about e2e tests not finding info about component tests. Can someone post example of how do we instrument component tests with latest version of cypress : 13.10.0.

Thanks in advance.

[ShellyDCMS]

@shrinidhimayya
I have examples for React, Angular and Lit component tests coverage. Which framework are you using?

[shrinidhimayya]

@ShellyDCMS
its svelte framework and webpack bundler
cypress version : 13.10.0.

looking for component tests example using svelte

[ShellyDCMS]

the Lit example uses svelte cypress configuration, maybe it can be of use to you.

https://github.com/ShellyDCMS/cypress-test-utils-examples/blob/c0f0869117f78bfb5f12a7fa72f91a6cf2b97850/examples/lit/pokemon-catalog/cypress.config.ts#L19

[shrinidhimayya]

@ShellyDCMS , Thanks for sharing example. I am still getting error when I run component tests : "Could not find any coverage information in your application by looking at the window coverage object. Did you forget to instrument your application?"

These are my set up :
cypress : 13.10.0 , webpack : 5.91.0 , webpack-plugin-istanbul : 1.0.3 , @cypress/code-coverage: 3.12.39

package.json:

"nyc": {
"all": true,
"include": "src/**/*.svelte"
}

cypress.config.js

module.exports = defineConfig({
component: {
devServer: {
framework: "svelte",
bundler: "webpack",
},
specPattern: "src/**/*.test.{js,jsx,ts,tsx}",
setupNodeEvents(on, config) {
console.log("setupNodeEvents for components");
require("@cypress/code-coverage/task")(on, config);
return config;
},
},
});

webpack.config.js

const { WebpackPluginIstanbul } = require("webpack-plugin-istanbul");

module.exports = {
resolve: {
// see below for an explanation
mainFields: ["svelte", "browser", "module", "main"],
conditionNames: ["svelte", "browser", "import"],
},
module: {
rules: [
{
test: /.(svelte)$/,
exclude: /node_modules/,
use: "svelte-loader",
},
],
},
plugins: [
new WebpackPluginIstanbul({
include: ["src/**/*.svelte"],
extension: [".svelte"],
cwd: process.cwd()
})
],
devtool: "cheap-module-eval-source-map",
};

cypress/support/component.js

import '@cypress/code-coverage/support';

I think this file cypress/plugins/index.js is not required with latest version of cypress.

Also not able to see window.coverage object. Let me know how to instrument these. Let me know if I am missing something here. Thanks in advance.

[ShellyDCMS]

@shrinidhimayya
could you please try with plugin file, just to see if it makes a difference?

[shrinidhimayya]

@shrinidhimayya could you please try with plugin file, just to see if it makes a difference?

@ShellyDCMS
it is expecting to have code coverage tasks inside cypress.config.js inside setupNodeEvents function. when this entry is added to only to cypress/plugins/index.js not inside setupnodeevents function then getting below error : "Code coverage tasks were not registered by the plugins file."
module.exports = (on, config) => {
require("@cypress/code-coverage/task")(on, config);
on(
"file:preprocessor",
require("@cypress/code-coverage/use-browserify-istanbul")
);
return config;
};

it is the issue with instrumentation , not seeing any proper documentation to instrument code for component tests

[ShellyDCMS]

@shrinidhimayya
Please note that in the working example link I sent, it is done in the plugin.ts AND in the cypress.config file.
Could you try the same?

[shrinidhimayya]

@shrinidhimayya Please note that in the working example link I sent, it is done in the plugin.ts AND in the cypress.config file. Could you try the same?

its the same , I am still getting this error : "Could not find any coverage information in your application by looking at the window coverage object. Did you forget to instrument your application?"