React에서 Test Code 작성하기

정윤숙·2023년 9월 16일

TIL

목록 보기

183/192

📒 오늘의 공부

React에서 Test Code 작성하기

1. Test code를 작성해야 하는 이유

Test Code: 소프트웨어의 각 기능이 의도대로 작동하는지 확인하기 위해 사용되는 코드
장점
- 버그 예방: 버그를 사전에 발견하고 예방 가능
- 소프트웨어 기능 문서화: 각 기능이 어떻게 작동해야 하는지 정의하기 때문에 코드의 유지 보수를 도울 뿐만 아니라 새로운 개발자가 코드를 이해하고 수정하는 데 도움이 됨
- 리팩토링 지원: 테스트 코드가 있으면 코드 변경 후에도 기능이 정상적으로 작동하는지 확인 가능
- 자동화된 테스트: 특정 기능 또는 컴포넌트의 동작을 자동으로 검증할 수 있기 때문에 개발자가 수동으로 웹 페이지에서 버튼을 누르는 등의 작업을 하지 않아도 됨

2. Jest

JavaScript 테스트 프레임워크
Jest 공식문서
설치
npm i -D jest
package.json 설정
- 터미널에서 npm test 명령어를 통해 test 파일 실행 가능
- 모든 test 파일이 실행되기 때문에 특정한 test 파일만 실행하고 싶은 경우 npm test 파일명(OR 경로)

기본 Test code 작성
- 1. 함수 만들기
  - sum.js 파일 생성
- 1. 파일(함수)이름.test.js 생성
  - sum.test.js 파일 생성
- 1. 터미널에 npm test 입력

3. Test Matcher

테스트 프레임워크에서 제공하는 함수나 도구로, 코드의 동작을 검증하고 예상 결과와 실제 결과를 비교하는 데 사용
주로 테스트 코드 내에서 expect 함수와 함께 사용되며, expect 함수를 통해 예상 결과를 정의하고 테스트 매처를 사용하여 실제 결과와 비교
- expect(1+2).toBe(3)

일반적으로 사용되는 matcher

toBe()
- 두 값이 정확히 같은지 확인
- 값이 다른 지 확인할 땐 not을 추가해서 사용
  =>expect(a + b).not.toBe(0)
- 객체, 배열 비교의 경우 toEqual() 사용
toEqual()
- 객체나 배열의 내용이 동일한지 확인
toContain()
- 배열이나 문자열에 특정 요소나 문자열이 포함되어 있는지 확인
toMatch()
- 문자열이나 배열이 주어진 정규 표현식과 일치하는지 확인
toBeTruthy() 및 toBeFalsy()
- 값이 참(true) 또는 거짓(false)인지 확인
- toBeTruthy()의 경우 값이 true 일때 test 통과
- toBeFalsy()의 경우 값이 false 일때 test 통과
Jest matchers : 더 많은 matcher 확인 가능

4. React에서 Test code 작성하기

React에서는 따로 Jest를 설치할 필요가 없다.
- npx create-react-app my-app 명령어로 react 프로젝트 생성 시 package.json에 React Testing Library가 설치된 것 확인 가능
- 만약 설치되어 있지 않다면 아래 명령어를 통해 설치:
  npm install --save-dev @testing-library/jest-dom
React Testing Library: Jest와 함께 사용하여 React 컴포넌트를 테스트하는 데 도움을 주는 라이브러리
React Testing Library 공식문서
testing-library/jest-dom github : Custom matchers 예시 코드 확인 가능
React로 간단한 TodoList 웹을 만들고 Test code 작성하기
- Test code
Import
- toBeInTheDocument()와 같은 custom matcher를 사용하기 위해 아래 코드 추가
  import "@testing-library/jest-dom/extend-expect";
- {render, screen, fireEvent}: React 컴포넌트의 상태와 동작을 테스트할 수 있는 함수와 객체로 render 함수로 컴포넌트를 렌더링하고,screen 객체로 DOM 요소를 선택하며, fireEvent 함수로 이벤트를 발생시켜 테스트 케이스를 작성
  - render 함수: React 컴포넌트를 가상 DOM(Virtual DOM)에 렌더링하고 렌더링된 컴포넌트에 대한 테스트 환경을 설정
  - screen 객체: 렌더링된 컴포넌트에서 DOM 요소를 찾고 상호작용하는 데 사용
    => screen.getByText(), screen.getByRole(), screen.queryByText() 등과 같은 메서드를 사용하여 DOM 요소를 선택하고 검사
  - fireEvent 함수: DOM 요소에서 이벤트를 발생시키는 데 사용
    => fireEvent.click(buttonElement)는 특정 버튼을 클릭하는 것처럼 동작
    => fireEvent.change(inputElement, { target: { value: 'New Value' } })는 사용자가 입력 필드에 새로운 값을 입력하는 것처럼 동작
Test code
- describe 함수로 테스트 케이스를 그룹화
- it 함수로 각각의 테스트 케이스를 정의
Test code 상세
- 3개의 테스트 케이스 중 "add 버튼 클릭 시 todo 추가" 케이스로 "add 버튼 클릭 시 todo 추가" 동작이 정확하게 동작하는지를 테스트
  
  ① TodoList 컴포넌트를 화면에 렌더링
  ② 화면에서 "Add a new todo"라는 플레이스홀더 텍스트를 가진 입력 필드와 "Add"라는 버튼 요소를 찾음(test에서 사용 될 요소)
  ③ 입력 필드에 가상의 텍스트 "New Task"를 입력하는 시뮬레이션을 수행
  => 사용자가 입력 필드에 값을 입력한 것과 유사한 동작
  ④ "Add" 버튼을 클릭하는 시뮬레이션을 수행
  => 사용자가 버튼을 클릭한 것과 유사한 동작
  ⑤ 특정 텍스트 "New Task"가 화면에 나타나는지를 검증
  => 해당 텍스트가 화면에 표시된다면, 새로운 할 일이 성공적으로 추가되었음을 의미
npm test로 test 파일 실행

개인적으로 느낀 장단점

장점
- 자동화 테스트의 편리함: 직접 text를 입력하고 버튼을 누르며 확인하지 않아도 기능이 잘 동작하는지 확인 가능
- 기능의 문서화: 해당 코드가 어떤 기능을 수행하고 어떻게 동작해야 하는지 파악 가능
단점
- 러닝 커브 有: 테스트 프레임워크와 매처(matcher)에 대한 학습 필요
- test code 또한 유지보수가 필요: 코드 수정 시 테스트 코드도 함께 수정해야 하므로 추가적인 유지보수 작업이 필요
결론
- test code를 작성함으로써 코드를 작성할 때 한 번 더 생각할 수 있고 논리적인 오류나 예상치 못한 동작을 미리 확인할 수 있다. 특히 복잡한 기능의 경우 test code의 자동화 테스트 및 문서화 장점이 더 두드러질 것 같다.