Gulp Task for React.js Code Coverage using gulp-istanbul

Question

I am using React.js for a project.

I am using Mocha and chai as testing frameworks.

Now, I would like to to use gulp-istanbul for the code coverage part.

The server side part is working absolutely fine, but when it comes to client side, I am using the below code:

var istanbul = require('gulp-istanbul');
var mocha = require('gulp-mocha');
var isparta = require('isparta');
gulp.task('pre-test', function () {
    return gulp.src(['lib/**/*.js'])//all jsx files and ES6 files
    .pipe(istanbul(
        instrumentar: isparta.instrumentar//isparta is no use full. not sure why
    ))
    .pipe(istanbul.hookRequire());
});

gulp.task('test', ['pre-test'], function () {
    return gulp.src(['test/*.js'])
    .pipe(mocha())
    .pipe(istanbul.writeReports())
    .pipe(istanbul.enforceThresholds({ thresholds: { global: 90 } }));
});

But I am not getting the job done with the above code.

It seems like I am failing to transpile the ES6 or ReactJS code in the gulp tasks.

It can be done through other modules like gulp-jsx-coverage, but I do want to follow this approach.

Any input on how I can accomplish this task?