Code coverage in Cypress

Help Requests
1

Though not in the latest vCurrent code, we’ve managed to add cypress testing to our Aurelia project.
Next step we want to achieve is adding code coverage. For now it doesnt matter if the solution is a bare unit test or an e2e test with code coverage.

I’ve followed the instructions of https://github.com/cypress-io/code-coverage, but that was without success.
1 ) I think the instrument step is missing in the total process, but no clue yet on how to do that;

and 2 ) although the code-coverage/task was added to the plugin, there is no “AFTER-EACH” task for codeCoverage.

Some extra information: running webpack with the options as described in @bahmutov 's add-typescript-to-cypress solution.

Any clue or additional information I might have missed would be really appreciated.

2

Luckily I am able to answer my own question. :slight_smile:

In Webpack options, I’ve added the istanbul-instrumenter-loader. Had to tweak some options because of the es-version we are using, but now it works!

The included file in plugins is now as follows:

const preprocessor = require("@cypress/webpack-preprocessor");

const webpackOptions = {
    resolve: {
        extensions: [".ts", ".js"]
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                exclude: [/node_modules/],
                use: [
                    {
                        loader: "istanbul-instrumenter-loader",
                        options: {esModules: true}
                    },
                    {
                        loader: "ts-loader",
                        options: {
                            compilerOptions: {
                                "target": "es5",
                                "module": "esnext"
                            }
                        }
                    },
                ]
            },
        ]
    }
};

const options = {
    webpackOptions
};

module.exports = preprocessor(options);
3 Likes
3

Hi @mroeling,

thanks for sharing. The setup with coverage might be interesting for the new documentation.
If i may ask, have you been able to test Drag & Drop with Cypress?

Best

1 Like
4

Unfortunately not yet. Have you seen this plugin? https://github.com/4teamwork/cypress-drag-drop

1 Like
5

Yes, but it did not work for the stuff at my workplace.
Probably will try at home with a toy example, if i find the time. :slight_smile:

2 Likes
6

Thank you so much for this, it took me three days to come at this article. Your answer is a life saver, but I don`t know somehow coverage report is showing report of stubs and utilities not the actual code, why would this be.

2 Likes
7

It turns out that setting cypress code coverage for an angular application is so much painful, I am able to get my code coverage without using the mroeling solution even after my app uses es5. Its just you have to setup the cypress like bahmutov`s angular example, no extra config is required.

2 Likes