使用reactJs TestUtils模拟文本输入 [英] Simulating text entry with reactJs TestUtils

问题描述

我希望能够使用reactjs模拟用户输入文本框，以便我可以测试我的验证状态消息。

I want to be able to simulate a user typing into a text box using reactjs so that I can test my validation status messages.

我有一个反应组件在keyUp上验证

I have a react component which validates on keyUp

下面是我尝试过的一个简单示例。

Below is a simple example of what I've tried.

nameInput.props.value = 'a';
React.addons.TestUtils.Simulate.keyUp(nameInput);
React.addons.TestUtils.findRenderedDOMComponentWithClass(component, 'has-error');

当我在验证器中调试时，这似乎没有改变绑定文本框的值

This doesn't seem to change the value of the bound textbox when I debug in the validator

React.addons.TestUtils.Simulate.keyUp(nameInput, {key: 'a'});
React.addons.TestUtils.findRenderedDOMComponentWithClass(component, 'has-error');

这也不是。

有人能指出我在正确的轨道上，第二个是内联我可以在模拟周围找到的文档（ http://facebook.github.io/react/docs/test-utils.html ），第一个对我有意义（设置实际的文本框值，然后伪造一个事件）

Could someone point me on the right track, the second is inline with the documentation I could find around simulate (http://facebook.github.io/react/docs/test-utils.html), the first makes sense to me (set the actual textbox value then fake an event)

推荐答案

通过设置 nameInput.props.value ='a'; 你实际上并不是更新组件中的值。

By setting nameInput.props.value = 'a'; you are not actually updating the value in your component.

您应该使用 React.addons.TestUtils.Simulate.change（nameInput，{target：{value：' a'}}）; 或类似的东西来模拟修改实际值。

You should use React.addons.TestUtils.Simulate.change(nameInput, { target: { value: 'a' } }); or something similar to simulate modifying the actual value.

这篇关于使用reactJs TestUtils模拟文本输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！