Тестирование локального состояния с использованием `evt.target.name` не работает

Question

При запуске спецификаций ферментов у меня есть эта спецификация, которую я не могу передать, используя evt.target.name в моем обработчике событий.Спецификация выглядит следующим образом:

describe('<CampusInput /> component', () => {

  let renderedCampusInput
  let campusInputInstance

  beforeEach(() => {
    renderedCampusInput = shallow(<CampusInput />)
    campusInputInstance = renderedCampusInput.instance()
  })

  it.only('handleChange should update the local state', () => {
    renderedCampusInput.find('input').simulate('change', {
      target: { value: 'Another Campus Name' }
    })
    expect(campusInputInstance.state.name).to.equal('Another Campus Name')
  })
})

Мой компонент выглядит следующим образом:

export default class CampusInput extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: ''
    }
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange(evt) {
    // this line doesn't pass the spec :(
    this.setState({ [evt.target.name]: evt.target.value })

    // this passes the spec
    this.setState({ name: evt.target.value })   
  }
  render() {
    return (
      <div>
        <input
          name="name"
          type="text"
          onChange={this.handleChange}
          value={this.state.name}
        />
      </div>
    )
  }
}

Я могу его передать, только если жестко закодировать ключ в моем setState().Как я могу переписать спецификации так, чтобы они прошли, если я использую setState({[evt.target.name]: evt.target.vale})?

Answer 1

Во-первых, вы ожидаете, что имя входа будет равно его значению, во-вторых, вы не добавили ключ name к событию объекту.

Чтобы решить эту проблему, нам нужно добавить ключ имени к событию в вашем тесте:

renderedCampusInput.find('input').simulate('change', {
     target: { name:'name',value: 'Another Campus Name' }
})

и изменить метод ожидания равным 'name'

expect(campusInputInstance.state.name).to.equal('name')

также вы можете добавить ожидаемое значение ввода

expect(campusInputInstance.state.value).to.equal('Another Campus Name')

, но не забудьте добавить его в состояние компонента

  this.state = {
      name: '',
      value:'',
    }