How to cover JSX / React components?

[screendriver]

isparta only covers *.js files. How can I enable coverage for *.jsx files? I already added the .jsx extension to my .istanbul.yml but unfortunately it's not working.

package.json

  "scripts": {
    "prepublish": "gulp",
    "test": "mocha --colors --compilers js:babel/register --require test/setup.js test/*.js*",
    "posttest": "babel-node node_modules/.bin/isparta cover node_modules/.bin/_mocha"
  },

.istanbul.yml

instrumentation:
  root: src
  extensions:
    - .js
    - .jsx

[justindalton]

+1

[larpo]

+1

[yhsiang]

I sent a PR #61 for this.

[yhsiang]

Now only workaround is change all your jsx files to js.

[douglasduteil]

Closes with #61

[larpo]

I tried with above mentioned istanbul config with 3.0.4, but I still cannot get .jsx to show up in test coverage report. Are there additional steps that need to be taken to get this to work?

[screendriver]

Same here like @larpo . My .istanbul.yml

instrumentation:
  root: src
extensions:
  - .js
  - .jsx
reporting:
  reports:
    - text
    - html

[yhsiang]

setup a .istanbul.yml
like

instrumentation:
  root: src
extensions: ['.js', '.jsx']

and add in your isparta config

babel-node ./node_modules/.bin/isparta --include "**/*.js" --include "**/*.jsx" cover _mocha --

First for istanbul, second for isparta, they are different.

[screendriver]

Unfortunately it does not work. If I make a

$ babel-node ./node_modules/.bin/isparta --include "**/*.js" --include "**/*.jsx" cover _mocha -- src/**

nothing happens. No reporting at all. As well the istanbul documentation istanbul help cover does not mention a --include argument. It has to be -i but if I make a

$ babel-node ./node_modules/.bin/isparta -i "**/*.js" -i "**/*.jsx" cover _mocha -- src/**

I get a syntax error:

/Users/screendriver/.nvm/versions/io.js/v2.5.0/lib/node_modules/babel/node_modules/babel-core/lib/transformation/file/index.js:670
      throw err;
            ^
SyntaxError: /Users/screendriver/Development/my_project/node_modules/isparta/node_modules/which/which.js: Invalid number (19:21)
  17 | } else {
  18 |   isExe = function isExe (mod, uid, gid) {
> 19 |     var ret = (mod & 0001)
     |                      ^
  20 |         || (mod & 0010) && process.getgid && gid === process.getgid()
  21 |         || (mod & 0100) && process.getuid && uid === process.getuid()
  22 |         || (mod & 0110) && process.getuid && 0   === process.getuid()
    at Parser.pp.raise (/Users/screendriver/.nvm/versions/io.js/v2.5.0/lib/node_modules/babel/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)
    at Parser.readNumber (/Users/screendriver/.nvm/versions/io.js/v2.5.0/lib/node_modules/babel/node_modules/babel-core/node_modules/babylon/lib/tokenizer/index.js:666:12)
    at Parser.getTokenFromCode (/Users/screendriver/.nvm/versions/io.js/v2.5.0/lib/node_modules/babel/node_modules/babel-core/node_modules/babylon/lib/tokenizer/index.js:474:21)
    at Parser.readToken (/Users/screendriver/.nvm/versions/io.js/v2.5.0/lib/node_modules/babel/node_modules/babel-core/node_modules/babylon/lib/tokenizer/index.js:160:17)
    at Parser.<anonymous> (/Users/screendriver/.nvm/versions/io.js/v2.5.0/lib/node_modules/babel/node_modules/babel-core/node_modules/babylon/lib/plugins/jsx/index.js:445:20)
    at Parser.readToken (/Users/screendriver/.nvm/versions/io.js/v2.5.0/lib/node_modules/babel/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:736:22)
    at Parser.nextToken (/Users/screendriver/.nvm/versions/io.js/v2.5.0/lib/node_modules/babel/node_modules/babel-core/node_modules/babylon/lib/tokenizer/index.js:151:19)
    at Parser.next (/Users/screendriver/.nvm/versions/io.js/v2.5.0/lib/node_modules/babel/node_modules/babel-core/node_modules/babylon/lib/tokenizer/index.js:88:10)
    at Parser.pp.parseExprOp (/Users/screendriver/.nvm/versions/io.js/v2.5.0/lib/node_modules/babel/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:185:12)
    at Parser.pp.parseExprOps (/Users/screendriver/.nvm/versions/io.js/v2.5.0/lib/node_modules/babel/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:167:17)

[yhsiang]

--include is used by isparta not istanbul,

if there is a config file .istanbul.yml, then you can avoid to use src/**.

try
$ babel-node ./node_modules/.bin/isparta --include "**/*.js" --include "**/*.jsx" cover ./node_modules/.bin/_mocha -- ?

[larpo]

Ok, I finally got it to work. The trick was to move the --include args to after the cover part like this:

babel-node `npm bin`/isparta cover --include '**/*.js' --include '**/*.jsx' _mocha -- 

and make sure the 'extensions' in .istanbul.yml was correctly aligned inside instrument:

instrumentation:
  root: src
  extensions:
    - .jsx
    - .js

[mrwithersea]

For anyone this might help this works for us
istanbul cover ./node_modules/.bin/_mocha -- 'test/unit/**/*.js' --require babel-core/register --require test/support/global

And in our .istanbul.yml file:

instrumentation:
  root: src
  extensions:
    - .jsx
    - .js

[jfairley]

I'm using the command pattern suggested by @larpo. What I'm seeing is that the lcov-report/index.html and lcov.info mention my JSX files and the lines and reported coverage look correct. However, coverage.json says nothing about my JSX files. (This is an issue for my online coverage service.) Any ideas??

Here is my command:

  "scripts": {
    "pretest": "rm -rf coverage",
    "test": "BABEL_ENV=test babel-node node_modules/isparta/bin/isparta cover --include '**/*.js*' _mocha"
  },

and .istanbul.yml

instrumentation:
  root: src
  excludes: ['*_test.js*']
  extensions:
    - .js
    - .jsx

and test/mocha.opts

--compilers js:babel-core/register
--require test/init.js

src/**/*_test.js*

[merriam]

For those arriving in desperation from Google (this is first hit), the magic word is 'babel-istanbul'. You can see http://stackoverflow.com/a/33725069/1320510 for a correct write-up as of April, 2017.