[Jest] Button Component Test

Button 컴포넌트를 테스트하는 예시이다.

import styled from 'styled-components';

interface ButtonProps {
  readonly label: string;
  readonly backgroundColor?: string;
  readonly hoverColor?: string;
  readonly onClick?: () => void;
}

interface ContainerProps {
  readonly backgroundColor: string;
  readonly hoverColor: string;
}

const Container = styled.button<ContainerProps>`
  text-align: center;
  background-color: ${(props) => props.backgroundColor};
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  &:hover {
    background-color: ${(props) => props.hoverColor};
  }
  &:active {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.2);
  }
`;

const Label = styled.div`
  color: #fff;
  font-size: 16px;
`;

export default function Button({
  label,
  backgroundColor = '#304ffe',
  hoverColor = '#1e40ff',
  onClick,
}: ButtonProps) {
  return (
    <Container
      backgroundColor={backgroundColor}
      hoverColor={hoverColor}
      onClick={onClick}
      data-testid="parent">
      <Label>{label}</Label>
    </Container>
  );
};

참고하는 책에서는 노드에 직접 접근하지만, 내가 사용하는 버전은 그러지 말래서 data-testid를 추가했다.

import React from 'react';
import { render, screen } from '@testing-library/react';
import 'jest-styled-components';

import { Button } from 'Components/Button';

describe('<Button />', () => {
  it('render component correctly', () => {
    const { container } = render(<Button label="Button test" />);
    // 1
 	const label = screen.getByText('Button test');
    // 2
 	expect(label).toBeInTheDocument();
    //3
    const parent = screen.getByTestId('parent');
    // 4
    expect(parent).toHaveStyleRule('background-color', '#304ffe');
    expect(parent).toHaveStyleRule('background-color', '#1e40ff', {
      modifier: ':hover',
    });

    expect(container).toMatchSnapshot();
  });
});

1. 해당 텍스트가 담긴 컴포넌트를 찾는다.
2. 화면에 표시되어 있는지 확인한다.
3. 해당 testid를 가진 컴포넌트를 찾는다.
4. 기본 컬러 값을 설정해두었기 때문에, 그 값이 제대로 들어있는지 확인한다.

backgroundColor와 hoverColor는 옵셔널이므로 변경값을 대입해도 정상 동작하는지 확인한다.

// (...)
  it('change backgroundColor and hoverColor Props', () => {
    const backgroundColor = '#ff1744';
    const hoverColor = '#f01440';
    render(
      <Button label="Button test" backgroundColor={backgroundColor} hoverColor={hoverColor} />,
    );

    const parent = screen.getByTestId('parent');
    expect(parent).toHaveStyleRule('background-color', backgroundColor);
    expect(parent).toHaveStyleRule('background-color', hoverColor, {
      modifier: ':hover',
    });
  });

Button에 있는 onClick 이벤트는 Jest의 fireEvent를 사용한다.

// (...)
  it('clicks the Button', () => {
    // 1
    const handleClick = jest.fn();
    render(<Button label="Button test" onClick={handleClick} />);

    const label = screen.getByText('Button test');
    // 2
    expect(handleClick).toHaveBeenCalledTimes(0);
    // 3
    fireEvent.click(label);
    // 4
    expect(handleClick).toHaveBeenCalledTimes(1);
  });

1. Jset의 모의 함수(jest.fn())를 호출해 컴포넌트에 주입한다.
2. toHaveBeenCalledTimes(number)는 이벤트 실행 여부를 확인하는 함수이다. 숫자는 실행된 횟수를 의미한다. 여기서는 실행되지 않았음을 테스트한다.
3. fireEvent.click으로 클릭 이벤트를 발생시킨다.
4. 이벤트가 실행되었는지 확인한다.

참고
스무디 한 잔 마시며 끝내는 리액트 + TDD
Testing Library Docs