즐겁게, 코드

지금까지는 jest 와 함께 평범한 자바스크립트 코드를 테스트해봤는데요, 이번에는 리액트 어플리케이션의 레이아웃 테스팅을 진행해보도록 하겠습니다. 테스팅 라이브러리 리액트 어플리케이션을 테스트할때는 주로 에어비앤비에서 만든 enzyme이나 react-testing-library(앞으로는 간단히 RTL이라 부르겠습니다.) 를 사용합니다. 둘의 차이로는 enzyme이 Implementation Driven Test(구현 주도 테스트) 라는 목표에 따라 어플리케이션이 내부적으로 어떻게 동작하는지에 초점을 맞췄다면, RTL은 Behavior Driven Test(행위 주도 테스트) 라는 목표 아래에서 실제 사용자의 행위와 사용자가 보는 화면을 테스트하는데 초점을 맞췄습니다. 두 테스팅 라이브러리 모두 장점이 있..

목업 테스팅 지난 글에서는 비동기 동작을 테스트하는 방법을 살펴봤는데요, 테스트 코드에서 실제 DB나 API에 접근하면 테스트 코드에서 DB를 잘못 수정할 수도 있는 등 예측할 수 없는 결과를 초래할 수 있다는 문제가 있습니다. // getData.js function getData() { fetch('fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(data => data) } 예를 들어 테스트 코드에서 위와 같이 데이터를 페칭해오는 코드를 실제로 호출한다면 테스트 단계에서 API 호출 횟수를 소모하게 될 뿐만 아니라, 네트워크 사정이 좋지 않을 때는 타임아웃이 발생해 테스트를 통과하..

비동기 코드 테스팅 지난 글에서 jest 로 기본적인 테스트를 구성하는 방법을 다루었다면, 조금 더 나아가 비동기적으로 동작하는 코드를 테스팅해 보겠습니다. 테스팅 설정 이전 글에서 테스트 코드는 node.js 환경에서 동작한다고 언급했는데요, 따라서 @babel/preset-env 프리셋을 통해 트랜스파일을 수행하면 ES6 문법을 거의 다 사용할 수 있지만, async-await 문법을 사용하려 하면 ReferenceError: regeneratorRuntime is not defined 라는 오류를 만나게 됩니다. 이를 해결하기 위해 @babel/plugin-transform-runtime 이라는 바벨 플러그인을 설치하고 적용해줍니다. yarn add -D @babel/plugin-transform-..

테스팅의 중요성 지금까지 프로젝트를 혼자 진행하면서는 print 나 console.log() 등의 출력을 통해 비교적 단순한 '테스트' 를 진행할 수 있었지만, 어플리케이션의 규모가 커지고 동일한 테스트를 반복해야 하는 상황에서는 테스트 코드를 작성하는 것이 필수적입니다. 이번에는 자바스크립트의 강력한 테스팅 라이브러리 jest 와 리액트 프로젝트용 테스팅 라이브러리 react-testing-library(RTL) 을 통해 기초적인 테스트 방법에 대해 알아보겠습니다. jest 설치하기 리액트 테스팅을 경험하기 전에 일반 자바스크립트 환경에서 jest 를 알아보도록 하겠습니다. 이를 위해 npm init -y 로 프로젝트를 초기화하고, jest 와 @babel/preset-env 를 개발 의존성 파일로 설..