Reactjs 在React中测试嵌套组件

我在测试嵌套组件的事件时遇到一些问题。 这就是我的组件树的样子：

- ModalComponent (Stateful with value for Input and update handler)
- - ModalType (stateless, passes value and update down to input)
- - - Input (stateless)

我在ModalComponent中有值状态和更新值的处理程序。此信息通过props通过

ModalType

传递到我的

Input

元素

我试着用Ezyme挂载我的

ModalComponent

，找到我的输入并模拟元素的变化。但这并不奏效

当处理程序和状态是上述n个父组件时，测试嵌套组件的最佳策略是什么

编辑 我已经在一个单独的项目中创建了我的组件的精益演示设置

class App extends Component {

  state = {
    inputs: {
      machineName: 'Empty'
    }
  }

  onChangeHandler = (e) => {
    let updatedState = null
    console.log(e.target.value, e.target.id);

    switch (e.target.id) {
      case 'machineName':
        updatedState = { ...this.state.inputs, machineName: e.target.value }
        this.setState({inputs: updatedState})
        break;
      default:
        break;
    }
  }

  render() {
    return (
      <div className="App">
        <ModalType onChange={this.onChangeHandler} value={this.state.inputs}></ModalType>
      </div>
    );
  }
}

const ModalType = (props) => {
  return <Input onChange={props.onChange} value={props.value.machineName}></Input>
}

const Input = (props) => (
  <input id="machineName" onChange={props.onChange} value={props.value}></input>
)

类应用程序扩展组件{
状态={
投入：{
machineName:“空”
}
}
onChangeHandler=（e）=>{
让updatedState=null
日志（e.target.value，e.target.id）；
开关（如target.id）{
案例“machineName”：
updatedState={…this.state.inputs，machineName:e.target.value}
this.setState（{inputs:updatedState}）
打破
违约：
打破
}
}
render（）{
返回(
);
}
}
const ModalType=（道具）=>{
返回
}
常量输入=（道具）=>(
)

我的测试脚本

test('should handle change on input', () =>{
  const wrapper = mount(<App/>)
  wrapper.setState({inputs: { machineName: 'Empty' }})
  wrapper.find('input').simulate('focus')
  wrapper.find('input').simulate('change', {target: {value: '123'}})
  wrapper.update()
  // fails
  expect(wrapper.state().inputs.machineName).toEqual('123')
  // fails too
  expect(wrapper.find('input').props().value).toEqual('123')
  })

test（'应在输入时处理更改'，（）=>{
const wrapper=mount（）
setState（{输入：{machineName:'Empty'}）
wrapper.find（'input'）.simulate（'focus'））
find（'input'）.simulate（'change'，{target:{value:'123'}）
wrapper.update（）
//失败
expect（wrapper.state（）.inputs.machineName.toEqual（'123'））
//也失败了
expect（wrapper.find（'input'）.props（）.value）.toEqual（'123'））
})

---

谢谢

您能提供测试文件中的样本吗？根据我对酶的有限知识，这应该适用于类似于

input.simulate（'change'，event）

这是我尝试过的方法。而且它对meLooks不起作用，就像你在假活动中丢失了身份证一样。我已经编辑了我的答案。

const wrapper = mount(<ModalComponent />);
const input = wrapper.find('input');
const event  = {target: {value: 'testValue'}};
input.simulate('change', event);

wrapper.find('input').simulate('change', {target: {value: '123', id: 'machineName'}})