들어가며 벨로퍼트님의 테스팅 튜토리얼을 공부한 내용을 정리하는 글입니다. 비동기적으로 바뀌는 컴포넌트 UI 테스트 const { useState, useEffect } = require("react"); const DelayedToggle = () => { const [toggle, setToggle] = useState(false); useEffect(() => { setInterval(() => { setToggle((prev) => !prev); }, 1000); }, []); return ( 상태 : {toggle ? "On" : "Off"} {toggle && 토글이 켜졌다!} ); }; export default DelayedToggle; 다음과 같이 1초마다 상태 값이 바뀌는 컴포넌트가 있습..

들어가며 벨로퍼트님의 테스팅 튜토리얼을 공부한 내용을 정리하는 글입니다. 이번에는 TDD 방식으로 Todo List를 만들어본다. 전체적인 시나리오는 벨로퍼트님을 따라가지만 컴포넌트 자체는 스스로 만들어볼 생각이다. 컴포넌트 계획 Todo List를 만들기 위해서 필요한 컴포넌트는 무엇일까? ▶ Todo Form : Input과 Button으로 이루어진 Form 컴포넌트이다. Todo App으로부터 Submit을 전달받아 새로운 항목을 추가할 수 있어야 한다. ▶ Todo Item : 각 Todo 항목을 보여주는 컴포넌트이다. 텍스트를 클릭하면 텍스트에 삭제선이 그어져야 하고, 우측 삭제 버튼을 누르면 항목이 사라져야 한다. ▶ Todo List : Todo 배열을 받아와서 여러 개의 TodoItem 컴..

들어가며 벨로퍼트님의 테스팅 튜토리얼을 공부한 내용을 정리하는 글입니다. 이 전에 Test Coverage를 공부할 때 한번 정리했지만 사용의 전반적인 흐름이 더 좋다고 느껴서 다시 정리한다. react-testing-library 모든 테스트를 DOM 위주로 진행하는 방식이다. 컴포넌트를 리팩토링할 때, 내부 구조 및 네이밍은 많이 바뀔 수 있지만 작동 방법은 크게 바뀌지 않는다. react-testing-library는 이러한 특징을 중요하게 생각해서 컴포넌트의 기능이 똑같이 작동한다면, 컴포넌트의 내부 구현 방식이 변해도 테스트가 실패하지 않도록 설계되어있다. 테스트 코드 const Profile = ({ username, name }) => { return ( {username} ({name}) ..

들어가며 벨로퍼트님의 테스팅 튜토리얼을 공부한 내용을 정리하는 글입니다. TDD ? TDD는 테스트를 통해서 개발을 이끌어나가는 형태의 개발론이다. 먼저 테스트 코드를 작성하고, 구현을 하는 방식이라고 보면 된다. TDD에는 3가지 절차가 있다. 실패 첫 번째 절차로 실패이다. 말 그대로 실패하는 테스트 케이스를 먼저 만드는 것이다. 상황에 따라 다르지만, 먼저 구현할 기능부터 하나씩 테스트 케이스를 작성한다. 성공 두 번째 절차로 성공이다. 앞서 작성한 실패하는 테스트 케이스를 통과시키기 위해서 코드를 작성하는 것을 말한다. 리팩토링 구현한 코드가 테스트를 통과한다면, 중복되는 코드 또는 개선시킬 방법이 있는 코드를 리팩토링 시킨다. 리팩토링을 했을 때 테스트 케이스가 성공하면 다른 기능을 다시 첫 번..

들어가며 벨로퍼트님의 테스팅 튜토리얼을 공부한 내용을 정리하는 글입니다. 작업환경 설정 간단한 자바스크립트 환경에서 함수 테스트 코드를 작성하기 위해서 테스트 환경을 만들어보자! npm init -y npm install --save jest @types/jest npm init -y 명령어를 통해서 자바스크립트 프로젝트를 만들고 jest를 설치해준다. 테스트 작성하기 // javascript/sum/sum.js function sum(a, b) { return a + b; } export default sum; // 본인은 귀찮아서 그냥 react 환경에서 작성 ㅎㅎ... 아주 간단한 sum 함수이다. 테스트 코드를 작성하기 위해서 sum.test.js 파일을 작성하자 // javascript/sum/..

들어가며 프론트엔드 코드를 많이 작성하지만 내가 작성한 코드를 직접 테스트하는 경우는 있지만 아직까지 Jest 등을 활용해서 테스트를 해본적은 없다. 그래서 이번에 테스트를 어떤 방법으로 해야할지 공부하다가 좋은 글을 발견해서 나만의 글로 정리해보려고 한다. 테스트의 종류 소프트웨어 개발에서 이야기하는 테스트는 일반적으로 unit test, integration test, e2e test이다. unit test unit test는 말그대로 유닛 테스트, 단위 테스트라고 이야기하는데, 함수, 클래스 단위의 모듈을 테스트하고 프론트엔드에서 컴포넌트에 해당하는 파일의 테스트를 말한다. 특정 컴포넌트를 렌더링해서 깨지지 않는지 확인하는 것도 유닛 테스트가 될 수 있다. integration test integr..