[DOCS] 테스트코드 왜 사용하나요?

[sumin-dev]

📝 개요

트다(트레이닝 다이어리) 서비스에 테스트 코드를 도입하게 된 배경과 테스트코드의 개념 및 작성법에 대해 설명하겠습니다 🤓

📍 테스트 코드란?

• 테스트 코드(Test Code)는 소프트웨어의 기능과 동작을 테스트하는 데 사용되는 코드입니다.
• 소프트웨어 테스트는 소프트웨어의 결함을 찾아내고 수정하는 과정에서 매우 중요합니다.
• 테스트 코드는 개발자가 작성한 코드를 실행하고 예상된 결과가 나오는지 확인하는 데 사용됩니다.

📍 테스트 코드의 장점

• 테스트 코드를 작성하면 제품 안정성을 올려주고, 버그를 사전에 잡아줄 수 있습니다.
• 또한 개발자 간의 협업을 원활하게 하고, 소프트웨어를 유지 보수하는 데 필요한 문서화 작업을 줄일 수 있습니다.

좋아, 테스트 코드가 중요하고 좋은 건 알겠어 🧐 없어도 개발할 수 있잖아? 시간도 오래 걸리고 작성하기 귀찮은 테스트 코드를 왜 도입했어?

📍 테스트 코드를 도입하게 된 배경

• Github Flow 전략 선택

  • 트다 FE 팀은 Git branch 전략인 Git Flow와 Github Flow 중에서 Github Flow를 선택했습니다.
  • Github Flow는 Git Flow에 비해 규칙이 간단하여 불필요한 브랜치나 과정이 없습니다.
  • 단순하고 지속적이고 빠른 개발 및 배포에 유리하므로 작은 팀 또는 소규모 프로젝트에 적합합니다.
  • (트다 FE팀은 2명이고 한달짜리 프로젝트입니다 👥)
  • Agile하게 배포할 수 있는 것은 큰 장점이지만 Git Flow에 비해 테스트 및 검증 단계가 부족해 배포 안정성이 떨어질 수 있습니다.
  • 따라서, 컴포넌트 개발 단계부터 unit 테스트 코드를 작성하기로 결정했습니다.
  • 개발 초기에는 테스트 코드를 작성하는 데 걸리는 시간 때문에 개발 속도가 느릴 수 있지만,
  • 서비스가 복잡해질수록 이전에 테스트코드를 작성한 부분은 개발자가 직접 테스트하지 않아도 되므로 QA에 많은 시간을 아낄 수 있습니다.
  • (2명뿐인 트다 FE팀에 테스트코드라는 QA 전문 동료를 한명 두는 셈입니다 🧚)

• 주니어 개발자에게 선호되는 기술

  • 아래 그래프는 원티드의 주니어 프론트엔드 개발자 채용 공고 30개를 분석한 결과입니다.
  • 언어나 주요 프레임워크, Git을 제외하면 테스팅 관련 기술이 가장 선호되는 것을 알 수 있습니다.
  • 자격 요건 비중은 크지 않지만, 이에 관한 이해도가 있거나 사용할 줄 안다면 충분히 강점이 될 수 있습니다.
  • 출처: [요즘IT] 프론트엔드 개발자가 알아야 할 유닛테스트 작성법
  • 

📍 테스트 코드 작성법

• 라이브러리 선택: Jest, React Testing Library

  • 트다 FE 팀은 테스팅 라이브러리를 2개 골랐습니다.
  • Jest는 테스트 코드를 실행하고 결과를 보고하는 테스트 러너이고,
  • React Testing Library는 테스트 러너가 아니라 테스트 코드 내에서 UI 컴포넌트를 테스트하는 데 도움을 주는 유틸리티 라이브러리입니다.
  • 위 라이브러리 2개는 택 1이 아니라 상호보완적인 기능을 제공합니다.

• 테스트 범위 선택: 단위 테스트(Unit Test), 통합 테스트(Integration Test)

  • 트다 FE 팀은 단위 테스트를 기본 원칙으로 정했지만, 시간이 되면 통합 테스트도 도입할 예정입니다.
  • 컴포넌트나 훅, 유틸 함수 등은 정확한 입력값과 출력값을 반환하는지 작은 단위로 분리하여 유닛 테스트를 진행하고,
  • 이후 컴포넌트들이 잘 조합된 라우트(페이지) 파일이 만들어지면 모듈 간 인터페이스 테스트를 할 수 있는 통합 테스트가 필요합니다.

• 상세한 테스트 코드 작성법은 잘 정리된 블로그 글로 대체 하겠습니다

  • [요즘IT] 가독성 좋은 테스트 코드를 작성하는 방법

• 필요한 패키지 설치

  • "@testing-library/dom"
  • "@testing-library/jest-dom"
  • "@testing-library/react"
  • "@types/jest"
  • "identity-obj-proxy"
  • "jest"
  • "jest-environment-jsdom"
  • "jest-svg-transformer"
  • "ts-jest"
  • "ts-node"

• package.json에 테스트 script 작성

  • "test": "jest"

• jest.setup.ts와 jest.config.ts 작성

  • 
  • 

• Button.tsx와 Button.test.tsx 작성

  • 
  • 

• 테스트 결과

  • 

[jeongminDev]

이렇게 세심하게 테스트 코드 도입 배경부터 작성법 까지 정리해주셔서 정말 큰 도움이 되었습니다. 특히, GitHub Flow 전략과 테스트 코드의 필요성에 대한 설명이 너무 명확해서 좋습니다!😊 무엇보다도, 직접 예시를 들어가며 설명해 주신 Button.tsx와 Button.test.tsx 작성법은 정말 유용했습니다. 실제로 작성해보니 테스트 코드가 어떻게 동작하는지 더 잘 이해할 수 있었습니다.

덕분에 저희 팀의 테스트 코드 도입이 성공적으로 진행될 수 있었습니다. 정말 감사드려요!.👍