1

我正在尝试测试建立在一些临时反应元素代码之上的自定义反应元素：

return (
    React.createElement("div", {className: classes},
        React.createElement(TextField, {  
            ref: "omniTextBox",
            className: "menu-textfield",
            onChange: this._onControlChange
        }),
    )
);

this._onControlChange 根据文本字段值操作状态。这是我想要测试的，文本字段的不同输入会触发组件的不同状态。

笑话代码：

var customComponent = TestUtils.renderIntoDocument( <CustomField /> );
var customField = TestUtils.findRenderedComponentWithType(customComponent, customField);
TestUtils.Simulate.change(customField, {target: {value: 'Hello, world'}});

我尝试为 _onControlChange 模拟函数以查看它是否被调用，它被调用了 0 次。我还尝试在模拟（）调用之前和之后查看 customField var 的状态，但没有任何变化。我想知道我是否遗漏了一些东西来模拟在文本字段中输入

我已经尝试了所有按标签、类型和类进行选择的选项，但均未成功。当 console.log 渲染组件时，我可以看到 textfield 元素。有没有办法通过 ref 获取 TextField 的实例？

4

1 回答 1

3

你似乎误用了TestUtils.findRenderedComponentWithType. 您的自定义组件中的输入字段实际上是一个TextField.

var txtField = TestUtils.findRenderedComponentWithType(customComponent, TextField);
TestUtils.Simulate.change(txtField, {target: {value: 'Hello, world'}});

您也在重新定义customField，因此我在这里更改了变量名。

于 2015-04-03T17:59:32.760 回答