3

I'm using

  1. React: application
  2. npm: package manager
  3. mocha/chai/sinon: unit test
  4. protractor: e2e testing

in my application. The entire application is written with ES6, but the e2e tests are plain javascript. I would like to use ES6 styling for my e2e tests files as well, but the issue that I am facing is to preprocess or compile the ES6 files to plain javascript and then run the protractor agains compiled files. Can anyone please point how to use webpack with babel to convert those ES6 files into plain javascript?

here is my 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');
    })
  });
});
4

3 回答 3

6

require('babel/register');只需在文件的最顶部添加即可解决问题protractor.conf.js。有关更多信息，请在 github 上查看此问题

所以protractor.conf.js现在看起来像这样：

/*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;
  },

};

并且测试文件现在可以用 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。使量角器与 ReactJs 一起工作的一个很好的参考： Testing React apps with Protractor by Joel Auterson

更新

以防万一有人阅读此答案底部的链接-我不久前写了那篇文章，现在它有点过时了。:) ExpectedConditions 可能是你想要的！——乔尔·奥特森

于 2015-06-25T09:49:47.317 回答
4

对于 Babel 6 版本，将以下内容放在 protractor.conf.js 的顶部（或 onPrepare）：

require("babel-core/register")({
    presets: [
        "es2015"
    ]
});
于 2016-01-07T13:27:49.767 回答
1

我知道这个问题很老，但要更新它，我想提一下，由于量角器是在 Node 上编写的，你现在可以使用 ES6 而不需要在 conf 文件中进行任何调整，你只需要使用 Node >= 4。但是有些features(let, classes) 需要严格模式。

有关支持的 ES6 功能的更多信息，您可以查看此页面https://nodejs.org/en/docs/es6/

于 2016-03-16T13:16:56.170 回答