событие click внутри тега <tr

Question

Не совсем уверен, как написать оператор теста, когда событие click находится внутри тега tr

.Использование Jest и Enzyme для моих тестов

Вот событие click:

<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>

Вот как я настраиваю свой тестовый файл, используя mount вместо мелкого для визуализации моих компонентов.

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 будет привязана к вашему шпиону.

Вот упрощенный пример:

code.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>
    );
  }
}

code.test.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!
});