1. Test
내가 작성한 코드가 잘 작동하는지 검증하는 작업. 의도대로 잘 동작하는지 직접 일일히 마우스로 클릭하고, 키보드로 입력하여 확인할 수 있지만 모든 기능을 다 확인하는것은 사실상 어려움.(모든 기능 작성 및 테스트 완료 후 수정사항이 생길때마다 test를 해야 함) 따라서, 테스트 자동화가 필요함.
2. Testing Trophy
Static Test
정적인 테스트로 ESLint와 같이 오타를 수정하거나, TypeScript와 같이 타입을 올바르게 쓸 수 있게 해주는 도구로 테스트한다.
Unit Test
Unit Test는 작은 단위로 작성이 된다. 예를 들어
- 컴포넌트(UI)가 잘 렌더링된다.
- 특정 이벤트가 발생하면 특정 함수가 실행되고, 우리가 원하는 형태로 바뀐다.
등이 있다. 하지만, 아래와 같이 작은 단위에서는 잘 동작하더라도 전체적으로 잘 동작한다는 보장은 없다.
Integrated Test
기능들이 전체적으로 잘 동작하는지 확인하기 위해 사용하는 test이다. 예를 들어
- 여러 컴포넌트(UI)가 잘 렌더링되고, 서로 상호작용을 한다.
- DOM에 특정 이벤트가 발생했을때, 우리의 UI에 원하는 변화가 잘 발생한다.
E2E(End to End) Test
브라우저 위에서 정상적으로 작동하는지 사용자 시나리오 기반으로 테스트하는 방법이다. UI조작 등을 테스트할 수 있고, 라이브러리로는 Cypress가 있다.
3. TDD(Test Driven Development)
소프트웨어 개발 방법론중 하나로 "테스트 주도 개발"의미. 코드를 작성하기 전에 먼저 실패하는 테스트를 작성하고, 이 테스트를 통과하는 코드를 작성 후에, 리팩토링하는 방식으로 진행. 장점으로는 시나리오가 명확하고 문제를 먼저 정의한 뒤에 해답을 찾아 가기 때문에 더 분명한 코드를 작성할 수 있게 된다.
TDD는 실패 -> 성공 -> 리팩토링의 과정을 반복한다.
- 실패: 문제를 정의하는 단계로 테스트코드를 실제 코드보다 먼저 작성한다.
- 성공: 문제를 해결하는 단계로, 테스트를 통과할 수 있는 최소한의 코드를 작성한다.
- 리팩토링: 최소한의 코드를 효율적으로 개선한다.
4. React Testing Library
테스팅 라이브러리 중 하나로, DOM위주로 기능에 초점을 맞춘, 사용자 관점에서 테스트를 진행한다.
로그인 페이지 테스트 코드 적용(UI 및 버튼 활성화 테스트)
위와 같이 이메일형식과 8자리 이상의 비밀번호를 받으면 아래와 같이 버튼이 활성화가 되어 클릭할 수 있는 form이 있다. 먼저, 버튼 비활성화에 대한 테스트를 진행한다고 하면 아래와 같이 코드를 작성할 수 있다.
1. LoginForm 컴포넌트 render
2. test할 요소인 email, password, button 변수 선언
3. 첫 렌딩페이지 로그인 버튼 비활성화 확인
4. 이메일 형식과 비밀번호 자리수 조합으로 버튼 비활성화 확인
5. 이메일 형식과 비밀번호 자리수 충족 시 버튼 활성화 확인
<테스트 결과>
++ 이메일 비밀번호 충족시 로그인 버튼 클릭 후 제출 테스트
- LoginForm 컴포넌트 render
- test할 요소인 email, password, button, handleSubmit 선언
- 이메일, 비밀번호 input에 충족하는 값 입력
- 버튼 활성화 확인
- 버튼 클릭 이벤트 작동
- submit 함수 한번 실행됐는지 확인
<테스트결과>
