Question

我正在尝试测试构建在一些特殊React元素之上的自定义反应元素代码：

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

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

Jest代码：

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

我试图为_onControlChange模拟函数以查看它是否被调用，它被调用0次。我还尝试在simulate（）调用之前和之后看到customField var的状态，并且没有任何更改。我想知道我是否遗漏了一些模拟在文本字段中输入的内容

我已尝试通过标记，类型和类选择所有选项，但没有成功。我可以在console.log渲染组件时看到textfield元素。有没有办法通过ref？

获取TextField的实例

Answer 1

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

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

您还在重新定义customField，因此我在此更改了变量名称。

如何使用React.createElement（）测试在Render中创建的子React组件

1 个答案: