Написание теста для функции, которая была вызвана по клику

Question

Я пытался написать несколько тестов для построенного мной компонента реагирования. Компонент по существу передает значения в свой контейнер при нажатии определенной кнопки (которая является другим компонентом)

import PropTypes from 'prop-types';
import Button from '../../common/components/Button';
import Input from '../../common/components/Input';
import classNames from 'classnames';

class AddNewCellInputs extends React.Component {

  state = { value: '', shortName: '' }

  onChange = (e) => {
    let value = e.target.value;
    this.setState({ value: value })
  }

  onShortNameChange = (e) => {
    let shortName = e.target.value;
    this.setState({ shortName: shortName })
  }

  onAddCellSubmit = () => {
    const { value, shortName } = this.state
    this.props.onAddCellSubmit(shortName, value)
    this.setState({ value: '', shortName: '' })

  }


  render() {
    const { active, onNewCellClick } = this.props;
    const { value, shortName } = this.state
    return (
      <form className={classNames('csm__add-cell-form ', { 'active': active })}>
        <h3>Enter Cell Name</h3>
        <Input type="text" className="csm-modal-form__text-input" value={value} onChange={(e) => this.onChange(e)} />
        <Input type="text" className="csm-modal-form__text-input" value={shortName} onChange={(e) => this.onShortNameChange(e)} />

        <div className="csm__add-cell-form--button-container">
          <Button buttonClass="button-primary csm__button-add-cell" handleClick={() => this.onAddCellSubmit(shortName, value)} text="Add Cell" />
          <Button buttonClass="button-primary cancel" handleClick={onNewCellClick} text="Cancel" />
        </div>
      </form>
    );
  }

}

export default AddNewCellInputs;

};

Вот тест

it('renders Call the addCellubmitMethod on lick of hte add-cell button', () => {
  const props = {
    active: true,
    onAddCellSubmit
  };
  let wrapper = mount(<AddNewCellInputs {...props} />);
  const onAddCellSubmit = jest.fn();
  wrapper.find('button').first().simulate('click');
  expect(onAddCellSubmit).toHaveBeenCalled();

});

Это ошибка, которую я получаю

Uncaught [Ошибка типа: _this.props.onAddCellSubmit не является функцией].

Я новичок в тестировании, так что прости меня, если я делаю что-то совершенно не так

Answer 1

Вы можете попробовать вот так ....

it('renders Call the addCellubmitMethod on lick of hte add-cell button', () => {
  const props = {
    active: true,
    onAddCellSubmit
  };
  let wrapper = mount(<AddNewCellInputs {...props} />);
  const onAddCellSubmitSpy = jest.spyOn(wrapper.instance(),'onAddCellSubmit');
  wrapper.find('button').first().prop('handleClick')();
  expect(onAddCellSubmitSpy).toHaveBeenCalled();
});