使用 CasperJS 在 React App 中触发选择更改答案

【问题标题】：Trigger Select Change in React App with CasperJS使用 CasperJS 在 React App 中触发选择更改
【发布时间】：2016-02-23 02:33:46
【问题描述】：

现在，我不可能是唯一遇到此问题的人。我有一个用 React 构建的简单页面。在其中，我有一个简单的组件，它呈现 select 并且 - 在值更改时 - 触发回调。该组件的外壳如下所示：

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 测试脚本中的 select 上触发一个 change 事件，以测试随后的页面更改效果，但是当我能够在 JS 中选择备用选项时，change 事件永远不会触发。问题的附加颜色以及我在下面已经尝试过的事情：

我尝试过的事情

$('#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 驱动我的脚本，并在诡异的脚本中需要 react 测试实用程序模块。不过，我真的不想这样做。

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

【问题讨论】：

标签： javascript reactjs phantomjs html-select casperjs

【解决方案1】：

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

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

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

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

希望对你有帮助，

【讨论】：

感谢您的回复！不幸的是，这两件事都没有奏效。此外，即使我在 Chrome 控制台中通过 jQuery 手动触发选择的更改，当值更改时，也不会触发任何事件侦听器
@Bobby 如果即使直接在浏览器 Web 控制台中执行代码也没有触发事件，则可能是您测试问题的原因。祝你好运找到问题:)。

【解决方案2】：

根据您的描述，您似乎已经对 Jest 和其他单元测试框架进行了足够的研究，但不确定是什么经验迫使您寻找浏览器驱动的测试。

在专业上，我通常会做很多基于 selenium/浏览器的 e-e，但对于 React，我对 TestUtils + mocha + jsdom 的信心水平很高。我能够模拟浏览器事件，让应用程序通过其 Flux 逻辑（MVC 中的 M 和 C），视图将根据来自 Flux 的更改事件进行更新，最后我的测试可以断言这种情况.. 唯一的问题是等待时间决心，否则，我很有信心这个组合比使用 webdriver 驱动浏览器运行得更快。得到这个示例 repo，如果有帮助 https://github.com/sahas-/react-jsdom-mocha-viewTesting

【讨论】：

【解决方案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

【讨论】：