reactjs - 使用 webpack 为 Protractor 预处理 e2e 测试文件(ES6 样式)

Question

我正在使用

1. react :应用程序
2. npm:包管理器
3. mocha/chai/sinon:单元测试
4. Protractor :端到端测试

在我的应用程序中。整个应用程序是用 ES6 编写的，但 e2e 测试是纯 JavaScript。我也想对我的 e2e 测试文件使用 ES6 样式，但我面临的问题是将 ES6 文件预处理或编译为纯 JavaScript，然后再次运行 Protractor 编译的文件。谁能指出如何使用 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');
    })
  });
});

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。使 Protractor 与 ReactJs 一起使用的一个很好的引用: Testing React apps with Protractor通过 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