I've been working on adding code coverage in this repo based off react-redux todomvc: https://github.com/thetallweeks/react-redux-es6-istanbul-starter-kit/tree/inaccurate-code-coverage

I set up gulp-jsx-coverage, but I'm seeing 100% coverage for all jsx files, even though the tests are currently disabled.

I've set up coverage in 2 ways:

"coverage": "babel-node ./node_modules/.bin/isparta cover _mocha",
"coverage-jsx": "gulp coverage"

Using babel-node ignores jsx files but gets more accurate coverage for non-jsx files:

babel-node

gulp-jsx-coverage

Any help would be greatly appreciated.

Relevant files:

• gulpfile.js
• package.json
• .babelrc
• Footer.spec.js

Hi, how to connect Phantom js?

/* istanbul ignore next: untestable */

Adding the above ignore hint at the begging of a file doesn't seem to ignore coverage for a specific file (https://github.com/gotwarlost/istanbul/blob/master/ignoring-code-for-coverage.md). The only thing that seems to work using this gulp-jsx-coverage is the exclude option of istanbul as shown below. Has anyone seen this behavior ?

istanbul: {
      coverageVariable: "__MY_TEST_COVERAGE__",
      exclude: /node_modules|spec|yourfile|yourdirectory/
    }

We have seen this recently, one our devs missed adding a test for a new component but its not caught in the coverage report. Ideally this should have been caught and reported (if the coverage is below threshold). Adding a test and importing the new component covers it but is there a way to automatically cover all the sources (except excluded files/directories)?

As the title says. Would it be doable at all or are there technical issues that prevent it?

I am getting unkown summary for any Mocha test script. I am not getting any report as well

=============================== Coverage summary ===============================
Statements : Unknown% ( 0/0 )
Branches : Unknown% ( 0/0 )
Functions : Unknown% ( 0/0 )
Lines : Unknown% ( 0/0 )

Caused by Istanbul.

This error appeared in the transpiled code. Guys, are you using babel or something? Try to use fixed version from branch.

npm install --save-dev gotwarlost/istanbul#source-map

gotwarlost/istanbul#429

Hi,

I am using this NPM module to get the code coverage for my react component and it works great. But my code coverage seems to be really down because of all the transplied code. I read about isparta which will help in improving code is this something you can add it as part of this module itself?

Thanks
Om

When tests are failing, the stack trace refers to the transpiled code, not the original source code, making it difficult to debug.

I'm looking into fixing this somehow with https://github.com/evanw/node-source-map-support

Has anyone seen the difference in coverage running on Linux vs Mac? @zordius Can you think of any specific settings we can apply to have a consistent experience as tests fail on continuous integration often due to this reason?

Running on a Linux box:

Statements   : 90.37% ( 3762/4163 )
Branches     : 82.48% ( 1257/1524 )
Functions    : 87.61% ( 863/985 )
Lines        : **92.99**% ( 3597/3868 )

Running on a mac box:

Statements   : 90.72% ( 3921/4322 )
Branches     : 82.48% ( 1257/1524 )
Functions    : 87.61% ( 863/985 )
Lines        : **93.27**% ( 3756/4027 )

This is more of a question. I'm confident that I just can't find the right config options for this.

I want to be able to import files like: import SomeReactComponent from '../../SomeReactComponent'

without requiring the .jsx extension. E.g. '../../SomeReactComponent.jsx'

Right now, this is my gulp-jsx-coverage config:

{
    src: [
      'test/**/*+(.js|.jsx)',
      'src/**/*.js',
      'src/**/components/*.jsx'
    ],
    isparta: false,
    istanbul: {
      preserveComments: false,
      coverageVariable: '__MY_TEST_COVERAGE__',
      exclude: /node_modules|test/
    },

    transpile: {
      babel: {
        include: /\.jsx?$/,
        exclude: /node_modules/,
        omitExt: false
      }
    },

    coverage: {
      reporters: ['text-summary', 'json', 'lcov'],
      directory: 'coverage'
    },

    mocha: {
      reporter: 'spec'
    },

    babel: {
      plugins: ['transform-runtime']
    },

    //optional
    cleanup: function () {
      // do extra tasks after test done
      // EX: clean global.window when test with jsdom
    }
  }

I've done some research but haven't found what to add and where. Do you have an idea of what config option I need to add for this?

Istabul appears to include untested files in the test coverage percentage, but gulp-jsx-coverage doesn't appear to. Is there a way to set an includeUntested flag in the config?

Is it possible to add a feature to split tests and run them in parallel (by passing a config param or have a reducer to slice the sources into buckets of parallel tests) and collect coverage metrics at the end?

It would be nice to support multiple thresholds and fail tests if any of the fail first.
threshold: [
{
type: 'functions',
min: 90
} ,
{
type: 'lines',
min: 95
}
]

I have a React app in which I am using ES6 features and leveraging the babel transpile feature of gulp-jsx-coverage. Unfortunately, the generated coverage report includes the generated ES5 code, which, of course, is not fully tested. This has managed to tank my coverage numbers. It would be better to calculate coverage numbers based on the pre-babel code.

I have the following gulp task for tests:

var jsxCoverage = require('gulp-jsx-coverage');
gulp.task('test', ['lint', 'env:test'], jsxCoverage.createTask({
    src: ['src/**/*_test.js', 'src/**/*_test.jsx'],
    istanbul: {
        coverageVariable: '__MY_TEST_COVERAGE__',
        exclude: /node_modules|tests|._test/
    },
    transpile: {
        babel: {
            include: /\.jsx?$/,
            exclude: /node_modules/
        }
    },
    coverage: {
        reporters: ['text', 'lcov', 'cobertura'],
        directory: 'coverage'
    },
    mocha: {
        reporter: 'spec'
    },
    babel: {
        sourceMap: 'inline'
    }
}));

I also have the following in one of my components:

let [markIn, markOut] = [this.state.markIn, this.state.markOut]
            .map(v => isNaN(v) ? '--:--:--:--' : timeCode.toTimeCode(v).toString());

Despite my best efforts to test for full coverage, the type-safety checks in the generated code tank the overall coverage for the file. See below including the large bit of untested, generated code on the first line.

Is there a way to be able to pass down the --include-all-sources flag to istanbul currently with this? Tried a few things and doesn't seem to be recognizing it. Thanks.

I am running tests (es6) with the following configuration and any tests failures point to line#9. I am using the 0.3.0 version. Any help appreciated!

{
src: sources,
istanbul: {
coverageVariable: "MY_TEST_COVERAGE",
exclude: /node_modules|specs/
},

threshold: 89.9, // fail the task when coverage lower than this

transpile: {
  babel: {
    include: /\.jsx?$/,
    exclude: /node_modules/
  }
},
coverage: {
  reporters: ["text-summary", "json", "lcov"],
  directory: "coverage"
},
mocha: {
  reporter: 'spec'
},
babel: {
  sourceMap: "both"
}

}

After #1 merged, I need to do some refine:

• add more target to demo jsx coverage
• add more target to demo ES6 js coverage
• add auto publish to git pages to demo coverage HTML reports

Here's my app.cjsx component:

Router        = ReactRouter.Router
Notifications = require './common/notifications'

App = React.createClass(
  displayName: 'App'
  render: ->
    <div>
      <Notifications />
      {@props.children}
    </div>
)

module.exports = App

When I run the gulp task, it fails with this output:

$ gulp js_coverage                                               !20102
[17:45:20] Requiring external module coffee-script/register
[17:45:22] Using gulpfile ~/projects/dashboard/gulpfile.coffee
[17:45:22] Starting 'js_coverage'...
[17:45:22] 'js_coverage' errored after 809 ms
[17:45:22] Error in plugin 'gulp-mocha'
Message:
    Cannot find module './common/notifications'
Details:
    code: MODULE_NOT_FOUND
Stack:
Error: Cannot find module './common/notifications'
  at Function.Module._resolveFilename (module.js:336:15)
  at Function.Module._load (module.js:286:25)
  at Module.require (module.js:365:17)
  at require (module.js:384:17)
  at Object.<anonymous> (/Users/nickcox/projects/dashboard/app/assets/javascripts/components/app.cjsx:3:29)
  at Object.<anonymous> (/Users/nickcox/projects/dashboard/app/assets/javascripts/components/app.cjsx:3:29)
  at Module._compile (module.js:434:26)
  at Object.moduleLoader [as .js] (/Users/nickcox/projects/dashboard/node_modules/gulp-jsx-coverage/index.js:160:16)
  at Module.load (/Users/nickcox/projects/dashboard/node_modules/coffee-script/lib/coffee-script/register.js:45:36)
  at Function.Module._load (module.js:310:12)
  at Module.require (module.js:365:17)
  at require (module.js:384:17)
  at /Users/nickcox/projects/dashboard/node_modules/mocha/lib/mocha.js:216:27
  at Array.forEach (native)
  at Mocha.loadFiles (/Users/nickcox/projects/dashboard/node_modules/mocha/lib/mocha.js:213:14)
  at Mocha.run (/Users/nickcox/projects/dashboard/node_modules/mocha/lib/mocha.js:453:10)
  at Domain.<anonymous> (/Users/nickcox/projects/dashboard/node_modules/gulp-jsx-coverage/node_modules/gulp-mocha/index.js:56:20)
  at Domain.run (domain.js:191:14)
  at Stream.<anonymous> (/Users/nickcox/projects/dashboard/node_modules/gulp-jsx-coverage/node_modules/gulp-mocha/index.js:54:5)
  at _end (/Users/nickcox/projects/dashboard/node_modules/gulp-jsx-coverage/node_modules/gulp-mocha/node_modules/through/index.js:65:9)
  at Stream.stream.end (/Users/nickcox/projects/dashboard/node_modules/gulp-jsx-coverage/node_modules/gulp-mocha/node_modules/through/index.js:74:5)
  at DestroyableTransform.onend (/Users/nickcox/projects/dashboard/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:523:10)
  at DestroyableTransform.g (events.js:260:16)
  at emitNone (events.js:72:20)
  at DestroyableTransform.emit (events.js:166:7)
  at /Users/nickcox/projects/dashboard/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:965:16
  at doNTCallback0 (node.js:407:9)
  at process._tickDomainCallback (node.js:377:13)

Looks like the moduleLoader function in index.js isn't finding it. For reference, here is my gulp task:

#--------------------------------------------------------
# Requirements
#--------------------------------------------------------

gulp      = require 'gulp'
plugins   = require('gulp-load-plugins')()

#--------------------------------------------------------
# Coverage
#--------------------------------------------------------

gulp.task("js_coverage", require('gulp-jsx-coverage').createTask(
  src: [
    'app/assets/javascripts/components/**/*.cjsx',
    'app/assets/javascripts/actions/*.coffee',
    'app/assets/javascripts/stores/*.coffee',
    'app/assets/javascripts/training/compontents/*.cjsx',
    'app/assets/javascripts/training/stores/*.cjsx',
    'app/assets/javascripts/training/actions/*.cjsx',
  ]
  isparta: false
  istanbul:
    preserveComments: true
    coverageVariable: '__MY_TEST_COVERAGE__',
    exclude: /node_modules|test[0-9]/
  transpile:
    cjsx: /\.csjx$/,
    omitExt: ['.cjsx']
  coverage:
    reporters: ['text-summary', 'json', 'lcov']
    directory: 'coverage'
  mocha:
    reporter: 'spec'
  coffee:
    sourceMap: true
))

I get the error regardless of what I have under in the transpile hash. I also get this error for any other modules that are required relatively.

I am trying to figure out how to pass in a threshold setting to Istanbul to enforce 100% coverage.

Firstly thanks for continuous support!

If you take a look at this example https://github.com/cliren/react-jsx-coverage-example and inspect coverage, for coverage/lcov-report/src/react-components/UserProfileLink.jsx.html, you will the see below lines. The actual code (lines, branches and statements) are 100% covered but looks like the tool is taking the transformed code into consideration and lowering the branch and statement coverage. Is there a way to ignore it and have the coverage reflect the actuals?

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { Iif (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { Iif (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { Iif (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); Eif (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

Would it be possible to add .cjsx support? My team is using cjsx for our main project, but we haven't yet figured out a way to get coverage for the .cjsx files.

I noticed while bumping versions that my existing tests that are using proxyquire start failing on 0.2.x. On 0.1.3 all seem to go through fine and dandy.

Note that these are not actually testing jsx/coffee files, am I using this plugin incorrectly?

Example: https://github.com/Xantier/nerd-stack/blob/master/spec/services/serverMediator.spec.js

hi I was not able to use your module until I added mocha into my dependencies
please move mocha from devDependencies into the dependencies

in my app we import scss as part of our webpack build.
Is there a way to tell the babel transpiler to ignore any imports of scss/jpg/png etc. when it's parsing?

In mocha i use a null-loader for all non javascript transpiling.