点击 <tr 标记内的事件

Question

当点击事件位于 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>

这是我设置测试文件的方式，使用装载而不是浅表来渲染我的组件。

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')
});

Answer 1

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

因此，无法直接监视onClick功能...

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

下面是一个简化的示例：

代码.js

import * as React from 'react';
export class TableComponent extends React.Component {
  edit(c) { }
  render() {
    const { c } = this.props;
    return (
      <table>
        <tbody>
          <tr id='clicktest' onClick={this.edit.bind(this, c)} key={c.id}>
            <td>{c.name}</td>
          </tr>
        </tbody>
      </table>
    );
  }
}

代码测试.js

import * as React from 'react';
import { mount } from 'enzyme';
import { TableComponent } from './code';
let wrapper, editSpy;
beforeEach(() => {
  editSpy = jest.spyOn(TableComponent.prototype, 'edit');
  wrapper = mount(<TableComponent c={{ id: 1, name: 'one' }} />)
});
afterEach(() => {
  editSpy.mockRestore();
})
it('should call getContext method on button click', () => {
  wrapper.find('#clicktest').simulate('click');
  expect(editSpy).toHaveBeenCalled();  // Success!
});