Почему мое событие onChange отличается между мелким ферментом и компонентами монтирования? - PullRequest
Новая
       8

Почему мое событие onChange отличается между мелким ферментом и компонентами монтирования?

0 голосов
/ 10 февраля 2020

У меня есть простой компонент-оболочка React для материала-пользовательского интерфейса TextField. Я пытаюсь использовать энзим и simulate для запуска событий в базовом TextField, которые обрабатываются в моем компоненте, и есть разница в поведении между использованием shallow и использованием mount, которую я не понимаю. Когда я пытаюсь смоделировать событие keyup, используя либо мелкое, либо монтирование, обработчик событий работает так, как я ожидал. Когда я пытаюсь смоделировать событие change, кажется, что ничего не происходит для случая монтирования, но, похоже, он работает при использовании мелкой обработки.

В моем примере теста ниже, я ожидал увидеть вывод консоли от обоих мои обработчики событий, но я не вижу вывода для события change в случае, когда я использую mount. Я знаю, что в данном конкретном случае c мне не нужно использовать mount, но я хотел бы понять это поведение в тех случаях, когда мне нужно mount.

Как правильно вызвать событие изменения при использовании mount ed компонента? 

import React from 'react'
import { mount, shallow } from 'enzyme'
import TextField from '@material-ui/core/TextField'

const MyTextField = (props: any) => {
  const handleChange = (e: any) => {
    console.log('in handleChange')
  }
  const handleKeyUp = (e: any) => {
    console.log('in handleKeyUp')
  }
  return <TextField onChange={handleChange} onKeyUp={handleKeyUp} />
}

it('should do something', () => {
  const shallowWrapped = shallow(<MyTextField />)
  shallowWrapped.find(TextField).simulate('keyup', {})  // "in handleKeyUp" output to console
  shallowWrapped.find(TextField).simulate('change', { target: { value: 'test' } }) // "in handleChange" output to console

  const mountWrapped = mount(<MyTextField />)
  mountWrapped.find(TextField).simulate('keyup', {})  // "in handleKeyUp" output to console
  // The below line doesn't seem to work as I expect...
  mountWrapped.find(TextField).simulate('change', { target: { value: 'test' } }) // nothing is output to console
})

1 Ответ

0 голосов
/ 10 февраля 2020

Согласно этому Common-Gotchas от Enzyme, вам нужно предоставить объект фиктивного события со свойствами, используемыми в обратном вызове, которые не включены в SyntheticEvent. 

it('should do something', () => {
  wrapped = mount(<MyTextField />);
  wrapped.find(TextField).simulate('keyup', {});
  wrapped.find(TextField).simulate('change', { target: { value: 'test' } });
});
...