Integration/Akzeptanztest einer ReactJS App

Question

Ich habe die Dokumentation über Jest gelesen. Dies scheint jedoch ein Komponententest einzelner Komponenten zu implizieren.

Wie testet man die Integration von Komponenten oder die Akzeptanzprüfung eines Features einer Web-App, die mit React JS (mit Flux) geschrieben wurde.

Beispiel Testen des Kassenablaufs in einer E-Commerce-React-App.

1. Benutzer
2. Benutzer anmelden können, können Sie den Produktkatalog
3. Benutzer blättern kann Produkt den Warenkorb
4. Benutzer hinzufügen Kasse

Angular e2e Tests mit Winkelmesser hat, Ember hat auch Ende Ende der Akzeptanzprüfung. Ich kann nichts für React Apps finden.

Answer 1

So wie ich das Problem gelöst ist, mehrere Verfahren oder Dienstleistungen zu testen, um e2e mit Mokka zu starten:

1. Webserver: Ich beginne einen einfachen Web-Server (wie Express), die die webpack Pakete bauen bietet (https://www.npmjs.com/package/express)
2. Selen: für

das sieht den Browser (https://www.npmjs.com/package/selenium-standalone)

Mokka in einer 'child_process' Gabel Steuern in meine test_runner.js Datei folgende, die ich mit ‚Knoten test_runner.js‘ beginnen:

var async = require('async'); 
var web_runner = require('./web_server');' 
//... and 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(); 

Sobald der Test die Funktion erfolgt beendet alle Dienste.

Der Webserver sollte kein Problem sein, um zu starten. Ich hatte ein paar difficilises mit dem Selen Start und einen schönen Weg gefunden, hier: 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); 

Der Mokka ist dann im Grunde ein Knoten Prozess, der beginnt und sieht wie folgt aus 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); 
    } 
} 

nun der Test Fälle müssen einen Selen-Treiber verwenden. Ich wähle webdriverIO, aber es gibt andere Alternativen (siehe hier: 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 to be 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); 
      }); 
    }); 
}); 

Letzte Anmerkung: PhantomJS nicht mit dem .bind funktioniert (this) Funktion reagieren, damit der PhantomJS Browser ist keine Option im Moment . Grund wird hier erklärt: https://groups.google.com/forum/#!msg/phantomjs/r0hPOmnCUpc/uxusqsl2LNoJ

Hoffe das hat geholfen;) Viel Glück.