Тестирование вложенных компонентов в React

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 родительских компонентов выше?

EDIT Я создал обеднениедемонстрационная настройка моего компонента в отдельном пустом реактивном проекте

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

Приведенный выше код является рабочим примером того, как смоделировать событие изменения на вашем входе.

Редактировать

Ваше событие неверно. Поскольку ваш обработчик что-то делает, только если целевой идентификатор - machineName, вам нужно добавить этот идентификатор в ваше фиктивное событие.

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