React コンポーネントのテストを書く時に考えることと、テストコードサンプル

interface Props {
  className?: string;
  isDisabled?: boolean;
  isSmall?: boolean;
  onClick?: () => void;
  label: string;
}

const SomethingButton: FC<Props> = ({
  className,
  isDisabled,
  isSmall,
  onClick,
  label,
}) => {
  const classes = classNames(
    css.SomethingButton,
    { [css.isSmall]: isSmall },
    className,
  );
  return (
    <button
      className={classes}
      disabled={isDisabled}
      onClick={onClick}
      type="button"
    >
      {label}
    </button>
  );
};

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

import SomethingButton from '../SomethingButton';

describe('<SomethingButton />', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<SomethingButton label="button label" />);
    expect(wrapper).toMatchSnapshot();
  });
});

describe('onClick', () => {
  it('should calls', () => {
    const mockOnClick = jest.fn();
    const wrapper = shallow(
      <SomethingButton label="button label" onClick={mockOnClick} />,
    );
    wrapper.simulate('click');
    expect(mockOnClick).toHaveBeenCalled();
  });
});

describe('with [disabled=true]', () => {
  it('should have `disabled` attribute', () => {
    const wrapper = shallow(
      <SomethingButton label="button label" isDisabled={true} />,
    );
    expect(wrapper.find('.SomethingButton').prop('disabled')).toBeTruthy();
  });
});

describe('with [isSmall=true]', () => {
  it('should have `.isSmall`', () => {
    const wrapper = shallow(
      <SomethingButton label="button label" isSmall={true} />,
    );
    expect(wrapper.find('.SomethingButton').hasClass('isSmall')).toBeTruthy();
  });
});