유닛 테스트와 리액트 테스트

유닛 테스트(Unit Test)은 말 그대로 코드를 테스트하는 것이다. 개발자는 어플리케이션을 개발하면서 코드가 잘 동작하고 있는지, 앞으로도 변경사항에 유연하게 적응하며 동작을 할 지등을 매번 고려하게 됩니다. 

테스트의 종류

대표적으로 UI Test, 통합 테스트(Integration Test), 단위 테스트(Unit Tes) 3가지로 구분합니다.

https://corgibytes.com/blog/2016/03/28/pyramid-of-tests/

UI Test

실제 사용하는 사용자들이 볼 수 있는 UI를 테스팅하며 최종적으로 어플리케이션이 정상적으로 작동하는지 검증하는 테스팅입니다.

Integration Test (통합 테스트)

단위 테스트를 우선 수행하여 모듈들이 각각 정상적으로 작동이 되는 것을 확인했다면 이제 이 모듈들을 연동하여 테스트를 수행하게 되는데 이것이 통합 테스트입니다.

마지막으로 유닛테스트에 대한 설명입니다.

유닛 테스트이란?

예를들어 어플리케이션을 기능 단위로 나누고 기능은 함수 단위로 다누면서 모인 작은 모듈들을 의도된 대로 정확히 작동하는지 검증하는 절차입니다. 하나의 모듈에 대해 하나 이상의 테스트가 존재할 수 있습니다.

이는 문제점 발견이 쉽다.

유닛 테스트의 목적은 아주 작은 단위로 나눈 모듈이 정확하게 동작하는지 확인하는 것 입니다. 이는 작은 단위로 쪼개서 각 단위가 정확하게 동작하는지 검사하고 이를 통해 문제 발생 시 정확하게 어느 부분이 잘못되었는지를 재빨리 확인할 수 있게 해줍니다. 즉 개발 과정에서 문제(버그)를 미리 발견 할 수 있습니다. 또한 작게 쪼개진 단위 테스트는 해당 로직이 어떤 역할을 하는지 쉽게 파악할 수 있습니다.

Javscript의 테스트 도구

javaScript는 많은 라이브러리를 사용하여 테스트할 수 있지만 Node.js 개발자가 작업하는 데 사용하는 가장 인기 있는 두 가지 테스트 도구는 Mocha와 Jest입니다.

Mocha

Mocha 는 Node.js에서 널리 사용됩니다. 이 프레임워크는 다양한 테스트 유형을 제공합니다. 앞서 소개한 3가지 유형 테스트를 중점으로 테스트 프로세스를 제공합니다.

Jest

It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!

Jest 는 dom을 이용하는 자바스크립트 코드를 테스트 할 때 *jsdom을 통해 DOM에 접근하여 테스트하는 라이브러리입니다. 앞서 인용구로 소개한 바로 다른 JavaScript 라이브러리 및 프레임워크에도 함께 적용할 수 있습니다.

*jsdom

JSDOM은 브라우저처럼 조립된 HTML을 파싱하고 상호작용하는 라이브러리이다. 즉 HTML을 구문 분석할 수 있고 JavaScript DOM API DOM을 사용할 수 있습니다. 실제 웹 애플리케이션을 브라우저에서 동작 하는 것 처럼 테스트할 수 있도록 도와줍니다.

이외에도 javascript에서 테스트 할 수 있는 도구는 많습니다!

React에서 테스트하는 방법

React를 테스트한다는 것은 결국 컴포넌트를 테스트한다는 뜻 입니다. 컴포넌트를 테스트하는 크게 두 가지 범주로 나뉩니다.

• 간단한 테스트 환경에서 컴포넌트를 랜더링하고 그 결과를 출력하는 방법
• 실제 브라우저 환경에서 전체 앱을 실행하는 방법 ( 공식문서에서는 “end-to-end”라고 부릅니다)

리액트는 공식적으로 첫번째 방식을 추천하고 있으며 권장하는 도구로는 Jest, React Testing Libarary 두 가지가 있습니다.

React Testing Library

React Testing Libary는 리액트 컴포넌트 테스팅을 위한 API를 제공하는데 이는 DOM Testing Library 추가 되어 제공됩니다.

DOM Testing Library

DOM 노드를 테스트하기 위한 프레임워크입니다. 일반적으로 사용자가 사용하는 방식으로 응용 프로그램 구성 요소를 테스트합니다. 이 프레임워크는 로그인 하기, 로그아웃 하기등 사용자가 사용하는 기능을 중심으로 테스트하게 됩니다. 즉 로그인 기능을 사용 할 때 어떠한 값이 오가는지등 구현 세부 정보는 테스트하지 않고 그저 사용자가 어떤 컨텐츨츠를 보고있고 어떤 이벤트를 발생하는지등 행위따라 주도되어 테스트하는 방법입니다. 이를 행위 주도 테스트라고도 부릅니다.

정리

평소 어플리케이션을 만들 때 비지니스 로직만을 신경쓰다 테스트라는 개념을 아예 외면하면서 개발해왔습니다. 결국 요구사항이 수시로 변경되는 상황에서 제대로 대처하지 못하고 개발시간이 늘어나게 되었습니다. 그래서 해결방안을 모색하던 중 테스트 기법을 찾게되어 조사하게 되었습니다. 아직 이 방식을 도입하지않아 얼마나 개선될지는 예상이 안되지만 많은 개발자들이 제대로된 테스트코드가 있으면 테스트가 없는 코드들보다 유지보수가 다 쉽다는 의견이 있으니 한번 적용해보고자 합니다.

다음 포스팅은 리액트에서 테스트하는 방법 분석입니다.

Refs

https://corgibytes.com/blog/2016/03/28/pyramid-of-tests/

https://www.merixstudio.com/blog/mocha-vs-jest/

https://www.testim.io/blog/jsdom-a-guide-to-how-to-get-started-and-what-you-can-do/

https://testing-library.com/docs/

https://reactjs.org/docs/testing.html