reactjs - ReactJS 应用程序的集成/验收测试

Question

我已阅读有关 Jest 的文档。然而，这似乎意味着对各个组件进行单元测试。

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

例如，在电子商务 React 应用程序中测试结账流程。

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

Angular 使用 Protractor 进行 e2e 测试，Ember 也进行端到端验收测试。我找不到 React 应用程序的任何内容。

Answer 1

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

1. 网络服务器:我启动一个简单的网络服务器(如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();

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

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

现在测试用例必须使用 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

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