Question

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

到目前为止我尝试过的所有内容都无法正常工作 - 使用React.addons.TestUtils或仅在相关节点上执行简单的$(node).trigger('change')。我无法在React节点上触发onChange。有没有人看到这个示例代码有什么问题，或者我错过了什么？

例如，这里将是示例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

感谢大家的帮助！

Answer 1

当我使用TestUtils时看起来它正常工作。对于我的生活，我不知道为什么我以前无法完全发挥作用。但是，如果其他人需要它，这是解决方案：

＆＃13;

<!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>

＆＃13;

Answer 2

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

更好的选择是在jasmine上设置间谍功能并检查它是否已被调用：

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();
    });
  });
});

如何在Jasmine / React中使用范围输入测试`onChange`事件

2 个答案: