我已阅读有关 Jest 的文档。然而,这似乎意味着对各个组件进行单元测试。
如何测试组件集成,或验收测试使用 React JS(使用 Flux)编写的 Web 应用程序的一项功能。
例如,在电子商务 React 应用程序中测试结账流程。
- 用户可以登录
- 用户可以浏览产品目录
- 用户可以将产品添加到购物车
- 用户可以结账
Angular 使用 Protractor 进行 e2e 测试,Ember 也进行端到端验收测试。我找不到 React 应用程序的任何内容。
最佳答案
我解决问题的方法是启动多个进程或服务,以便使用 mocha 测试 e2e:
- 网络服务器:我启动一个简单的网络服务器(如express),它提供 webpack 构建包 ( https://www.npmjs.com/package/express )
- Selenium:用于控制浏览器 ( https://www.npmjs.com/package/selenium-standalone )
- “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
希望这有帮助;)祝你好运。
关于reactjs - ReactJS 应用程序的集成/验收测试,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29417207/