May 21, 2023
시나리오 서비스에서 회원가입 기능이 존재하는데, 회원가입에 성공하면 사용자에게 이메일과 문자를 보내서 알려주는 기능이 있다고 가정해보자. 이메일과 문자를 보내는 요청은 수행할 때마다 , 씩 발생하기 때문에 해당 요청은 모킹해서 처리해야 한다. 를 이용해서 모킹하는 여러 방법을 직접 사용해보고 특징을 이해해보고자 한다. messageServi…
May 21, 2023
모킹이란? 기존 함수의 기능을 흉내내는 가짜 함수를 만들어 내는 것을 말한다. 우리가 테스트 코드를 작성할 때 데이터베이스나 외부의 서버로부터 데이터를 가져오는 등의 외부에 의존해야 하는 경우가 있다. 이런 경우에는 단위 테스트가 외부의 상황에 따라서 결과가 달라지는 문제점이 발생하기 때문에 외부에 의존하는 코드를 가짜로 대체하는 모킹을 활용할 수 있다.…
May 20, 2023
기본적으로 테스트 코드를 작성할 때 비동기 작업에 대한 테스트를 진행해야 하는 경우에는 에게 아직 비동기 작업이 수행중이라는 사실을 알려줘야 한다. 그렇지 않으면 비동기 작업은 아직 수행되지 않은 채로 함수가 종료되는 시점에 바로 테스트가 완료된다. , , 마다 비동기 작업을 알리는 방법은 약간의 차이점이 존재하는데 이에 대해서 정리해보고자 한다. …
May 20, 2023
테스트 파일 안에서 는 테스트를 위한 여러 유용한 메소드와 객체를 전역 환경에 추가한다. 자세한 내용은 공식 문서에서 확인할 수 있고 여기서는 유용하다고 생각되는 몇 가지의 기능을 정리해보고자 한다. 영역 묶기 연관이 있는 함수는 같은 블록에 존재하는게 관리하기 좋다. 를 사용하면 여러 함수를 하나의 블록으로 묶을 수 있다. 테스트 전/후 처리…
May 20, 2023
Matcher란? 에 입력한 어떤 검증 대상에 대해서 기대 결과가 무엇이 나와야 하는지를 검사하는 함수이다. API 문서에서 확인할 수 있듯 다양한 가 존재하는데, 여기서는 기본적이면서 유용한 몇 가지의 에 대해서만 작성해 보고자 한다. toBe 단순한 값의 비교에 사용한다. toEqual 객체 내부의 모든 속성에 대해서 깊은 비교를 하는데 사용한다…
May 19, 2023
Jest란? 는 메타(구 페이스북)가 만들고 유지보수하는 자바스크립트 테스팅 프레임워크이다. 가 등장하기 이전에는 테스팅을 위해서 , , 에 적용할 각각의 라이브러리를 선택해서 적용해야 했었는데, 그렇다보니 각각의 라이브러리가 유사하지만 조금씩 다른 API 때문에 여러 프로젝트에서 일하는 자바스크립트 개발자들에게 혼란을 주기도 했었다. 는 Al…
May 18, 2023
react-hook-form 은 에서의 폼 데이터 관리를 쉽게 도와주는 라이브러리이다. 에서 폼 데이터를 상태에 저장하고, 잘못된 형식이 들어오지 않도록 유효성을 검사하고, 유효성 검사 결과에 따른 적절한 오류 메시지를 보여주도록 관리하는데에는 많은 코드 작성이 들어가고, 요소의 값의 변화를 가 제어하는 제어 컴포넌트의 형태로 작성하면 이벤트가…
May 18, 2023
유효성 검사 작성 방법 과 같은 폼 요소에 대해서 데이터의 유효성을 검사하는 방법은 메소드의 두 번째 매개변수인 에 검사 조건을 입력해주는 것이다. , , 등 기본적으로 존재하는 옵션을 사용할 수도 있고, 자신이 직접 새로운 조건을 입력해야 하는 경우에는 옵션을 사용할 수 있다. 1. 기본 옵션 기본적으로 존재하는 옵션에 대해서는 위와 같은 형…
May 18, 2023
은 폼 데이터를 한 눈에 조회하고 변화하는 과정을 쉽게 추적할 수 있도록 개발 도구를 지원한다. 이를 사용하기 위한 과정은 다음과 같다: 1. 설치 2. DevTool 가져오기 3. 추적하려는 form 객체의 control 전달 예시 코드
May 18, 2023
에 내장되어 있는 유효성 검사 옵션들을 이용할 수도 있지만, 과 같이 유효성 검사를 위해 다양한 기능을 제공하는 라이브러리를 사용할 수도 있다. 을 사용했을 때의 장점은 만의 다양한 기능을 이용할 수 있다는 점도 있지만, 유효성 검사 부분을 따로 하나의 로 뺄 수 있으므로 코드 부분이 간결해 진다는 점이다. 연동 방법 1. 패키지 설치 라이…