테스트코드란?

테스트코드의 목적

• 정확성 및 신뢰성 확보

  - 올바르게 작동하는지, 예상대로 작동하는지 확인할 수 있다.

• 리팩토링

  • 리팩토링 전 테스트 코드를 작성하면 최소한의 기준이 만들어진다.
  • 프로젝트 초반부터 테스트코드를 작성하면 좋지만 시간이 부족하기때문에, 리팩토링 전에 테스트코드를 작성하는게 좋다.

테스트코드의 장점

• 기획 내용을 잘 반영했는지 확인할 수 있다.

describe("회원가입 페이지", () => {
	/*
	각 항목을 jira ticket으로 생각하고 작업할 수 있음
  브랜치 별로 테스트코드 작업 가능
	*/
  test("인풋이 활성화되면 underline의 컬러가 바뀐다", async () => {  });
  test("아이디가 중복이면 에러메시지가 나타난다", async () => {  });
  test("비밀번호가 일치하지 않으면 에러메시지가 나타난다", async () => {  });
  test("회원가입에 실패하면 에러메세지가 나타난다", async () => {  });
});

• 다른 개발자들이 테스트코드를 보고 해당 컴포넌트에서 어떻게 동작하는지 바로 이해할 수 있다.

무엇을 테스트 할 것인가?

테스트는 기본적으로 코드가 올바르게 동작하는지 확인하는 것이다.
그렇다면 '코드가 올바르게 동작한다' 는게 무엇일까?
바로 사용자가 서비스를 사용하는데 문제가 없다는것이다.
따라서, 비즈니스 로직을 테스트해야한다. (동작을 테스트해야한다.)

테스트해야하는것들은 '동작' 이다.
예를들면, 로그인성공시 내가원하는곳으로 redirect되는지, 실패시 에러메세지가 모달로 뜨는지...

반대로 테스트하지 말아야할것은 'ui'다.
존재자체는 테스트를 해야하지만, 예를들면 padding margin값 자잘한 ui값 등이다.

하지만 아예하지 말하야한다는게 아니라

테스트도구에 따라 목적이 다르므로,
동작은 jest cypress ui는 storybook으로 하는게 맞다.

테스트 종류

어떤 범위까지 테스트해야하냐에 따라 테스트의 종류가 나뉘게 된다.

유닛테스트

• 가장 작은 범위의 테스트
• 모듈 단위 테스트
• 로그인을 예로들면
  • 인풋이나 버튼이 렌더링이 잘 되는지
  • 인풋의 값이 변경이 잘 되는지
  • 버튼을 클릭하면 로그인이 잘 되는지
  • 유효성검사

통합테스트

• 모듈과 모듈간의 결합을 했을때 잘 연결되는지 확인하는 테스트
• 로그인을 예로들면
  • 로그인 버튼을 클릭하고, 로그인 성공시 원하는 화면으로 redirect되는지
  • 로그인 실패시 에러메세지 모달이 잘 보이는지

E2E테스트

• end to end 테스트 (유닛테스트+통합테스트)
• 실제 사용자인것처럼 테스트
• 개발비용이 가장 비싼 테스트

일반적인 개념은 유닛테스트,통합테스트는 jest e2e테스트는 cypress를 사용한다고 알려져있지만, jest가 복잡하기 때문에 cypress로 유닛테스트와 통합테스트도 충분히 가능해서 cypress만 사용하는 경우도 있다.

회사마다 사용하는 프로세스가 다르기때문에 굳이 우리는 유닛테스트, 통합테스트까지 한다, 우리는 e2e테스트까지한다 는 개념을 나누기보다는 우리는 테스트코드를 작성한다가 더 좋은 개념이라고 생각한다.