Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zordius/gulp-jsx-coverage
deprecated
https://github.com/zordius/gulp-jsx-coverage
babel coverage-report es2015 gulp istanbul mocha-tests react
Last synced: 14 days ago
JSON representation
deprecated
- Host: GitHub
- URL: https://github.com/zordius/gulp-jsx-coverage
- Owner: zordius
- License: other
- Created: 2014-12-30T07:33:21.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2017-07-19T08:15:42.000Z (over 7 years ago)
- Last Synced: 2024-09-25T22:22:33.070Z (about 1 month ago)
- Topics: babel, coverage-report, es2015, gulp, istanbul, mocha-tests, react
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/gulp-jsx-coverage
- Size: 868 KB
- Stars: 34
- Watchers: 4
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: HISTORY.md
- License: LICENSE.txt
Awesome Lists containing this project
README
gulp-jsx-coverage
=================
Enable istanbul coverage on ES2015/babel files when you do mocha/jasmine tests, also deal with sourceMap for stack trace....as gulp task.
[](https://www.npmjs.org/package/gulp-jsx-coverage) [](https://www.npmjs.org/package/gulp-jsx-coverage) [](https://david-dm.org/zordius/gulp-jsx-coverage) [](https://travis-ci.org/zordius/gulp-jsx-coverage) [](LICENSE.txt)
**deprecated** Suggest to use jest to test, or use new istanbul/nyc directly.
Features
========
* Help you create a gulp task to handle mocha testing + istanbul coverage
* Transpile .jsx and ES2015 .js files on the fly
* Use babel to transpile .js and .jsx files so you can use ES2015 features inside your .js and .jsx files!
* Customize everything by options
* sourceMaps on stack traces when mocha test failed (powered by source-map-support)
* coverage threshold
---
**ORIGINAL CODE/LINE in coverage reports**
**ORIGINAL CODE/LINE in stack traces**
Usage
=====
1. Install
----------
For Mocha tests:
```
npm install gulp gulp-jsx-coverage gulp-mocha babel-plugin-istanbul --save-dev
```
For Jasmine tests:
```
npm install gulp gulp-jsx-coverage gulp-jasmine babel-plugin-istanbul --save-dev
```
2. Configure Babel
------------------
Configure your .babelrc and install proper presets or plugins.
Here is a .babelrc example:
```
{
presets: ['es2015', 'react']
}
```
And then:
```
npm install babel-preset-es2015 babel-preset-react
```
3. Create Gulp Task
-------------------
Put this into your gulpfile.js:
```javascript
gulp.task('your_task_name', require('gulp-jsx-coverage').createTask({
src: ['test/**/*.js', 'test/components/*.jsx'], // your test files
}));
```
Then run the task: `gulp your_task_name`
Best Practices
==============
* The golden rule: **Use .jsx as ext name** when jsx syntax inside it. Require it by `require('file.jsx')`.
* When you develop a module, do not use any module loader hooks. (Refer to Babel require hook document)
* Excludes babel as possible as you can to improve babel performance.
* When you develop an application, you may use module loader hooks. But, don't enable the hook when you do testing.
Usage: General Mocha Test Creator
=================================
```javascript
gulp.task('your_task_name', require('gulp-jsx-coverage').createTask({
src: ['test/**/*.js', 'test/components/*.jsx'], // will pass to gulp.src as mocha tests
istanbul: { // will pass to istanbul, this is default setting
exclude: /node_modules/ // do not instrument these files
},
threshold: [ // fail the task when coverage lower than one of this array
{
type: 'lines', // one of 'lines', 'statements', 'functions', 'banches'
min: 90
}
],
babel: { // this is default setting
include: /\.jsx?$/,
exclude: /node_modules/,
omitExt: false // if you wanna omit file ext when require(), put an array
}, // of file exts here. Ex: ['.jsx', '.es6'] (NOT RECOMMENDED)
coverage: {
reporters: ['text-summary', 'json', 'lcov'], // list of istanbul reporters
directory: 'coverage' // will pass to istanbul reporters
},
mocha: { // will pass to mocha
reporter: 'spec'
},
//optional
cleanup: function () {
// do extra tasks after test done
// EX: clean global.window when test with jsdom
}
}));
```
Usage: Other Testing Frameworks
===============================
```javascript
var GJC = require('gulp-jsx-coverage');
var jasmine = require('gulp-jasmine');
gulp.task('my_jasmine_tests', function () {
GJC.initModuleLoader(GJCoptions); // Refer to previous gulp-jsx-coverage options
return gulp.src('test/*.js')
.pipe(jasmine(jasmineOptions))
.on('end', GJC.collectIstanbulCoverage(GJCoptions)); // Refer to previous gulp-jsx-coverage options
});
```
Live Example: mocha
===================
```sh
git clone https://github.com/zordius/gulp-jsx-coverage.git
cd gulp-jsx-coverage
npm install
npm run mocha
```
**OUTPUT**:
```
~/gulp-jsx-coverage master>npm run mocha
> [email protected] mocha /Users/zordius/gulp-jsx-coverage
> gulp mocha_tests
[11:50:14] Using gulpfile ~/gulp-jsx-coverage/gulpfile.js
[11:50:14] Starting 'mocha_tests'...
target (tested by test1.js)
✓ should multiply correctly
- should not show coverage info for test1.js
✓ should handle es2015 template string correctly
target (tested by test2.jsx)
✓ should multiply correctly (77ms)
- should not show coverage info for test2.jsx
1) should exception and failed
Component.jsx (tested by test2.jsx)
✓ should render Hello World
4 passing (104ms)
2 pending
1 failing
1) target (tested by test2.jsx) should exception and failed:
TypeError: "hohoho
this is
multi line
error!".notAFunction is not a function
at Context. (test2.jsx:34:10)
[11:50:16] 'mocha_tests' errored after 1.86 s
[11:50:16] Error in plugin 'gulp-mocha'
Message:
1 test failed.
---------------|----------|----------|----------|----------|----------------|
File | % Stmts | % Branch | % Funcs | % Lines |Uncovered Lines |
---------------|----------|----------|----------|----------|----------------|
All files | 90.48 | 100 | 75 | 90.48 | |
Component.jsx | 75 | 100 | 50 | 75 | 5 |
target.js | 80 | 100 | 66.67 | 80 | 8 |
testlib.js | 100 | 100 | 100 | 100 | |
---------------|----------|----------|----------|----------|----------------|
```
* Check gulpfile.js for the sample input.
* Check .babelrc for the sample babel config.
* Check coverage report directory for the sample output.
Upgrade Notice
==============
**0.4.0**
* Core changed:
* do not support isparta now
* do not support coffee-script/cjsx now
* do not support options.babel now (please use .babelrc)
* do not support options.istanbul.coverageVariable now
* move to istanbul.js and babel-plugin-istanbul now
**0.3.2**
* API changed:
* you should rename all colloectIstanbulCoverage into collectIstanbulCoverage
**0.3.0**
* Babel upgraded:
* You should add proper options.babel.plugins or options.babel.presets to transpile your script properly. Please refer to http://babeljs.io/docs/plugins/
* API changed:
* you should rename all initIstanbulHookHack into initModuleLoaderHack
**0.2.0**
* the sourceMap stack trace feature requires:
* mocha >= 2.2.2
* the options.babel.sourceMap should be changed from 'inline' to 'both'