🔍 테스트 코드 필요성
- 테스트는 코드를 작성한 후, 의도한 대로 작동하는지 확인하기 위해 사용하는 도구
- 이를 통해 코드의 신뢰성과 유지보수성을 향상
- 초보자에게 가장 중요한 점은 수동으로 확인하지 않아도 코드의 품질을 자동으로 검증할 수 있다는 점
🧪 테스트 코드 예제1
1️⃣ Title 컴포넌트
전체 코드
import { render, screen } from '@testing-library/react';
import Title from './Title';
import { BookStoreThemeProvider } from '../../../context/themeContext';
describe('Title component Test', () => {
it('check render', () => {
render(
<BookStoreThemeProvider>
<Title size='large'>Title</Title>
</BookStoreThemeProvider>,
);
expect(screen.getByText('Title')).toBeInTheDocument();
});
it('size props application', () => {
const { container } = render(
<BookStoreThemeProvider>
<Title size='large'>제목</Title>
</BookStoreThemeProvider>,
);
expect(container?.firstChild).toHaveStyle({ fontSize: '2rem' });
});
});🔍분석
첫 번째 테스트: 렌더링 확인
it('check render', () => {
render(
<BookStoreThemeProvider>
<Title size='large'>Title</Title>
</BookStoreThemeProvider>,
);
expect(screen.getByText('Title')).toBeInTheDocument();
});-
it: 하나의 테스트 단위를 정의
- 여기서는 'check render'라는 이름의 테스트를 작성
-
render 호출
- BookStoreThemeProvider로 Title 컴포넌트를 감싸서 렌더링합니다.
- size='large'라는 속성과 텍스트 "Title"을 전달합니다.
-
screen.getByText
-
화면에서 텍스트가 "Title"인 요소를 검색
-
expect(...).toBeInTheDocument()는 요소가 DOM에 존재하는지 확인
-
📝 toBeInTheDocument란?
- toBeInTheDocument는 Jest의 Matcher 중 하나
- @testing-library/jest-dom에서 제공하는 DOM 요소 검증을 위한 메서드
- 주로 특정 요소가 DOM에 존재하는지 확인할 때 사용
-
📝 toBeInTheDocument의 역할
- 테스트 대상이 DOM 안에 존재하는지 확인하여, 존재 여부를 검증
- 성공 조건: 요소가 DOM에 존재하면 테스트가 통과
- 실패 조건: 요소가 DOM에 없으면 테스트가 실패
-
-
두 번째 테스트: size 속성 확인
it('size props application', () => {
const { container } = render(
<BookStoreThemeProvider>
<Title size='large'>제목</Title>
</BookStoreThemeProvider>,
);
expect(container?.firstChild).toHaveStyle({ fontSize: '2rem' });
});
-
container 사용
- render 함수는 렌더링 결과를 container라는 속성으로 반환
- 이는 렌더링된 DOM의 루트 요소를 나타냄.
-
toHaveStyle
- firstChild(첫 번째 자식 요소)에 fontSize: '2rem' 스타일이 적용되었는지 확인
- size='large' 속성이 제대로 작동하는지를 검증
🧪 테스트 코드 예제2
2️⃣ InputText 컴포넌트
전체 코드
import { render, screen } from '@testing-library/react';
import Title from './Title';
import { BookStoreThemeProvider } from '../../../context/themeContext';
describe('Title component Test', () => {
it('check render', () => {
render(
<BookStoreThemeProvider>
<Title size='large'>Title</Title>
</BookStoreThemeProvider>,
);
expect(screen.getByText('Title')).toBeInTheDocument();
});
it('size props application', () => {
const { container } = render(
<BookStoreThemeProvider>
<Title size='large'>제목</Title>
</BookStoreThemeProvider>,
);
expect(container?.firstChild).toHaveStyle({ fontSize: '2rem' });
});
});
🔍분석
첫 번째 테스트: 렌더링 확인
it('check render', () => {
render(
<BookStoreThemeProvider>
<InputText placeholder='여기에 입력하세요' />
</BookStoreThemeProvider>,
);
expect(screen.getByPlaceholderText('여기에 입력하세요')).toBeInTheDocument();
});getByPlaceholderText
- placeholder='여기에 입력하세요'인 입력 필드를 DOM에서 검색합니다.
- 이를 통해 placeholder 속성이 제대로 설정되었는지 확인합니다.
두 번째 테스트: ref 전달 확인
it('forwardRef Test', () => {
const ref = React.createRef<HTMLInputElement>();
render(
<BookStoreThemeProvider>
<InputText placeholder='여기에 입력하세요' ref={ref} />
</BookStoreThemeProvider>,
);
expect(ref.current).toBeInstanceOf(HTMLInputElement);
});-
React.createRef
-
ref 객체를 생성
-
ref.current를 통해 InputText의 실제 DOM 노드에 접근 가능
📝 React.createRef()란?
- React.createRef()는 특정 HTML 요소나 React 컴포넌트를 직접 찾아서 조작하고 싶을 때 사용
- ref.current는 실제로 화면에 렌더링된 요소를 가리킴
- 초기에는 null이고, 컴포넌트가 렌더링되면 ref.current에 진짜 DOM 요소가 할당.
-
🧪 테스트 코드 예제3
3️⃣ Button 컴포넌트
전체 코드
import { render, screen } from '@testing-library/react';
import Button from './Button';
import { BookStoreThemeProvider } from '../../../context/themeContext';
describe('Button component Test', () => {
it('check render', () => {
render(
<BookStoreThemeProvider>
<Button size='large' schema='primary'>
Button Test
</Button>
</BookStoreThemeProvider>,
);
expect(screen.getByText('Button Test')).toBeInTheDocument();
});
it('size props application', () => {
const { container } = render(
<BookStoreThemeProvider>
<Button size='large' schema='primary'>
Button Test
</Button>
</BookStoreThemeProvider>,
);
expect(screen.getByRole('button')).toHaveStyle({
fontSize: '1.5rem',
});
});
});🔍분석
첫 번째 테스트: 렌더링 확인
it('check render', () => {
render(
<BookStoreThemeProvider>
<Button size='large' schema='primary'>Button Test</Button>
</BookStoreThemeProvider>,
);
expect(screen.getByText('Button Test')).toBeInTheDocument();
});-
Button 컴포넌트 렌더링
- size='large'와 schema='primary' 속성을 가진 버튼입니다.
- "Button Test"라는 텍스트를 포함합니다.
-
getByText로 확인
- 화면에서 "Button Test"라는 텍스트를 가진 요소가 DOM에 존재하는지 테스트
두 번째 테스트: size 속성 확인
it('size props application', () => {
const { container } = render(
<BookStoreThemeProvider>
<Button size='large' schema='primary'>Button Test</Button>
</BookStoreThemeProvider>,
);
expect(screen.getByRole('button')).toHaveStyle({
fontSize: '1.5rem',
});
});-
getByRole('button')
- 역할이 "button"인 요소를 검색합니다.
-
toHaveStyle로 스타일 확인
- fontSize: '1.5rem'이 적용되었는지 확인합니다.
- 이는 size='large' 속성이 올바르게 적용되었는지 검증합니다
