用酶法检测react-intl onChange

Question

我的react应用程序中有一个下拉按钮组件，可以让我更改语言

我的localeDropDown.js

import React from 'react'
import PropTypes from 'prop-types'
import Cookie from 'js-cookie'

const propTypes = {
  locale: PropTypes.string.isRequired
}

class LocaleDropDown extends React.Component {
  constructor () {
    super()
    this.state = {value: ''}
    this.handleLocaleChange = this.handleLocaleChange.bind(this)
  }

  handleLocaleChange (e) {
    Cookie.set('locale', e.target.value)
    window.location.reload()
  }

  componentDidMount () {
    this.setState({inputValue: Cookie.get('locale')})
  }

  render () {
    return <div>
      <select id="locale-value" onChange={this.handleLocaleChange} value={this.state.inputValue}>
        <option value="en">English</option>
        <option value="fr">French</option>
      </select>
    </div>
  }
}

LocaleDropDown.propTypes = propTypes

export default LocaleDropDown

我的测试结果是

      const handleLocaleChange = sinon.spy();
      const wrapper = shallow(<LocaleDropDown onChange = {handleLocaleChange}/>)
      const selectInput = wrapper.find("#locale-value")
      selectInput.node.value = 'en'
      wrapper.find('select').simulate('change', selectInput);
      expect(handleLocaleChange.called).toEqual(true)

但它给出了错误LocaleDropDown >在模拟更改时，应该调用handleLocaleChange

TypeError: Cannot add property value, object is not extensible

我做错了什么？

Answer 1

像这样的mock event object can be passed along to simulate an event：

wrapper.find('select').simulate('change', { target: { value: 'en' } })

有关方法签名的更多详细信息：

.simulate(event，...args) => Self

模拟事件

参数

event (String)：需要模拟的事件名称

...args (任意可选)：将传递给事件处理程序的模拟事件对象。