Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support for code coverage instrumentation in the app code

See original GitHub issue

Just like you can say npm test -- --coverage I think it would be useful to be able to say npm start -- --coverage or npm run build -- --coverage to instrument the app code for code coverage. You could then get code coverage information from end-to-end tests (which IMO are the most useful kind of tests). Here’a simple step-by-step demo to show what I mean:

  1. create-react-app coverage-demo
  2. cd coverage-demo
  3. npm install --save-dev chromedriver istanbul-lib-coverage selenium-webdriver
  4. To src/App.test.js, add
import { Builder } from "selenium-webdriver";
import libCoverage from "istanbul-lib-coverage";

it("report code coverage after end-to-end testing", async () => {
  // Go to site
  const builder = new Builder();
  const driver = builder.forBrowser("chrome").build();
  await driver.get("localhost:3000");

  // A real test would do more here of course

  // Collect coverage data and report it
  const __coverage__ = await driver.executeScript("return __coverage__;");
  const map = libCoverage.createCoverageMap(__coverage__);
  let result = "";
  map.files().forEach(function(f) {
    var fc = map.fileCoverageFor(f);
    result += `${fc.computeSimpleTotals("s").pct + "%"} for ${f}\n`

  await driver.quit();
  1. To const plugins in node_modules/babel-preset-react-app/index.js, add the following item last to the array
// TODO: Enable only when '--coverage' is passed to 'npm start/build'
  1. npm start
  2. npm test # in another terminal

Expected output:

100% for /home/martinno/src/coverage-demo/src/App.js
100% for /home/martinno/src/coverage-demo/src/index.js
6.9% for /home/martinno/src/coverage-demo/src/registerServiceWorker.js

The coverage data can of course be processed in more useful ways. In my own app I write the json data to files and then use istanbul report --root coverage-data html to get a nice HTML presentation of coverage data.

Would you be open to a contribution that did step 5 properly?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:6
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

dannolancommented, Mar 28, 2018

(I would love this)

JaDoggcommented, Nov 27, 2018

I’ve asked a question relating to this on stack-overflow.


Read more comments on GitHub >

github_iconTop Results From Across the Web

Code Coverage - Cypress Documentation
Code coverage requires inserting additional counters into your source code before running it. This step is called instrumentation. Instrumentation takes code ...
Read more >
Top 15 Code Coverage Tools (For Java, JavaScript, C++, C# ...
List of the most popular code coverage tools for Java, JavaScript, C, C++, C#, PHP, Eclipse, .Net and many other programming languages:.
Read more >
Code Coverage vs Test Coverage: A Detailed Guide
Code coverage verifies with instrumentation. Instrumentation monitors performance inserts trace information, and detects errors in the source ...
Read more >
9 Best Code Coverage Tools for Java, Python, C, C++, C#, .NET
3) JaCoCo · JaCoCo offers instructions, line and branch coverage · It is one of the best java code coverage tools which supports...
Read more >
The Best Code Coverage Tools By Programming Language
The overall value of code coverage in your app will be expressed as a percentage. Best practice is to establish what percentage of...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found