React TDD - 간단한 컴포넌트 테스트

목차

• 서론
• Hello 컴포넌트 소개
• Hello 컴포넌트 테스트
• 결론
• 참고

서론

이번 포스팅에서는 간단하게 컴포넌트를 테스팅하는 방법에 대해 알아보겠습니다.

Hello 컴포넌트 소개

간단하게 Hello 컴포넌트를 정의해보겠습니다.

export default function Hello({ name }) {
  if (name) return <h1>Hello, {name}.</h1>;
  else return <h1>Hey, stranger!</h1>;
}

props로 name을 받으면 Hello, {name}, name이 없다면 Hey, stranger!를 출력합니다.

Hello 컴포넌트 테스트

이제 한번 테스트 해볼까요?

import React from 'react';
import { render } from '@testing-library/react';

import Hello from '../components/Hello';

it('name이 없을때 -> Hey, stranger! 출력', () => {
  const {container} = render(<Hello />);
  expect(container.textContent).toBe('Hey, stranger!');
});

it('name이 있을때 -> Hello, name. 출력', () => {
  const {container} = render(<Hello name={'eddie'} />);
  expect(container.textContent).toBe('Hello, eddie.');
});

결론

오늘은 이렇게 간단하게 컴포넌트를 테스트하는 방법에 대해 알아봤습니다. 다음 포스팅에서는 데이터를 불러오는것을 mock 해보겠습니다.

참고

• @testing-library/react