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

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中选择备用选项时，更改事件永远不会触发。关于问题的其他颜色以及我在下面尝试过的事情：

Things I've Tried

$('#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);

Additional Color

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

Options

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

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

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

Answer 1

我没有看到你的代码有什么问题，因为你正在使用jQuery选择器我想你已经在你正在执行测试的网页中使用它，然后使用casper.evaluate你的函数必须工作：

...
casper.evaluate(function() {
  $('#selector').val('2').change();
});
...

或者，如果您的<select>位于form div或其他元素内，您可以尝试使用casper.fillSelectors：

...
casper.fillSelectors('yourParentSelector', 
        { 'select#selector' : '2'}
        ,false)
...

希望能帮助到你，

Answer 2

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

从专业角度来说，我做了很多基于selenium /浏览器的e-e，但是在React的情况下，我对TestUtils + mocha + jsdom的信心度很高。我能够模拟浏览器事件，让应用程序通过其Flux逻辑（MVC中的M＆C），视图将根据Flux的更改事件进行更新，最后我的测试可以断言情况..只有catch是等待时间确定，否则，我觉得这个组合比使用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