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

【问题标题】：How to test child React component created in Render with React.createElement()如何使用 React.createElement() 测试在 Render 中创建的子 React 组件
【发布时间】：2015-04-03 16:54:48
【问题描述】：

我正在尝试测试基于一些临时 React 元素构建的自定义 React 元素代码：

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 的实例？

【问题讨论】：

更改事件是在TextField 组件上处理的，而不是customField，对吧？我会尝试findRenderedComponentWithType(..., TextField)。要记住的另一件事是，在 React 0.12+ 中，您需要在自定义 JSX 组件中使用 <InitialCapitals> 或 JSX 将它们视为 HTML（所以 <CustomField /> 而不是 <customField />）
@BinaryMuse 我的代码遵循初始大写字母，我不擅长为问题编写代码。这似乎不是问题。

标签： javascript reactjs jestjs

【解决方案1】：

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

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

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

【讨论】：

用 withTag、withClass 等再次尝试...根本找不到子组件。有没有办法检查渲染的反应文档以开玩笑地查看渲染的 HTML？
'findRenderedComponentWithType' 在示例代码中拼错为 'findRenderedDOMComponentWithType'。无法修改，因为编辑必须至少更改 6 个字符。
@VigneshManogar 感谢您指出错误，现已修复。最好先对代码进行更改，如您在此处所做的那样。