Question

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

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

我有值状态和用于在我的ModalComponent中更新值的处理程序。这些信息只是通过道具通过ModalType传递到了我的Input元素。

我试图用酶装载我的ModalComponent，找到我的输入并模拟对该元素的更改。但这行不通。

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

编辑我在一个单独的空白react项目中为我的组件创建了一个精益演示设置

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>
)

我的测试脚本

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')
  })

谢谢！

Answer 1

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

上面的代码是如何在输入中模拟更改事件的有效示例。

修改

您的事件不正确。由于您的处理程序仅在目标ID为machineName时才做某事，因此您需要将该ID添加到模拟事件中。

{{1}}

测试React中的嵌套组件

1 个答案: