리액트로 프론트엔드 테스팅 시작하기 (1)

개요

  사실 개발을 해오면서 TDD, 테스팅, E2E, Unit-Test 라는 키워드를 많이 접해왔다. 하지만 이게 실제로 어떤 개념인지 자세히 알지는 못했다. 그래서 이번 기회에 프론트엔드 테스팅을 알아보고 경험해보고 직접 프로젝트에 적용해보려고 한다.

사전 지식

  테스트를 경험하기 전에 먼저 알아둬야 할 사전 지식들이 있다. 테스트는 소프트웨어 공학에 있는 개념이기 때문에 전문적인 단어들이 꽤 많이 존재한다.

1. TDD vs BDD

TDD

  TDD(Test-Driven-Development)는 테스트 주도 개발, BDD(Behavior-Driven-Development)는 행동 주도 개발을 의미한다. 사실 단어의 의미만 들어서는 TDD와 BDD가 무엇인지 감이 잘 오지 않는다.

  TDD는 말 그대로 테스트가 개발을 주도하는 개발 프로세스를 의미한다. 보통 일반적인 상황에서는 개발을 할 때에 코드를 먼저 작성하지만, TDD는 테스트 케이스를 먼저 작성한 후에, 테스트를 통과할 수 있는 코드를 작성함으로서 개발을 진행한다. TDD의 개발 사이클은 다음과 같다.

  1. 테스트 코드 작성하기

앞서 말했던 것처럼 TDD는 테스트 주도 개발이기 때문에 구현해야할 부분을 테스트하는 코드를 먼저 작성해야 한다.

  2. 테스트 코드를 실행하기

먼저 작성한 테스트 코드가 실패하는 지 확인해야 한다. 만약 이 테스트가 성공한다면 구현하지도 않은 부분의 코드의 테스트가 성공했다는 뜻이므로 버그를 찾아야 한다.

  3. 실패한 테스트 코드를 성공시키기 위한 최소한의 코드 구현하기

이제 자신이 먼저 작성한 테스트 코드에 따라서 코드를 작성하면 된다.

  4. 코드 리팩토링하기

필요에 따라서 구조적으로 잘못된 부분을 수정하면 된다.

  이러한 절차를 걸쳐서 TDD의 개발은 진행된다.

BDD

  BDD는 TDD에서 파생된 개발 프로세스이다. 이전까지의 단위 테스트는 테스트의 대상이 되는 기능의 구현 형태에 너무 많은 영향을 받는다는 문제점이 있었다. 테스트 대상 기능이 입출력의 변화없이 내부 구현의 변경만 있는 상황에서도 불필요한 테스트 코드 수정이 발생하는 상황이 생긴다는 것이다.

  BDD는 이런 문제를 해결하기 위해서 테스트를 코드의 구현에 집중하지 않고, 코드의 동작에 집중하게 되었다. 행위에 더 집중한 형태의 TDD라고 생각하면 된다.

2. 단위 테스트(Unit-Test)

  단위 테스트는 소스 코드의 개별적인 단위에 대해 테스트를 하는 것을 말한다. 일반적으로 모듈, 하나의 기능에 해당하는 유닛에 대해서 테스팅을 한다. 단일 함수에 대한 구체적인 테스트는 테스트를 간단하고 빠르게 만들어 시험해볼 수 있게 만든다. 이를 통해서 많은 테스트케이스를 작성할 수 있고, 빠르게 버그를 잡아낼 수 있다. 단위 테스트는 기본적으로 하나의 행동에 대한 테스트를 정의해둔 것이기 때문에 네트워크나 DB접근 같은 의존성으로부터 벗어나야 한다. 즉, 독립적이어야 한다는 말이다.

3. E2E 테스트 (End-to-End Test)

  E2E 테스트는 End-to-End 테스트를 말한다. 사용자의 관점에서 하나의 사용 흐름을 수행하는 테스트이다. 

  만약, 사용자가 블로그에 글을 쓰기를 원한다면 로그인을 하고, 글쓰기 버튼을 눌러 내용을 입력하고 발행 버튼을 눌러서 글을 작성할 수 있을 것이다. 이런 하나의 사용흐름을 처음부터 끝까지 테스트하는 것이 바로 E2E 테스트이다. 이 테스트를 통해서 컴포넌트간의 의존성을 확인할 수 있다.

4. 통합 테스트 (Integration Test)

  통합 테스트는 단위 테스트와 반대로 컴포넌트간의 상호작용을 확인하는 테스트를 일컫는다. 

5. 테스트 케이스 (Test Case)

  테스트 케이스는 하나의 테스트가 달성되기 위해서 실행되도록 정의된 예시를 의미한다. 즉, 개발자가 정의한 테스트가 성공하는 하나의 케이스라고 말할 수 있다. 

6. 테스트 더블 (Test Double)

  테스트 더블은 테스트를 검증하기 위해서 만든 임의의 데이터를 의미한다. 테스트 더블의 종류에는 더미(Dummy), 스텁(Stub), 스파이(Spy), 목(Mock), 페이크(Fake)가 있다.

7. 테스트 커버리지 (Test Coverage)

  테스트를 실행했을 때 전체 코드중 테스트로 검증된 코드의 비율을 말한다. 테스트 커버리지가 높은 코드일 수록 안정적이고 신뢰도가 높은 코드라고 말할 수 있다.

리액트 앱 생성하기

페이스북에서 만든 create-react-app을 사용해서 리액트 앱을 만들 것이기 때문에 기본적으로 세팅되어 있는 테스팅 툴인 Jest를 사용해서 테스트를 할 것이다. 아래 명령어를 통해서 리액트 앱을 만들 수 있다.

위 명령어를 통해서 하위 디렉토리에 react-test라는 디렉토리가 생기고 그 안에 리액트 앱이 생성됐을 것이다. 그 이후의 내용은  다음 포스트에서 다루겠다.