我在使用 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>关于javascript - 如何在 Jasmine/React 中使用范围输入测试 `onChange` 事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29241449/