如何在Jasmine/Rect中测试带有范围输入的“onChange”事件

How to test `onChange` event with range input in Jasmine/React

本文关键字：输入 范围 onChange 事件 Jasmine Rect 测试      更新时间：2023-09-26

我在使用React的Jasmine测试（以及使用Phantom）中启动onChange时遇到问题。我看到的特殊问题是范围输入。假设在onChange事件之后React组件中的className发生变化。在Jasmine中，我无法在测试中手动触发onChange，以便断言DOM更改。

到目前为止，我所尝试的一切都不起作用——无论是使用React.addons.TestUtils，还是只是在有问题的节点上做一个简单的$(node).trigger('change')。我无法让onChange在React节点上启动。有人看到这个示例代码有什么错误吗，或者我遗漏了什么？

例如，这里将是示例Jasmine代码：

// assuming I already have full access to node and its in the DOM
var node = React.findDOMNode(this.refs.input);
// updating input `value` manually
node.value = 10;
// simulate change to `input` so that `onChange` will fire
React.addons.TestUtils.Simulate.change(node);
// or React.addons.TestUtils.Simulate.change(node, { target: { value: 10 } });
// assert that sample `className` is changed for example, this could be anything - just a simple assertion that something in the DOM changed as expected
expect(node.className).not.toBe('hidden');

我永远无法通过上面的expect——DOM中的任何内容都无法获取所讨论节点上的value更改。

这里还有一个代码笔说明了这个问题：http://codepen.io/bessington/pen/azXwVy

谢谢大家的帮助！

当我使用TestUtils时，它看起来工作正常。我一辈子都不知道为什么我以前不能完全做到这一点。但如果其他人需要，这里有一个解决方案：

<!DOCTYPE html>
<html>
<head>
  <title>React test</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine.css"/>
  <script defer src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine.js"></script>
  <script defer src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine-html.js"></script>
  <script defer src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/boot.js"></script>
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
  <script defer src="http://fb.me/JSXTransformer-0.10.0.js"></script>
</head>
<body>
<script type="text/jsx">
  /**@jsx React.DOM*/
  var sampleInput = React.createClass({
    getInitialState: function() {
      return {
        inputVal: 2
      }
    },
    updateValue: function(e) {
      // update textual value
      this.setState({ inputVal: e.currentTarget.valueAsNumber });
    },
    render: function() {
      return (
        <div>
          <input type="range" min="0" max="10"
            onChange={this.updateValue}
            value={this.state.inputVal} />
        </div>
      )
    }
  });
  // Jasmine
  describe('A component', function() {
    var TestUtils = React.addons.TestUtils;
    var inputInstance;
    describe('with input range', function() {
      it('updates its value `onChange`', function() {
        inputInstance = TestUtils.renderIntoDocument(
          React.createElement(sampleInput, { sample: true })
        );
        // sanity check
        expect(inputInstance.props.sample).toBe(true);
        var input = React.findDOMNode(inputInstance).querySelector('input');
        input.value = 10;
        TestUtils.Simulate.change(input);
        expect(input.valueAsNumber).toBe(10);
        expect(inputInstance.state.inputVal).toBe(10);
      });
    });
  });
</script>
</body>
</html>

在你自己的答案上加上我的2美分。。。

一个更好的选择是在茉莉花上设置一个间谍功能，并检查它是否被调用：

describe('A component', () => {
  describe('when it renders', () => {
    it('should trigger the onChange function', () => {
      const callback = jasmine.createSpy('changed');
      const sut = TestUtils.renderIntoDocument(
        <MyReactComponent onChange={callback}>BlaBlaBla</MyReactComponent>
      );
      const domNode = ReactDOM.findDOMNode(sut);
      const input = domNode.querySelector('input');
      TestUtils.Simulate.change(input);
      expect(callback).toHaveBeenCalled();
    });
  });
});
相关文章：