使用 webpack 为 Protractor 预处理 e2e 测试文件（ES6 样式）

Question

我正在使用

反应：应用程序
npm：包管理器
mocha/chai/sinon: 单元测试
量角器：端到端测试

在我的申请中。整个应用程序是用 ES6 编写的，但是 e2e 测试是普通的 javascript。我也想为我的 e2e 测试文件使用 ES6 样式，但我面临的问题是将 ES6 文件预处理或编译为纯 javascript，然后运行量角器再次编译文件。谁能指出如何使用带有 babel 的 webpack 将那些 ES6 文件转换为普通文件 javascript?

这是我的 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;
  }
};

和一个简单的测试：

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

Answer 1

只需在 protractor.conf.js 文件的最顶部添加 require('babel/register'); 即可解决问题。有关更多信息，请查看此 issue on 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

更新

Just in case anyone reads the link at the bottom of this answer - I wrote that post a while ago, and it's now a little out of date. :) ExpectedConditions is probably what you want! – Joel Auterson

Answer 2

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

require("babel-core/register")({
    presets: [
        "es2015"
    ]
});

Answer 3

我知道这个问题很老了，但为了更新它，我想提一下，因为量角器是在 Node 上编写的，所以你现在可以使用 ES6，而无需在 conf 文件中进行任何调整，你只需要使用 Node >= 4 . 然而，某些功能（let，类）需要严格模式。

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

使用 webpack 为 Protractor 预处理 e2e 测试文件（ES6 样式）

Preprocess e2e tests' files (ES6 styling) for Protractor using webpack

ecmascript-6

reactjs

protractor

webpack

e2e-testing