React Testing Library 사용법
www.daleseo.com
React Testing Library 사용법
React Testing Library는 Behavior Driven Test(행위 주도 테스트) 방법론이 대두 되면서 함께 주목 받기 시작한 테스팅 라이브러리 입니다. 행위 주도 테스트는 기존에 관행이던 Implementation Driven Test(구현 주도 테스트)의 단점을 보완하기 위한 방법론인데요.
Implementation Driven Test에서는 주로 애플리케이션이 어떻게 작동하는지에 대해서 초점을 두어 테스트를 작성합니다. 예를 들어, 아래와 같은 UI를 테스트한다고 했을 때, `<h2>`라는 태그가 쓰였고, `title` 이라는 클래스가 사용되었는지 여부를 테스트합니다.
```html
<h2 class="title">제목</h2>
```
반면에, Behavior Driven Test에서는 사용자가 애플리케이션을 이용하는 관점에서 사용자의 실제 경험 위주로 테스트를 작성합니다. 사용자가 위 UI를 사용하면서 과연 `<h2>` 태그를 사용하고, `title` 이라는 클래스가 사용되었는지 관심이나 있을까요? 사용자 입장에서는 단지 브라우저 화면에 `제목` 이라는 텍스트가 보일 뿐입니다. 따라서, 사용자에게 어떤 컨텐츠가 현재 보이고, 사용자가 어떤 이벤트를 발생시켰을 때, 그에 따라 화면에 변화가 일어나는지를 테스트합니다.
자 여기서, 만약에 추후 어떤 이유로 인해서 `<h2>` 태그가 `<h3>` 태그로 바뀌었을 때는 어떤 일이 날까요? Implementation Driven Test 방법론으로 작성된 테스트는 깨지지만, Behavior Driven Test 방밥론으로 작성된 테스트는 깨지지 않을 것입니다. 애플리케이션 입장에서 봤을 때는 구현의 디테일이 바뀐 것이지만, 사용자 입장에서는 `제목` 이라는 텍스트가 화면있다는 사실은 변함이 없기 때문입니다.
이번 포스팅에서는 Enzyme을 빠르게 대체하면서 React의 테스팅 패러다임을 바꾸고 있는 React Testing Library에 대해서 다뤄 보려려고 합니다. RTL를 이용해서 UI 컴포넌트에 대한 테스트 코드를 어떻게 작성하는지 같이 살펴보시죠!
📝 포스팅: https://www.daleseo.com/react-testing-library/
다음 내용이 궁금하다면?
이미 회원이신가요?
2024년 2월 4일 오전 3:07
댓글 0
함께 읽은 게시물
면접 질문: 같이 일해본 동료 중에 가장 힘들었던 사람은 누구였나요?
면접관으로 들어가면 행동양식 질문으로 물어보는 두 가지 질문이 있다. 하나는 임팩트(Impact)에 관한 것이고 다른 하나는 협업(Collaboration)에 관한 것이다. 임팩트에는 관한 것으로 "커리어에서 가장 임팩트있는 프로젝트에 대해 이야기해달라"는 질
... 더 보기알뜰폰으로 변경하고 싶어도 통신사 서비스에 무언가 묶인게 있어서 바꾸지 못했는데,
생각해보니 기존 통신사는 최저 요금제로 변경하고, 알뜰폰으로 신규 가입을 한 뒤 eSIM으로 추가 등록해서 사용하도록하는 방법이 떠올라 그렇게 함!
나는 가끔 조합형 한글의 아름다움에 대해 생각한다.
그 아름다움은 단순히 예쁜 글꼴이나 정갈한 종이 위의 자소 배열에서 끝나지 않는다. 진짜 매력은, 정밀한 정보 구조와 이산 수학적 규칙성 속에 숨어 있다.
👋 LLM 활용에 도움이 되는 가이드 모음
✅️Prompting Guide 101 by Google : https://lnkd.in/d8UwPWeN
... 더 보기
