doeunn.log

본 포스팅은 아래 글을 토대로 정리된 내용입니다 :) Common mistakes with React Testing Library Some mistakes I frequently see people making with React Testing Library. kentcdodds.com 위 글에서는 다음과 같은 중요도에 따라 레이블을 지정했습니다. 낮음(⭐) : 이것은 대부분 개인적인 의견일 뿐이므로, 자유롭게 무시해도 괜찮을 것이다. 중간(⭐⭐) : 버그를 경험하거나, 신뢰도를 잃거나, 필요치 않은 작업을 하게 될지도 모른다. 높음(⭐⭐⭐) : 꼭 이 조언을 듣자! 신뢰도가 낮거나 문제가 있는 테스트가 있을 수 있다. 1. Testing Library ESLint 플러그인을 사용하지 않음 ⭐⭐ → Te..

screen 객체 screen은 React Testing Library(RTL)의 주요 객체 중 하나입니다. 테스트 대상이 되는 컴포넌트를 가리키는 역할을 합니다. screen 객체는 DOM 요소에 접근하고, 요소를 검색하고, 상태를 확인하는 데 사용됩니다. screen 객체의 주요 메서드 중 하나가 "query" 메서드인데요! screen.query 메서드는 주어진 선택자를 사용하여 DOM에서 요소를 찾습니다. → 요소가 존재하지 않으면 null → 요소를 찾으면 해당 요소 return 이를 통해 테스트에서 화면에 특정 요소가 있는지 확인하거나 상태를 검증할 수 있는 것입니다! React Testing Library의 screen 객체에는 다양한 메서드가 있으며, 필요에 따라 적절한 메서드를 사용하여 ..

TDD 원칙대로 세팅 TDD 원칙대로라면 기능 코드를 추가하기 전에 테스트를 작성해야 합니다. 이번 예제에서는 App.js에서 할 거라 App.js를 비워주겠습니다. 📜 App.js 파일 function App() { return ; } export default App; 1. 테스트하려는 내용들 세팅 전역 테스트 메서드인 test에는 총 2개의 인자가 들어간다고 했었습니다. 첫 번째 인자에는 테스트의 문자열 설명, 두 번째 인자에는 테스트 함수입니다. 우선 내가 테스트하고자 하는 내용들을 모두 적어서 세팅해봅시다. 저는 버튼에 올바르게 초기 색상이 적용되었는지, 클릭 시 파란색으로 바뀌는지 기능 테스트까지 해보려고 합니다. 📜 App.test.js 파일 test('button has correct in..

React Testing Library(RTL) 소개 React Testing Library는 세부적인 구현 사항보다는 실제 사용자 경험과 유사한 방식의 테스트를 작성할 것은 권고합니다. 예를 들어 Hello world 라는 코드가 있다면 RTL은 태그를 사용하는지보다 Hello world 메시지가 브라우저에 노출이 되는지 파악하는 것을 더 중요하다고 봅니다. 구현보다는 기능에 초점을 맞춘 테스트 방식이라고 할 수 있습니다 :) RTL은 이름 그대로 React 컴포넌트를 테스트 하기 위해 만들어진 도구이기 때문에, 기본적으로 CRA에 내장되어 있습니다. RTL의 역할 - 테스트를 위한 가상 DOM을 생성 - DOM과 상호 작용하기 위한 유틸리티도 제공 - 브라우저 없이도 테스트를 가능하도록 테스트 유형 ..

Jest 이번 포스팅의 주제인 React Testing Library(RTL)는 컴포넌트를 가상 DOM으로 렌더링하는데 도움이 됩니다. 지난 글에서 render를 통해 확인했었습니다. 또한, 가상 DOM을 검색하는 데 도움이 되는데 create-react-app과 제공되는 테스트에서 getByText 메서드를 확인했습니다. 아직 사용하진 않았지만, 곧 가상 DOM과 상호 작용하여 요소를 클릭하거나 텍스트를 입력할 것입니다. 여기까지가 RTL의 역할입니다. 테스트 러너의 필요 → Jest 테스트를 찾고 실행하며 단언(Assertion)할 무언가가 필요합니다. 이때 Jest를 사용합니다. Jest가 유일한 테스트 러너는 아니며 Mocha나 Jasmine도 있지만 테스팅 라이브러리에서 Jest를 권장하며 cr..

Testing을 하는 이유 Testing이란 코드의 에러를 확인하고 추후 나타날 수 있는 이슈와 버그를 예측하는 과정인데요. 즉, 모듈, 함수에 특정 값을 대입했을 때 기대한 결과값이 도출되는지, 렌더링된 화면에 내가 원하는 요소, 콘텐츠 등이 들어있는지 등을 확인하기 위해서입니다. 이걸 다르게 생각해 보면, 내가 만든 서비스를 매번 일일이 실행한 후에 모든 기능을 손수 눌러서 확인하지 않고도 내가 의도한 대로 온전히 작동하는지 빠르게 점검하기 위함이 되겠습니다. 테스트 실행 $ npm test 위 명령어를 bash에 입력해주게 되면, Jest에서 Watch 모드 실행으로 시작되게 됩니다. 우선 지금은 a를 입력해서 테스트를 실행해 봅시다. 테스트는 실행했고, 한 개의 테스트를 찾아 통과했습니다. 그런데..