ReactJS App的集成/验收测试

Question

我已经阅读了有关Jest的文档.然而,这似乎意味着单个组件的单元测试.

如何测试组件的集成,或验收测试用React JS(使用Flux)编写的Web应用程序的功能.

例如,在电子商务React应用程序中测试结帐流程.

1. 用户可以登录
2. 用户可以浏览产品目录
3. 用户可以将产品添加到购物车
4. 用户可以结账

Angular对Protractor进行了e2e测试,Ember也进行了端到端的验收测试.我找不到React应用程序的任何内容.

Answer 1

我解决问题的方法是启动多个进程或服务，以便使用 mocha 测试 e2e：

1. Web 服务器：我启动一个简单的 Web 服务器（如express），它提供 webpack 构建包（https://www.npmjs.com/package/express）
2. Selenium：用于控制浏览器（https://www.npmjs.com/package/selenium-standalone）
3. “child_process”分支中的摩卡

这会在我的 test_runner.js 文件中查找，然后我以“node 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();

测试完成后，该函数将停止所有服务。

网络服务器启动应该没有问题。我在硒启动方面遇到了一些困难，在这里找到了一个很好的方法： 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);

mocha 基本上是一个节点进程，它启动并在 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);
    }
}

现在测试用例必须使用 selenium 驱动程序。我选择 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 不支持 React 的 .bind(this) 函数，因此目前无法使用 Phantomjs 浏览器。原因解释如下：https://groups.google.com/forum/#! msg/phantomjs/r0hPOmnCUpc/uxusqsl2LNoJ

希望这有帮助；）祝你好运。