Реакция машинописного теста на фермент не имитирует щелчок

Question

Я пытаюсь смоделировать нажатие на кнопку, но тест всегда заканчивается неудачей, и я понятия не имею, почему.Кажется, что энзим не может выбрать элемент DOM, чтобы вызвать щелчок по нему, потому что звонки всегда 0. Я использую энзим 3.7.0 и шутка 23.6.0

Button.tsx

import * as React from 'react';
import './button.scss';

export interface IButton {
  value: string;
  onClick: () => void;
}

class Button extends React.Component<IButton, {}> {
  render() {
    return (
      <div className="Button">
        <button id="btn" onClick={this.props.onClick} className="Button__btn" type="button">
          {this.props.value}
        </button>
      </div>
    );
  }
}

export default Button;

Button.test.tsx

import * as React from 'react';
import { shallow } from 'enzyme';
import Button  from './Button';

test.only('Button test', () => {
  const myMock = jest.fn();

  const mockedButton = shallow(<Button value="testvalue" onClick={() => myMock} />);
  console.log(mockedButton.debug());

  // Interaction demo
  expect(mockedButton.text()).toEqual('testvalue');

  mockedButton.find('button').simulate('click');
  mockedButton.find('.Button__btn').simulate('click');
  mockedButton.find('button.Button__btn').simulate('click');
  expect(myMock.mock.calls.length).toBe(0); // !! Should be 3 ?

  // Snapshot demo
  expect(mockedButton).toMatchSnapshot();
});

Однако созданный снимок может позволить мне выбрать нужный элемент (кнопку)

exports[`Button test 1`] = `
<div
  className="Button"
>
  <button
    className="Button__btn"
    onClick={[Function]}
  >
    testvalue
  </button>
</div>
`;

Answer 1

Причина заключается в следующем:

onClick={() => myMock}

Здесь вы описываете обработчик щелчков, который возвращает ваш макет вместо его вызова.Это должно быть onClick={() => myMock()} или лучше просто onClick={myMock}

вместо этого.Там Реакт позвонит вам myMock на .simulate('click')