CODEWITHSUNDEEP
testingvisual-studio-codevscode-extensionstest-coverage
Valentin Vignal
Valentin Vignal

Reputation: 8202

How to generate a coverage report with vscode extension tests

I'm implementing a VSCode extension. I set up the project following this link.

It generates a starter project with a src/test/runTest.ts file:

import * as path from 'path';

import { runTests } from '@vscode/test-electron';

async function main() {
    try {
        // The folder containing the Extension Manifest package.json
        // Passed to `--extensionDevelopmentPath`
        const extensionDevelopmentPath = path.resolve(__dirname, '../../');

        // The path to test runner
        // Passed to --extensionTestsPath
        const extensionTestsPath = path.resolve(__dirname, './suite/index');

        // Download VS Code, unzip it and run the integration test
        await runTests({ extensionDevelopmentPath, extensionTestsPath });
    } catch (err) {
        console.error('Failed to run tests');
        process.exit(1);
    }
}

main();

And a command in the package.json:

{
    "compile": "tsc -p ./",
    "pretest": "npm run compile && npm run lint",
    "lint": "eslint src --ext ts",
    "test": "node ./out/test/runTest.js"
}

Is there a way to generate a coverage report with it?

Upvotes: 5

Views: 6564

Answers (2)

alea
alea

Reputation: 1071

If you are using vscode-test-cli, which is now the default when creating a new extension via yo code, it is very easy.

Install the dependency of @vscode/test-cli, if not already in the project.

npm install --save-dev @vscode/test-cli

Then you can generate the coverage with the following command.

vscode-test --coverage

Note: Your version should be at least 0.0.6.

You can also set the output directory of the coverage with --coverage-output (default: temp dir of OS) and --coverage-reporter (any mocha reporters possible).

That means if you want to generate the coverage in your coverage directory with text and html reporter, you can use the following.

vscode-test --coverage --coverage-output ./coverage --coverage-reporter html --coverage-reporter text"

old solution with @vscode/test-cli version 0.0.4

  1. Install c8
npm install --save-dev c8
  1. Add a coverage script to your package.json:
"coverage": "c8 npm run test"
  1. Run the coverage via npm run coverage.

In my case, additional configuration was not needed.

Upvotes: 1

gnikit
gnikit

Reputation: 1291

VSCode extension unittesting uses Mocha under the hood. You can generate coverage reports like in any other Typescript/Javascript project using one of the many available frameworks, e.g. c8, jest, istanbul, etc.

Install the framework of your choice, here I use c8

npm i --save-dev c8

and add to scripts

  "scripts": {
    "compile": "tsc -p ./",
    "pretest": "npm run compile && npm run lint",
    "lint": "eslint src --ext ts",
    "test": "node ./out/test/runTest.js",
    "coverage": "c8 --check-coverage npm run test"
  }

Depending on your extension you might need to create a configuration file with the files you want to check for coverage. Here we are checking the compiled .js files placed under the out/ dir and we also excluding the files responsible for unittesting i.e. out/test/ (usually).

.c8rc

{
  "all": true,
  "include": ["out/**"],
  "exclude": ["**/node_modules/**", "out/test/"],
  "reporter": ["html", "text"]
}

Run the coverage script and you should get an output of your coverage

npm run coverage

enter image description here

A working repo making use of the above: https://github.com/fortran-lang/vscode-fortran-support

Upvotes: 6

Related Questions