Reactjs 单击<；tr标签

当单击事件位于tr标记内部时，不确定如何编写测试语句。在我的测试中使用笑话和酶

以下是单击事件：

<tr id = 'getContext-clicktest'onClick={this.editContext.bind(this, c)} key={c.ContextParameterId} className='user-table-row'>
   <td>{c.PARAMETER_TYPE.Name}</td>
   <td>{c.ParameterLabel}</td>
   <td>{c.Parameter}</td>
   <td>{c.PARAMETER_DATATYPE.Name}</td>
   <td>{c.Choices ? c.Choices : 'N/A'}</td>
</tr>

{c.PARAMETER_TYPE.Name}
{c.ParameterLabel}
{c.Parameter}
{c.PARAMETER_DATATYPE.Name}
{c.选择？c.选择：'N/A'}

下面是我如何设置我的测试文件， 使用mount而不是shallow来渲染我的组件

beforeEach(() => wrapper = mount(<ContextComponent {...baseProps} />));

it('should call getContext method on button click', () => {
 wrapper.setState({ 
   currentContext: {
   PARAMETER_TYPE:{
      ParameterTypeId:""
      },
  PARAMETER_DATATYPE:{
      DataTypeId:""
      },
},
 showEditContextModal: true,
});
wrapper.find('tr').find('#getContext-clicktest').simulate('click')
});

beforeach（（）=>wrapper=mount（））；
它（'应该在单击按钮时调用getContext方法'，（）=>{
wrapper.setState（{
当前上下文：{
参数类型：{
参数类型ID:“
},
参数\u数据类型：{
数据类型ID:“
},
},
showEditContextModal：正确，
});
wrapper.find（'tr'）.find（'getContext clicktest'）.simulate（'click'））
});

每次调用时都会创建一个新函数，因此每次组件呈现时都会创建一个新函数并将其绑定到

onClick

因此，无法直接监视

onClick

函数

…但是新函数将绑定到组件类原型上的函数，因此如果在组件呈现之前用spy包装原型函数，则

onClick

函数将绑定到spy

以下是一个简化的示例：

code.js

import*as React from'React'；
导出类TableComponent扩展了React.Component{
编辑（c）{}
render（）{
const{c}=this.props；
返回(
{c.name}
);
}
}

code.test.js

import*as React from'React'；
从“酶”导入{mount}；
从“./code”导入{TableComponent}；
让包装者，间谍；
在每个之前（（）=>{
editSpy=jest.spyOn（TableComponent.prototype，'edit'）；
包装器=mount（）
});
之后（（）=>{
editSpy.mockRestore（）；
})
它（'应该在单击按钮时调用getContext方法'，（）=>{
wrapper.find（“#clicktest”）.simulate（'click'）；
期望（editSpy）.tohaveBeenCall（）；//成功！
});

谢谢您抽出时间回答Brian，但我必须解决这个问题。得到2个我已经预料到的错误：TypeError:无法读取未定义的属性“mockRestore”和无法读取未定义的属性“isMockFunction”\n如果您要求测试事件冒泡（例如，确保即使单击

td

nested而不是

tr

，也会调用处理程序），那么到目前为止在Ezyme中是不可能的。或者这是一个如何测试一般点击处理程序的问题？我确实知道如何测试一些点击处理程序，但我从来没有在td或tr上测试过。所以现在我知道这是不可能的，当有一个