javascript - 如何使用 React.createElement() 测试在 Render 中创建的子 React 组件

Question

我正在尝试测试构建在一些临时 React 元素之上的自定义 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 呈现的组件时，我可以看到文本字段元素。有什么方法可以通过 ref 获取 TextField 的实例吗？

Answer 1

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

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

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