Reactjs 如何在react中测试子组件

我正在尝试测试一个包含子组件的react组件。子级有一个输入框，它将使用onChange更新其状态，然后onSubmit将向父级回调更新父级状态的文本。组件如下所示：

class App extends Component {

constructor(props) {
  super(props)
  this.state = {answer: ''};
}

answerHandler(_answer) {
  this.setState({
    answer: _answer
  })
}

render() {
  return (
    <div className='App'>
    <Letters answerHandler={this.answerHandler.bind(this)}/>
  </div>
);
}
}
export default App;

类应用程序扩展组件{
建造师（道具）{
超级（道具）
this.state={答案：'}；
}
回答者（回答者）{
这是我的国家({
答复:(答复)
})
}
render（）{
返回(
);
}
}
导出默认应用程序；

_

类字母扩展组件{
建造师（道具）{
超级（道具）；
this.state={value:''}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
this.setState（{value:event.target.value}）；
}
handleSubmit（事件）{
event.preventDefault（）
this.props.answerHandler（response.data.word）
}
render（）{
返回(
信件：
);
}
}
导出默认字母；

当运行测试时，我得到一条消息：方法“simulate”仅用于在单个节点上运行。2.取而代之的是

it('enter letters and check answer', () => {
  const wrapper = mount(<App />);
  wrapper.find('input').simulate('change', { target: { value: 'doof' }});
})

it（'输入字母并检查答案'，（）=>{
const wrapper=mount（）；
find（'input'）.simulate（'change'，{target:{value:'doof'}}）；
})

---

我不完全确定这意味着什么。我认为Ezyme的挂载应该创建包含所有组件的应用程序？如果我使用shallow而不是mount，它会显示0个节点而不是2个节点。环顾四周，这似乎表明我发现了回调，但这似乎很奇怪，你不能一起测试组件，所以我肯定我做错了什么。

你有两个输入字段：

<input type="text" value={this.state.value} onChange={this.handleChange} />
<input type="submit" value="Submit" />

const component=shallow（）；state（'name'）

将为您提供状态的name属性

---

顺便说一下，我更喜欢单独测试组件，使用“浅层”而不是“安装”。它将更容易测试，测试也不会那么脆弱。但这不是你的问题：）

你有两个输入字段：

<input type="text" value={this.state.value} onChange={this.handleChange} />
<input type="submit" value="Submit" />

const component=shallow（）；state（'name'）

将为您提供状态的name属性

顺便说一下，我更喜欢单独测试组件，使用“浅层”而不是“安装”。它将更容易测试，测试也不会那么脆弱。但这不是你的问题：）

wrapper.find('input').at(0).simulate('change', { target: { value: 'doof' }});