성장을 위한 기록

들어가기 앞서 mock API는 꼭 테스트를 위해서만 사용하는 건 아닙니다. API 명세서가 작성되어 있다면 서버가 완성되기 이전 프론트 단에서 개발을 진행할 때 유용하게 사용할 수 있습니다. 이점은 인지하고 넘어가도록 하겠습니다. mock API를 사용하여 리액트 테스트코드 작성하기 이번에는 mock API를 이용하여 테스트하는 방법에 대해 정리해보도록 하겠습니다. 사실 실제 서비스에 연결된 API를 사용하여 테스트 할 수 있습니다. 그렇게 된다면 API 통신까지 테스트를 할 수 있으니 안정성은 더 올라갈 것으로 생각되지만, API 통신 즉 서버가 정상 동작하는건 서버단에서 테스트를 해야할 사항이지 프론트단에서 꼭 테스트할 필요는 없다고 생각됩니다. 그리고 mock API를 사용할 경우 여러 장점이 있..

아래 포스트를 읽기 전 Jest와 React Testing Library에 대해 이해가 없다면 이전 글을 보고 오시는 것을 추천드립니다. 비동기 작업을 고려하여 테스트 코드를 작성해야 하는 이유 개발을 하다 보면 비동기 작업을 하는 경우가 많습니다. Click, 렌더링 등에 이벤트가 발생했을 때 특정 로직을 수행하도록 코드를 작성한 경험이 많을 겁니다. 또 로직을 즉시 실행할 수도 있지만 의도적으로 특정 시간 이후 실행되도록 한 경험도 있을 것이라 생각합니다. 간단한 예로 렌더링 된 후 2초가 지났을 때 화면에 title이 “Load”에서 “Finish”로 변경되는 화면이 있다고 합시다. 이 화면에 테스트 코드를 단순히 render후 Finish text를 찾는다면 에러가 발생합니다. 당연하죠. 변경하기..

Testing React Apps · Jest React Testing Library | Testing Library CRA와 함께 사용하는 Jest React 프로젝트를 생성하는 방법은 생략하도록 하겠습니다. create-react-app을 사용하여 프로젝트를 생성 했을 때 기본적인 Jest 라이브러리가 같이 설치가 됩니다.따라서 기본적인 테스트 코드를 위한 라이브러리 설치는 필요없습니다. 여기서는 렌더링 스냅샷을 사용하기 위해 react-test-renderer을 추가 설치하겠습니다. yarn add --dev react-test-renderer //Link.tsx import {useState} from 'react'; const STATUS = { HOVERED: 'hovered', NORMAL:..

Getting Started · Jest 본 글은 Jest 29.5V Docs를 기반으로 작성했습니다. 간단한 테스트 작성하기 Jest 설치 yarn add --dev jest 본 글에서는 yarn을 기준으로 작성하겠습니다. npm은 Docs에 나와있으니 참고 부탁드립니다. package.json 수정 { ... "scripts": { "test": "jest" } ... } 테스트 코드 작성 /* sum.ts */ // 테스트할 함수 function sum(a, b) { return a + b; } module.exports = sum; /* src > __tests__ > sum.test.ts */ // 테스트 코드 const sum = require('./sum'); describe("sum mod..