Question

现在，我无法成为唯一一个遇到麻烦的人。我有一个用React构建的简单页面。在其中，我有一个简单的组件，它呈现select和 - 更改值 - 触发回调。这个组件的shell看起来像这样：

const Selector = React.createClass({
  render: function() {
    return (
      <select id="selector" onChange={this.props.onChange}>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    );
  }
})

我想以编程方式从我的CasperJS测试脚本中选择更改事件以测试后续页面更改效果，但是当我能够在JS中选择备用选项时，更改事件永远不会触发。问题的其他颜色以及我在下面尝试过的事情：

我尝试过的事情

$('#selector').val('2').change()

$('#selector').val('2').trigger('change')

var el = $('#selector').get(0); 
var event = new Event('input', {bubbles: true});
el.dispatchEvent(event);

var el = $('#selector').get(0); 
var event = new Event('onSelect', {bubbles: true});
el.dispatchEvent(event);

var el = $('#selector').get(0); 
var event = new Event('onChange', {bubbles: true});
el.dispatchEvent(event);

var el = $('#selector').get(0); 
var event = new Event('change', {bubbles: true});
el.dispatchEvent(event);

附加颜色

我认识到在组件上触发DOM事件的建议方法是使用React Test Utilities模块中的Simulate对象。但是，由于PhantomJS and SlimerJS are not node modules我不能简单地在我的Casper测试脚本中需要该模块。

选项

现在，我觉得我有两个选择：

1）使用SpookyJS通过Node驱动我的脚本，并在spooky脚本中要求react test utilities模块。不过，我真的不想这样做。

2）放弃无头浏览器测试框架的所有希望，并使用Jest或Enzyme选择较低级别的方法。不过，我也不想这样做。

Answer 1

我认为您的代码没有任何问题，因为您正在使用jQuery选择器我想您已经在执行测试的网页中使用它，然后使用casper.evaluate您的函数必须工作原理：

create alias regexp_like as
$$ boolean regexpLike(String s, String p, String flags) {
    if(null == s) return false;
    if(null != flags) { p = "(?" + flags + ")" + p; }
    java.util.regex.Pattern compiled = java.util.regex.Pattern.compile(p);
    return compiled.matcher(s).find();
} $$

或者，如果您的... casper.evaluate(function() { $('#selector').val('2').change(); }); ...位于<select> div或其他元素中，则可以尝试使用casper.fillSelectors：

form

希望它有所帮助，

Answer 2

根据您的描述，看起来您已经围绕Jest和其他单元测试框架做了足够的研究，不确定您的体验是什么迫使您注意浏览器驱动的测试。

从专业角度来说，我一般会做很多基于selenium /浏览器的e-e，但在React的情况下，我对TestUtils + mocha + jsdom的信心度很高。我能够模拟浏览器事件，让应用程序通过其Flux逻辑（MVC中的M＆amp; C），视图将根据Flux的更改事件进行更新，最后我的测试可以断言情况..只有等待才是等待确定时间，否则，我觉得这个组合比使用webdriver驱动浏览器更快。得到这个样本回购，如果这有助于https://github.com/sahas-/react-jsdom-mocha-viewTesting

Answer 3

对我有用的是首先设置值（我相信这是我错过的值），然后触发更改事件：

const elm = document.getElementById('selector');
elm.value='2';
elm.dispatchEvent(new Event('change', {'view': window,'bubbles': true}))

您可能想看看https://github.com/vitalyq/react-trigger-change

触发器使用CasperJS选择React App中的更改

我尝试过的事情

附加颜色

选项

3 个答案: