使用webpack为量角器预处理e2e测试的文件（ES6样式）

Max 发表于 Dev

最高

我正在使用

React：应用程序
npm：程序包管理器
摩卡咖啡/柴/其他：单元测试
量角器：端到端测试

在我的应用程序中。整个应用程序都是用ES6编写的，但是e2e测试是纯JavaScript。我也想对我的e2e测试文件使用ES6样式，但是我面临的问题是对ES6文件进行预处理或将其编译为纯JavaScript，然后运行量角器Agains编译文件。谁能指出如何将Webpack与babel一起使用，以将那些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');
    })
  });
});

最高

只需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工作奠定了良好的参考：测试与做出反应量角器应用程序由乔尔Auterson

更新