Integration/Acceptance testing of a ReactJS App -

i've read documentation jest. seems imply unit testing of individual components.

how 1 test integration of components, or acceptance testing feature of web app written react js (with flux).

eg testing checkout flow in e-commerce react app.

1. user can login
2. user can browse product catalogue
3. user can add product cart
4. user can checkout

angular has e2e testing protractor, ember has end end acceptance testing. cannot find react apps.

the way solved problem start several processes or services in order test e2e mocha:

1. webserver: start simple webserver (like express) provides webpack build packages (https://www.npmjs.com/package/express)
2. selenium: controlling browser (https://www.npmjs.com/package/selenium-standalone)
3. mocha within 'child_process' fork

this looks in test_runner.js file following start 'node test_runner.js':

 var async = require('async');  var web_runner = require('./web_server');'  //... , other runner scripts   var start = function () {    console.log('starting services:');    async.series([        function (callback) {           web_runner.start(args[0], callback);        },        function (callback) {            selenium_runner.start(callback);        },        function (callback) {             mocha_runner.start(args[0], args[1], callback);        },        function (callback) {             selenium_runner.stop(callback_stop, 0);             mock_runner.stop(callback_stop);             web_runner.stop(callback_stop);             callback();        }    ]); }; start(); 

once test done function stops services.

the webserver should no problem start. had difficilises selenium start , found nice way here: https://github.com/nkbt/nightwatch-autorun/blob/master/index.js

var selenium = require('selenium-standalone');  function onseleniumstarted(err, seleniumchild) {   if (err) {       process.exit(1);   }   process.on('uncaughtexception', err2 => {      console.error(err2.stack);      seleniumchild.kill('sigint');      process.exit(1);   });   startserver(onserverstarted(seleniumchild)); }  function onseleniuminstalled(err) {   if (err) {      console.error(err.stack);      process.exit(1);    }    selenium.start({seleniumargs: ['-debug']}, onseleniumstarted); }  selenium.install({}, onseleniuminstalled); 

the mocha node process starts , looks in javascript:

module.exports = {     start: function (env, test_path, callback) {         var env_mocha = {env: process.env.env = env};         console.log('start mocha with:', env_mocha, mocha, test_path);         cp.fork(mocha,             [                 test_path             ], [                 env_mocha             ])             .on('error', function (error) {                 runner.stop(error);                 return process.exit(1);             })             .on('close', function (code) {                 callback();             });     },     stop: function (reason) {         return process.exit(reason);     } } 

now test cases have use selenium driver. choose webdriverio, there other alternatives (see here: http://www.slant.co/topics/2814/~node-js-selenium-webdriver-client-libraries-bindings)

var env = process.env.env; var webdriverio = require('webdriverio'); var assert = require('assert');  describe('file: some_test_spec', function () {      var client = {};      before(function (done) {         client = webdriverio.remote({desiredcapabilities: {browsername: 'chrome'}});         client.init(done);     });      after(function (done) {         client.end(done);     });      describe('login success', function () {             before(function (done) {                 // user needs logged in                  client                     .url(url_start)                     .waitforvisible('#comp\\.user\\.login\\.button', 1000)                     .setvalue('#comp\\.user\\.login\\.email', 'my@email.com')                     .setvalue('#comp\\.user\\.login\\.password', 'mysecret')                     .click('#comp\\.user\\.login\\.button')                     .waitforvisible('#comp\\.user\\.home', 1000)                     .call(done);             });      }); }); 

last note: phantomjs not work .bind(this) function of react, therefore phantomjs browser no option @ moment. reason explained here: https://groups.google.com/forum/#!msg/phantomjs/r0hpomncupc/uxusqsl2lnoj

hope helped ;) luck.