TypeScript Jest @React testing library로 간단한 테스트해보기

React Testing Library

React Testing Library는 Behavior Driven Test(행위 주도 테스트) 방법론이 대두 되면서 함께 주목 받기 시작한 테스팅 라이브러리. 기존의 관행이던 Implementation Driven Test(구현 주도 테스트)의 단점을 보완하기 위한 방법론.

구현 주도 테스트는 주로 애플리케이션이 어떻게 작동하는지에 대해서 테스트.

반면에 행위 주도 테스트는 사용자가 애플리케이션을 이용하는 관점에서 사용자의 실제 경험을 위주로 테스트. 사용자 입장에서 .. 사용자에게 어떤 컨텐츠가 보이고, 어떤 이벤트를 발생시켰을 대 그에 따라 화면에 변화가 일어나는지를 테스트.

Enzyme vs React Testing Library

Enzyme은 구현 주도 테스트를 따르는 테스트를 작성하기에 적합. 실제 브라우저 DOM이 아닌 React가 만들어내는 가상 dom을 기준으로 테스트를 작성. 따라서 테스트 대상 React 컴포넌트에 어떤 prop이 넘어가고, 현재 state가 어떻게 되는지에 대해서 검증하기에 용이

React-testing Library는 행위 주도 테스트를 따르는데 적합. jsdom을 통해 실제 브라우저 DOM을 기준으로 테스트를 작성. 따라서 어떤 React 컴포넌트를 사용하는지는 의미가 없으며, 결국 사용자 브라우저에서 렌더링하는 실제 html의 마크업의 모습이 어떤지에 대해서 테스트하기 용이

components/ButtonItem.tsx

import React from 'react';

interface ButtonItemProps {
  title? string;
	handler?: () => void
}

function ButtonItem({ title, handler }: ButtonItemProps) {
  return (
    <button onClick={handler} >
      {title}
    </button>
  );
}

export default ButtonItem;

tests/ButtonItem.test.tsx

import * as React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
import ButtonItem from '../components/ButtonItem';

describe('Buttomitem TEST', () => {
  test('Buttomitem Rendering TEST ', () => {
    const { container } = render(<ButtonItem title={'제목'} handler={() => {}} />);

    expect(container).toHaveTextContent('제목'); // Dom안에 '제목'이라는 Text가 있는지 확인
    expect(container).not.toBeEmptyDOMElement(); // 빈 Dom이 아닌지 확인 등의 테스트를 할 수 있다.
  });
});