저와 같은 사람이라면 개발 워크플로우에서 테스트를 자동화하여 원치 않는 사이드 이펙트를 줄이고 애플리케이션의 품질을 향상하는 것이 중요하다고 생각하겠죠하지만 다양한 테스트 라이브러리들이 있는데 그중에서 뭐가 쓰는 게 맞는지 , 각 라이브러리들을 조합해서 어떤 테스트를 할 수 있는지 파악하기가 어렵습니다그래서 프론트엔드 테스트에 대해서 더 자세히 조사하고 블로그 글로 정리하려고 합니다. 이 글에선 프런트엔드 테스팅 시 자주 사용되는 라이브러리, 용어 를 정리하고, 코드 스니 펫을 공유해 드립니다.해당 글의 내용은 테스팅에 대해서 깊게 다루지 못한 프론트엔드 초급/중급 개발자를 중심으로 합니다.우선, 테스트 유형들은 다양하게 진행해 볼 수 있는데, 프론트단에 주로 아래 3가지 테 스트들을 진행합니다Unit Tests (단위 테스트): 최소 단위의 util 함수, 커스텀 리액트 hook, 아니면 하나의 컴포넌트를 테스트합니다Integration Tests (통합 테스트): 어떤 어플리케이션에서 여러개의 요소들이 같이 돌렸을 때 어떻게 동 작하는지 확인하는 테스트합니다End-to-end Tests (E2E): 어떤 사용자가 웹앱을 사용하는 것처럼 시뮬레이션 돌린다 (이때 서버, 인프라, 웹앱 모두 테스트하게 된다)이번 글에서는 단 테스트와 통합 테스트에만 집중하고 E2E 테스트는 생 략하겠습니다테스트 관련 용어 정리Spy는 어떤 함수를 실행 여부 기록하고, 함수 실행할 때마다 그의 응답 값, Argument 등을 기록해 줍니다 (보통 이 액션을 통해서 내가 원하는 함수가 실행됐을까? 성격의 테스트를 할 수 있습니다)Stubbing 같은 경우에는 어떤 함수를 스파이하면서, 그 함수의 로직을 오버라이딩 시킬때 stubbing이라고 볼 수 있습니다 (보통 어떤 컴포넌트의 의존성으로 인한 사이드 이펙트의 양을 줄이기 위해 단위 테스트에 주로 사용됩니다)Mock은 Stubbing과 같이 어떤 함수의 implementation을 대체하거나, 그 함수가 응답 값이 원하는대로 변경할 수 있습니다Assertion이라는 개념을 쉽게 생각한다면 내가 원하는 결과를 받고 있을까? 확인해 주는 기능인데요. Assertion 라이브러리들은 변수 (객체, 배열, string, number)가 쉽고 가득성 좋게 비교할 수 있는 utility 함수들을 제공해 줍니다Snapshot 테스트는 어떤 컴포넌트가 렌더링될 때, 어떤 아웃풋이 나오는지 파일로 기록해 줍니다. 만약에 코드 수정 후에 렌더링되는 아웃풋이 변경되면 테스트가 실패하게 됩니다 (보통 내가 로직만 수정했는데 DOM이 왜 바뀌는거지?라는 상황을 예방하기 위해 사용합니다)Instrumentation이라는 개념도 있는데요. 테스트 코드 커버리지를 계산하려고 내 코드베이스 전체 라인에서 몇줄이 실행 되는지, 각 라인에서 몇번 실행되는지 측정하기 위해서 모든 파일을 wrapping해야 합니다. 이 과정이 code intrumentation이라고 합니다. 보통 babel 설정에서 istanbul 라이브러리로 wrapping합니다 (

간단하게 테스트 환경 구축하기 이 글에서는 간단하게 Front-End 테스트 환경을 구축하는 방법에 대해 공유하고자 한다. 참고) 본 글은 Karma 설정과 Jasmine의 API에 대해서는 깊게 다루지 않는다. 우선 Front-End 테스트를 실행할 수 있는 환경을 빠르게 구축함을 목적으로 작성되었다. 자세한 API와 설정에 대해서는 글 최하단의 참조의 각 Github Page에서 확인할 수 있다. 자바스크립트 테스트 자바스크립트에서 테스트를 수행할 때 필요한 것은 크게 3가지이다. 먼저 테스트 실행 환경, 테스트 코드를 수행할 테스팅 프레임워크, 마지막으로 그 테스트를 실행시킬 테스트 러너이다. 자바스크립트 테스팅 프레임워크, 테스트 러너의 종류는 많고 조합을 해서 쓰게 되면 경우의 수는 더 많아진다. 하지만 이 글과 후속되는 글에서는 FE개발랩에서 사용하는 테스트 환경에 맞춰 다중 테스트 환경을 구축하는 방법에 대해 소개할 예정이다. 각각의 사용법과 조합해서 사용하는 방법을 알아보기 전에, 우리 FE개발랩은 어떤 도구들을 사용하는지 먼저 알아보자. 실행 환경 자바스크립트 실행 환경은 여러 종류가 있지만, 크게는 Node.js와 웹 브라우저가 있다. FE개발랩은 웹 브라우저 환경에서 구동되는 서비스에 필요한 데이트피커, 페이지네이션 등의 컴포넌트와 차트, 그리드, 에디터 등의 작은 애플리케이션을 개발하므로 테스트 실행 환경은 웹 브라우저이다. 테스팅 프레임워크 자바스크립트 테스팅 프레임워크는 아래의 설문 결과 차트에 나와있듯 Mocha, Jasmine, Enzyme, Jest, Cucumber, Ava 등이 있다. > 자바스크립트 테스팅 프레임워크 선호도 및 관심도 (링크) 위의 설문 결과를 보면 독보적으로 높은 인지도와 선호도를 가진 테스팅 프레임워크 Mocha와 Jasmine 두 개가 보인다. 우리 FE개발랩은 Jasmine을 사용한다. 두 프레임워크가 지원하는 기능은 비슷하며 Mocha가 조금 더 높은 사용성을 제공하지만(비동기 테스트의 경우) 현재 개발되는 제품들에 필요한 비동기 테스트가 적고, 기본적으로 지원하는 Assertion API와 빠른 테스트 수행 속도의 이점이 있는 Jasmine의 손을 들어주었다. 테스트 러너 테스트 러너로는 Karma를 사용한다. Karma는 Node.js에서 실행되며 matcher 등 테스팅 프레임워크의 기능은 제공되지 않는다. Karma가 동작되는 방식을 요약하면 다음과 같다. karma 자체 서버를 띄운다. 사용자가 작성한 테스트 코드와 소스 코드를 karma.config.js에 미리 정의한 테스트 환경(웹 브라우저)의 IFrame 내부로 불러들여 테스트를 실행한다. 테스트를 모두 수행하고 난 뒤 수행 결과를 karma 서버로 받고, 콘솔을 통해 개발자에게 결과를 보여준다. 기본적으로 karma-chrome-launcher, karma-safari-launcher 등을 사용해 로컬 개발 환경의 브라우저에서 손쉽게 테스트를 수행할 수 있다. 먼저 로컬 환경에서 테스트를 해보자 그럼 앞에서 언

이 글에서는 간단하게 Front-End 테스트 환경을 구축하는 방법에 대해 공유하고자 한다. 참고) 본 글은 Karma 설정과 Jasmine의 API에 대해서는 깊게 다루지 않는다. 우선 Front-End 테스트를 실행할 수 있는 환경을 빠르게 구축함을 목적으로 작성되었다. 자세한 API와 설정에 대해서는 글 최하단의 참조의 각 Github Page에서 확인할 수 있다. 자바스크립트 테스트 자바스크립트에서 테스트를 수행할 때 필요한 것은 크게 3가지이다. 먼저 테스트 실행 환경, 테스트 코드를 수행할 테스팅 프레임워크, 마지막으로 그 테스트를 실행시킬 테스트 러너이다. 자바스크립트 테스팅 프레임워크, 테스트 러너의 종류는 많고 조합을 해서 쓰게 되면 경우의 수는 더 많아진다. 하지만 이 글과 후속되는 글에서는 FE개발랩에서 사용하는 테스트 환경에 맞춰 다중 테스트 환경을 구축하는 방법에 대해 소개할 예정이다. 각각의 사용법과 조합해서 사용하는 방법을 알아보기 전에, 우리 FE개발랩은 어떤 도구들을 사용하는지 먼저 알아보자. 실행 환경 자바스크립트 실행 환경은 여러종류가 있지만, 크게는 Node.js와 웹 브라우저가 있다. FE개발랩은 웹 브라우저 환경에서 구동되는 서비스에 필요한 데이트피커, 페이지네이션 등의 컴포넌트와 차트, 그리드, 에디터 등의 작은 애플리케이션을 개발하므로 테스트 실행 환경은 웹 브라우저이다. 테스팅 프레임워크 자바스크립트 테스팅 프레임워크는 아래의 설문 결과 차트에 나와있듯 Mocha, Jasmine, Enzyme, Jest, Cucumber, Ava 등이 있다. 자바스크립트 테스팅 프레임워크 선호도 및 관심도 (링크) 위의 설문 결과를 보면 독보적으로 높은 인지도와 선호도를 가진 테스팅 프레임워크 Mocha와 Jasmine 두 개가 보인다. 우리 FE개발랩은 Jasmine을 사용한다. 두 프레임워크가 지원하는 기능은 비슷하며 Mocha가 조금 더 높은 사용성을 제공하지만(비동기 테스트의 경우) 현재 개발되는 제품들에 필요한 비동기 테스트가 적고, 기본적으로 지원하는 Assertion API와 빠른 테스트 수행 속도의 이점이 있는 Jasmine의 손을 들어주었다. 테스트 러너 테스트 러너로는 Karma를 사용한다. Karma는 Node.js에서 실행되며 matcher 등 테스팅 프레임워크의 기능은 제공되지 않는다. Karma가 동작되는 방식을 요약하면 다음과 같다. karma 자체 서버를 띄운다. 사용자가 작성한 테스트 코드와 소스 코드를 karma.config.js에 미리 정의한 테스트 환경(웹 브라우저)의 IFrame 내부로 불러들여 테스트를 실행한다. 테스트를 모두 수행하고 난 뒤 수행 결과를 karma 서버로 받고, 콘솔을 통해 개발자에게 결과를 보여준다. 기본적으로 karma-chrome-launcher, karma-safari-launcher 등을 사용해 로컬 개발 환경의 브라우저에서 손쉽게 테스트를 수행할 수 있다. 먼저 로컬 환경에서 테스트를 해보자 그럼 앞에서 언급한 테스팅 프레임워크, 테스트 러