Invalid coverage with babel

[freongrr]

When using istanbul with babel-register, the HTML reports often highlight the wrong statements.

Expected Behavior

On a simple code (a binary expression), the uncovered branch only should be yellow:

Observed Behavior

When using babel-register only, the yellow part extends all the way to the end of the file:

Repository that Reproduces Issue

I hit that bug on a React project, but it also reproduces with a very simple code without JSX:
https://github.com/freongrr/istanbul-coverage-bug

To reproduce:

git clone https://github.com/freongrr/istanbul-coverage-bug
cd istanbul-coverage-bug
npm install

# Test using Istanbul and babel:
npm run test
# open coverage/index.js.html

# Run the same test without babel:
npm start test2
# open coverage/index.js.html

Forensic Information

This looks like the same issue was reported before: gotwarlost/istanbul#737

Looking at the generated HTML file, I can see it inserts </span> tag at the wrong place:

    r</span>eturn error.message || <span class="branch-1 cbranch-no" title="branch not covered" >error.toString();

I tracked that to the call to text.wrap(...) in annotateBranches(). But I'm not sure it's a bug in the generator because the coverage-final.json file also contains invalid offsets:

"type": "binary-expr",
"locations": [{
    "start": {
      "line": 4,
      "column": 11
    },
    "end": {
      "line": 4,
      "column": 10
    }
  }, {
    "start": {
      "line": 4,
      "column": 28
    },
    "end": {
      "line": 4,
      "column": 4
    }
  }
]

Operating System: macOS, Ubuntu
Environment Information: https://gist.github.com/freongrr/75920fa8c132143c70a2763947571199

[bcoe]

@freongrr there's been a long-standing issue with the application of source-maps -- I'm not 100% if it originates in IstanbulJS or upstream in babel itself; It might be worth opening a tracking issue here: https://github.com/istanbuljs/istanbul-lib-source-maps/issues ...

Having said this, I recommend trying babel-plugin-istanbul this plugin works directly with the babel transpiler, and creates more accurate coverage reports.

Here's a tutorial on the subject.