Recipe to test your ES6 React components.
$ npm install gulp gulp-util gulp-mocha gulp-istanbul isparta run-sequence babel jsdomNote: You must name all your files .js, even if they contains JSX, or istanbul will not instrument them.
gulp test: Run unit testsgulp test:coverage: Run unit tests with code coverage (the report is stored in ./coverage)gulp tdd: Watch files and run unit tests (without coverage) on changes| 'use strict'; | |
| var gulp = require('gulp'); | |
| var gutil = require('gulp-util'); | |
| var mocha = require('gulp-mocha'); | |
| var istanbul = require('gulp-istanbul'); | |
| var isparta = require('isparta'); | |
| var runSequence = require('run-sequence'); | |
| // Transform all required files with Babel | |
| require('babel/register'); | |
| // Files to process | |
| var TEST_FILES = 'tests/**/*.js'; | |
| var SRC_FILES = 'js/**/*.js'; | |
| /* | |
| * Instrument files using istanbul and isparta | |
| */ | |
| gulp.task('coverage:instrument', function() { | |
| return gulp.src(SRC_FILES) | |
| .pipe(istanbul({ | |
| instrumenter: isparta.Instrumenter // Use the isparta instrumenter (code coverage for ES6) | |
| // Istanbul configuration (see https://github.com/SBoudrias/gulp-istanbul#istanbulopt) | |
| // ... | |
| })) | |
| .pipe(istanbul.hookRequire()); // Force `require` to return covered files | |
| }); | |
| /* | |
| * Write coverage reports after test success | |
| */ | |
| gulp.task('coverage:report', function(done) { | |
| return gulp.src(SRC_FILES, {read: false}) | |
| .pipe(istanbul.writeReports({ | |
| // Istanbul configuration (see https://github.com/SBoudrias/gulp-istanbul#istanbulwritereportsopt) | |
| // ... | |
| })); | |
| }); | |
| /** | |
| * Run unit tests | |
| */ | |
| gulp.task('test', function() { | |
| return gulp.src(TEST_FILES, {read: false}) | |
| .pipe(mocha({ | |
| require: [__dirname + '/lib/jsdom'] // Prepare environement for React/JSX testing | |
| })); | |
| }); | |
| /** | |
| * Run unit tests with code coverage | |
| */ | |
| gulp.task('test:coverage', function(done) { | |
| runSequence('coverage:instrument', 'test', 'coverage:report', done); | |
| }); | |
| /** | |
| * Watch files and run unit tests on changes | |
| */ | |
| gulp.task('tdd', function(done) { | |
| gulp.watch([ | |
| TEST_FILES, | |
| SRC_FILES | |
| ], ['test']).on('error', gutil.log); | |
| }); |
| 'use strict'; | |
| var jsdom = require('jsdom'); | |
| /** | |
| * Borrowed from: https://github.com/tmpvar/jsdom/issues/135#issuecomment-68191941 | |
| */ | |
| function applyJsdomWorkaround(window) { | |
| Object.defineProperties(window.HTMLElement.prototype, { | |
| offsetLeft: { | |
| get: function() { | |
| return parseFloat(window.getComputedStyle(this).marginLeft) || 0; | |
| } | |
| }, | |
| offsetTop: { | |
| get: function() { | |
| return parseFloat(window.getComputedStyle(this).marginTop) || 0; | |
| } | |
| }, | |
| offsetHeight: { | |
| get: function() { | |
| return parseFloat(window.getComputedStyle(this).height) || 0; | |
| } | |
| }, | |
| offsetWidth: { | |
| get: function() { | |
| return parseFloat(window.getComputedStyle(this).width) || 0; | |
| } | |
| } | |
| }); | |
| } | |
| function setupDom() { | |
| var baseMarkup = '<!DOCTYPE html><html><head><title></title></head><body></body></html>'; | |
| var window = jsdom.jsdom(baseMarkup).defaultView; | |
| global.window = window; | |
| global.document = window.document; | |
| global.navigator = window.navigator; | |
| applyJsdomWorkaround(window); | |
| } | |
| setupDom(); |
@andela-rekemezie : There is this article that explain it quite clearly.
You just need to set .babelrc and move gulpfile.js to gulpfile.babel.js.
just need a .babelrc file and rename gulpfile.js to gulpefile.babel.js
@yannickcr, how do you handle es6 codes before running the test in your gulp test task