Reactjs 为什么我的onChange事件与mount组件不同？

我有一个简单的React包装器组件，它围绕着一个材质ui

TextField

。我试图使用enzyme和

模拟
来触发在我的组件中处理的底层文本字段上的事件，使用
浅层
和使用
装载
之间有一个我不理解的行为差异。当我尝试使用shallow或mount模拟
keyup
事件时，事件处理程序按预期运行。当我尝试模拟一个
change
事件时，挂载情况似乎没有发生任何变化，但在使用shallow时它似乎起作用

在下面的示例测试中，我希望看到两个事件处理程序的控制台输出，但在使用mount的情况下，我没有看到change事件的输出。我知道在这个特定的情况下我不需要在这里使用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
})



从“React”导入React
从“酶”导入{mount，shallow}
从“@material ui/core/TextField”导入TextField
const MyTextField=（道具：any）=>{
常量handleChange=（e:any）=>{
console.log（'in handleChange'）
}
常量handleKeyUp=（e:any）=>{
console.log（'in handleKeyUp'）
}
返回
}
它（'应该做点什么'，（）=>{
常量shallowRapped=shallow（）
shallowRapped.find（TextField.simulate（'keyup'，{}）/“in handleKeyUp”输出到控制台
shallowRapped.find（TextField）.simulate（'change'，{target:{value:'test'}}）/“in-handleChange”输出到控制台
常量mountWrapped=mount（）
mountWrapped.find（TextField.simulate（'keyup'，{}）/“in-handleKeyUp”输出到控制台
//下面这一行似乎不像我预期的那样有效。。。
mountWrapped.find（TextField.simulate（'change'，{target:{value:'test'}）//没有任何输出到控制台
})
根据来自Ezyme的信息，您需要提供一个模拟事件对象，该对象包含回调中使用的属性，而这些属性不包括在
事件中

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

it（'应该做点什么'，（）=>{
包装=安装（）；
wrapped.find（TextField.simulate（'keyup'，{}）；
wrapped.find（TextField.simulate（'change'，{target:{value:'test'}）；
});
谢谢你的建议，但仍然没有回电。我认为docs部分的意思是事件回调应该仍然发生，但是如果需要使用一些特定的参数，则需要传入它们。例如，使用simulate和Noreal参数调用keyup事件回调似乎很好。我现在编辑了这个问题以包括传入的事件参数。