Preprocess e2e test files (ES6 style) for Protractor with webpack
I use
- React: application
- npm: package manager
- mocha / chai / sinon: unit test
- protractor: e2e testing
in my application. The whole app is written with ES6, but the e2e tests are plain javascript. I would also like to use ES6 styles for my e2e test files, but the problem I am facing is preprocessing or compiling the ES6 files to plain javascript and then rerun the file handler. Can anyone point out how to use webpack with babel to convert these ES6 files to plain javascript?
here is mine protractor.conf.js
:
/*eslint-disable no-var*/
'use strict';
exports.config = {
specs: ['../tests/e2e/**/*.js'],
capabilities: {
browserName: 'chrome'
},
baseUrl: 'http://localhost:3000',
frameworks: ['mocha', 'chai'],
onPrepare: function() {
browser.ignoreSynchronization = true;
}
};
and a simple test:
/*eslint-disable no-var*/
'use strict';
var chai = require('chai');
var sinon = require('sinon');
var sinonChai = require('sinon-chai');
var expect = chai.expect;
chai.use(sinonChai);
describe('app login flow', function() {
var loginUrl, homeUrl;
it('sets up initial variables', function() {
browser.get('/teams');
loginUrl = browser.getCurrentUrl();
browser.sleep(6000).then(function() {
homeUrl = browser.getCurrentUrl();
expect('1').to.equal('1');
})
});
});
source to share
The problem was solved simply by adding require('babel/register');
to the very top of the file protractor.conf.js
. for more info check this issue on github
So protractor.conf.js
now it looks like this:
/*eslint-disable no-var*/
'use strict';
require('babel/register');
exports.config = {
specs: ['../tests/e2e/**/*.js'],
capabilities: {
browserName: 'chrome'
},
baseUrl: 'http://localhost:3000',
frameworks: ['mocha', 'chai'],
onPrepare: function() {
browser.ignoreSynchronization = true;
},
};
and test files can now be written to ES6.
/*eslint-disable no-var*/
'use strict';
import chai from 'chai';
import sinon from 'sinon';
import sinonChai from 'sinon-chai';
let expect = chai.expect;
chai.use(sinonChai);
describe('app login flow', () => {
let loginUrl, homeUrl;
it('sets up initial variables', () => {
browser.get('/teams');
browser.sleep(6000).then(() => {
expect('1').to.equal('1');
})
});
});
PS. good link for making a protractor to work with ReactJs: Testing React Applications with Protractor on Joel Auterson
UPDATE
Just in case someone reads the link at the bottom of this answer - I wrote this post a while ago and now it is a bit out of date. :) The expected conditions are probably what you want! - Joel Outerson
source to share
I know this question is old, but for an update. I want to mention that since the protractor was written in Node, you can now use ES6 with it without any configuration in the conf file, you just need to use Node> = 4. However, some of the functions (let's say classes) require strict modes ...
For more information on ES6 supported features, you can check this page https://nodejs.org/en/docs/es6/
source to share