Слушайте onClick с энзимом

Question

Я хочу заявить, что при нажатии отключенной кнопки ее событие onClick не вызывается.Как мне сделать это с ферментом?Пожалуйста, смотрите пример кода ниже.Спасибо!

sampleButton.jsx:

import React from 'react';

const SampleButton = () => (
  <button
    disabled={true}
    onClick={() => console.log('You clicked me!')}
    test-attr="button"
    type="button"
  >
    Click Me
  </button>
);

export default SampleButton;

sampleButton.test.jsx:

import React from 'react';
import { shallow } from 'enzyme';
import SampleButton from './sampleButton';

test('cannot click button if disabled', () => {
  const wrapper = shallow(<SampleButton />);
  const button = wrapper.find('[test-attr="button"]');
  button.simulate('click');
  // assert that `onClick` has not been fired
});

Answer 1

Нет необходимости проверять это.Опора disabled является частью базового HTML, поэтому, проверяя его, вы просто проверяете, работает ли HTML button (и вы можете верить, что он работает).Лучшим тестом может быть проверка того, что disabled реквизит установлен на true в условиях, которые вы пытаетесь протестировать.

Тем не менее, один из способов сделать это - ввести ваш onClickв SampleButton через props, например:

const SampleButton = ({ onClick }) => (
  <button
    disabled={true}
    onClick={onClick}
    test-attr="button"
    type="button"
  >
    Click Me
  </button>
);

Затем вы можете проверить это так:

test('cannot click button if disabled', () => {
  // Set up a mock function that allows you to make assertions
  const mockOnClick = jest.fn();
  // Pass it into SampleButton
  const wrapper = shallow(<SampleButton onClick={mockOnClick} />);
  const button = wrapper.find('[test-attr="button"]');
  button.simulate('click');
  // Make assertions
  expect(mockOnClick).not.toHaveBeenCalled();
});