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 键添加到 event 对象。 / p>

为了解决这个问题，我们需要在测试中的事件中添加名称键：

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

，然后将Expect方法更改为等于“名称”

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

您还可以添加输入的期望值

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

但不要忘记将其添加到组件状态

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

使用`evt.target.name`测试本地状态不起作用

1 个答案: