TDD

2023. 5. 7. 01:49·프론트엔드/테스트

TDD란?

Test Driven Development

테스트 코드 작성 후 그 테스트 코드를 Pass 할 수 있는 실제 코드를 작성

장점

  • 많은 기능 테스트하기에 소스 코드에 안정감
  • 디버깅 시간 줄어들고 실제 개발 시간 줄어듬
  • 깨끗한 코드

방법

  1. 기능 하나에 대한 테스트 코드 작성
  2. 해당 테스트 코드 통과하도록 코드 작성
  3. 1~2 반복

예시

  1. 기능 하나에 대한 테스트 코드 작성
it('counter starts at 0', () => {
    render(<App />)
    const counter = screen.getByTestId('counter') // 임시로 testid 사용, getByRole을 되도록이면 쓰자
    expect(counter).toHaveTextContent('0')
})
  1. 해당 테스트 코드 통과하도록 코드 작성
function App() {
  const [count, setCount] = useState(0)
  return (
    <div className="App">
      <p data-testid="counter">{count}</p> 
    </div>
  )
}
  1. 1~2 반복
저작자표시 (새창열림)

'프론트엔드 > 테스트' 카테고리의 다른 글

React 테스트 방법  (0) 2023.05.07
React 테스트 기초 (사용 툴, 환경 설정)  (1) 2023.05.07
'프론트엔드/테스트' 카테고리의 다른 글
  • React 테스트 방법
  • React 테스트 기초 (사용 툴, 환경 설정)
정현우12
정현우12
  • 정현우12
    정현우의 개발 블로그
    정현우12
  • 전체
    오늘
    어제
    • 분류 전체보기 (80) N
      • 프론트엔드 (56)
        • JavaScript, TypeScript (12)
        • 스타일링 (1)
        • React (13)
        • Next.js (4)
        • 개발 환경 (9)
        • 테스트 (3)
        • 성능 최적화 (11)
        • 함수형 프로그래밍 (2)
        • 구조 (1)
      • 프로젝트 회고 (24) N
        • 이미지편집기 개발 (7)
        • 엑셀 다운로드, 업로드 공통 모듈 개발 (4)
        • 사용자 매뉴얼 사이트 개발 (3)
        • 통계자동화 솔루션 개발 (1)
        • 엑셀 편집기 개발 (5)
        • API 플랫폼 (1)
        • 콜센터 솔루션 OB 캠페인 (1)
        • AI 스튜디오 (1)
        • AI 워크플로우 저작도구 (1) N
      • 백엔드 (0)
  • 블로그 메뉴

    • 홈
    • 포트폴리오
    • 태그
  • 인기 글

  • 태그

    이미지 편집기
    렌더링 성능 최적화
    엑셀 에디터
    React-boilerplate
    엑셀
    사용자 매뉴얼 사이트
    memoization
    React
    Next.js
    webpack
    웹 성능 최적화
    라이브러리 선정
    회고
    커스텀 훅
    성능 최적화
    로딩 성능 최적화
    JavaScript
    useReducer
    Github Actions
    TypeScript
  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
정현우12
TDD
상단으로

티스토리툴바