[Jest] Input Component Test

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

import styled from 'styled-components';

interface InputProps {
  readonly placeholder?: string;
  readonly onChange?: (text: string) => void;
  readonly value?: string;
}

const InputBox = styled.input`
  flex: 1;
  font-size: 16px;
  padding: 10px 10px;
  border-radius: 8px;
  border: 1px solid #bdbdbd;
  outline: none;
`;

export const Input = ({ placeholder, onChange, value }: InputProps) => {
  return (
    <InputBox
      placeholder={placeholder}
      value={value}
      onChange={(e) => {
        if (typeof onChange === 'function') {
          onChange(e.target.value);
        }
      }}
    />
  );
};

나는 그냥 ChangeEvent를 넘겨서 해결했는데, 책에서는 굳이 이벤트 객체를 다 받을 필요없이 text 값만 받아오는 식으로 onChange를 처리했다. 이벤트 객체의 다른 프로퍼티를 사용할 일이 없다면 이게 더 효율적인 것 같다.

다음은 테스트 명세이다.

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

import { Input } from 'Components/Input';

describe('<input />', () => {
  it('render component correctly', () => {
    const { container } = render(<Input value="default value" />);
    // 1
    const input = screen.getByDisplayValue('default value');
    // 2
    expect(input).toBeInTheDocument();

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

1. 해당 값이 매칭되는 input, textarea, select 요소를 찾는다.
2. 화면에 표시되어 있는지 확인한다.

placeholder 테스트 명세이다.

// (...)
  it('renders placeholder correctly', () => {
    const { container } = render(<Input placeholder="default placeholder" />);
    // 1
    const input = screen.getByPlaceholderText('default placeholder');
    expect(input).toBeInTheDocument();

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

1. placeholder 속성을 가진 모든 요소 중 해당 텍스트와 매치되는 요소를 찾는다.

// (...)
 it('changes the data', () => {
    render(<Input placeholder="default placeholder" />);
    // 1
    const input = screen.getByPlaceholderText('default placeholder') as HTMLInputElement;
    // 2
    fireEvent.change(input, { target: { value: 'study react' } });
    // 3
    expect(input.value).toBe('study react');
  });

1. getByPlaceholderText로 찾은 요소는 기본적으로 HTMLElement 타입이기 때문에 as(assertion, 타입 단언)을 통해 HTMLInputElement으로 변환한다.
2. fireEvent.change를 통해 input 요소에 값을 입력한다.
3. input의 값이 기댓값과 일치하는지 확인한다.

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