reactjs - 在 React 中测试嵌套组件

Question

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

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

我在 ModalComponent 中有值状态和更新值的处理程序。此信息通过 Prop 通过 ModalType 传递到我的 Input 元素。

我尝试用 enzyme 安装我的 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

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

上面的代码是一个工作示例，说明如何模拟输入的更改事件。

编辑

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

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