ReactJS應用程序的集成/驗收測試

Question

我已閱讀關於Jest的文檔。但是這似乎意味着單個組件的單元測試。

如何測試組件的集成或接受測試使用React JS（使用Flux）編寫的Web應用程序的功能。

例如在電子商務React應用程序中測試結帳流程。

1. 用戶可以登錄
2. 用戶可以瀏覽產品目錄
3. 用戶可以添加產品到購物車
4. 用戶可以檢出

角與量角器端到端測試，恩貝爾還具有末端結束驗收測試。我找不到任何React應用程序。

Answer 1

我解決了這個問題的方法是爲了與摩卡測試E2E啓動多個進程或服務：

1. Web服務器：我開始一個簡單的Web服務器（如快遞），提供了的WebPack構建軟件包（https://www.npmjs.com/package/express ）
2. 硒：用於控制 'child_process' 叉

這看起來在內的瀏覽器（https://www.npmjs.com/package/selenium-standalone）

摩卡我開始與「節點test_runner.js」我test_runner.js文件如下：

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(); 

一旦測試完成的功能停止所有服務。

網絡服務器應該沒有問題開始。我有一些difficilises與硒開始，發現這裏的好方法：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); 

摩卡然後基本上是開始看起來像這樣在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); 
    } 
} 

現在測試案件必須使用硒驅動程序。我選擇webdriverIO，但也有其他的選擇（在這裏看到：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); 
      }); 
    }); 
}); 

最後一個音符：Phantomjs不與.bind工作（本）的反應函數，因此Phantomjs瀏覽器是目前別無選擇。原因在這裏解釋：https://groups.google.com/forum/#!msg/phantomjs/r0hPOmnCUpc/uxusqsl2LNoJ

希望這有助於;）祝你好運。