[REACT] 프론트엔드의 테스트 코드 이해하기

이전에 관련된 주제로 가볍게 포스팅한 적이 있지만

제대로 학습할 기회가 생겨 차례 차례 정리해본다!

[REACT] TDD 와 리액트 테스트 도구

 

 

 

---

describe("회원가입 페이지", () => {
	test("인풋이 활성화되면 underline의 컬러가 바뀐다", async () => {  });
	test("아이디가 중복이면 에러메시지가 나타난다", async () => {  });
	test("비밀번호가 일치하지 않으면 에러메시지가 나타난다", async () => {  });
	test("회원가입에 실패하면 에러메세지가 나타난다", async () => {  });
});

테스트 코드를 왜 작성할까?

목적

• 정확성 및 신뢰성 확보
  • 테스팅의 주요 목적은 코드가 올바르게 작동하는지 확인하는 것
  • 다양한 조건 및 입력에서 React 컴포넌트가 예상대로 동작하는지 확인
• 수월한 리팩토링
  • 프로젝트가 성장하면 리팩토링이 필요함
  • 테스트코드 작성으로 통과해야하는 최소한의 기준이 만들어짐
  • 변경사항 또는 최적화가 예상치 못한 버그를 만들지 않도록 함

장점

• 문서화 및 이해
  • 명확하게 작성하면 문서의 형태가 됨
  • 기획자와의 소통의 도구로 사용할 수 있음
  • 새롭게 합류한 개발자가 컴포넌트를 이해하는데에 용이함

 

 

그렇다면 무엇을 테스트할까?

테스트의 목적은 사용자가 서비스를 이용하는 데 문제가 없어야 한다는 것

즉, 비즈니스 로직을 테스트 해야한다

 

 

EX) 로그인

• 아이디 input이 잘 입력되는가?
• 비밀번호 input이 잘 입력되는가?
• input이 채워지면 로그인 버튼이 활성화되고 클릭이 되는가?
• 로그인 성공 시, 원하는 화면으로 redirect 되는가?
• 로그인 실패 시, 경고 메세지가 출력되는가?

 

 

테스트의 유형들

유닛 테스트

가장 작은 단위의 테스트

React의 경우에는 <input /> <button /> 과 같은 JSX 하나 하나에 대한 것이라고 이해할 수 있다.

• 아이디 인풋이 잘 입력되는가?
• 비밀번호 인풋이 잘 입력되는가?
• 로그인 버튼이 잘 클릭되는가?

 

 

통합 테스트

유닛 테스트의 결과물들이 하나로 묶여서 잘 작동하는지를 확인하는 테스트

• 가입된 이메일과 비밀번호를 사용해서 로그인이 잘 되는가?
• 잘못된 정보로 로그인 시도할 경우 에러메세지가 잘 나오는가?

=> input과 button이 서로 상호작용을 해서 잘 동작하는 지 확인

 

 

e2e  테스트

end-to-end

사용자들이 실제 사용하는 것처럼 테스트

• 로그인 페이지에 접근해서 가입된 이메일과 비밀번호를 사용해서 로그인이 잘 되는가?
• 로그인 페이지에 접근해서 잘못된 정보로 로그인을 시도할 경우 에러메세지가 잘 나오는가?

 

통합 테스트 vs e2e 테스트

• 통합 테스트 : 컴포넌트를 렌더링하고 테스트. 주로 Jest를 활용
• e2e 테스트 : 페이지에 접근해서 테스트. 주로 cypress를 활용
• 프론트엔드에서는 두 테스트의 경계가 모호한 편

 

 

 

---

테스트 코드 기본 문법

Jest와 cypress가 공통으로 사용하는 기본 문법

 

it (test)

하나의 테스트 케이스를 작성

it("should test the first case", () => {});
test("테스트 케이스 1번, OO를 테스트한다", () => {});

 

describe

it과 test들의 묶음

테스트하고자 하는 component나 page를 앞에 작성하고, 내부에서는 it (test)를 활용해 관련된 테스트 케이스를 작성

describe("테스트하고자 하는 컴포넌트", () => {
	it("should test the first case", () => {});
	test("테스트 케이스 1번, OO를 테스트한다", () => {});
});

 

beforeEach

it과 test로 선언한 각각의 테스트케이스들의 작동 이전에 수행할 내용

 

 

beforeAll

it과 test로 선언한 각각의 테스트케이스들의 작동 이전에 한 번만 수행할 내용

테스트들이 공통으로 사용하는 configuration이나 상수들을 선언하는데 활용

describe("테스트하고자 하는 컴포넌트", () => {
	beforeEach(() => { console.log("beforeEach"); });
	beforeAll(() => { console.log("beforeAll"); });
	it("should test the first case", () => { console.log("it"); });
	test("테스트 케이스 1번, OO를 테스트한다", () => { console.log("test"); });
});

실행 결과) beforeAll -> beforeEach -> it -> beforeEach -> test

 

afterEach

it과 test로 선언한 각각의 테스트케이스들의 동작 이후 수행할 내용

configuration을 초기화 한다거나, mock data를 clean up 할 때 사용

 

 

afterAll

it과 test로 선 언한 각각의 테스트케이스들의 동작 이후 한 번만 수행할 내용

여러개의 테스트케이스에서 공통으로 사용되는 것들을 초기화 하는데 사용

describe("테스트하고자 하는 컴포넌트", () => {
	beforeEach(() => { console.log("beforeEach"); });
	beforeAll(() => { console.log("beforeAll"); });
	afterEach(() => { console.log("afterEach"); });
	afterAll(() => { console.log("afterAll"); });
	it("should test the first case", () => { console.log("it"); });
	test("테스트 케이스 1번, OO를 테스트한다", () => { console.log("test"); });
});

실행 결과) beforeAll -> beforeEach -> it -> afterEach -> beforeEach -> test -> afterEach -> afterAll

 

 

 

---

참고

2시간으로 끝내는 프론트엔드 테스트 기본기 - 인프런

[책] 프론트엔드 개발을 위한 테스트 입문