[React] React Testing Library 활용하기

 

1. React Testing Library란?

테스트가 소프트웨어가 사용되는 모습을 닮을 수록 테스트는 더욱 신뢰할 수 있게 된다.

The more your tests resemble the way your software is used,
the more confidence they can give you.

 

React 컴포넌트의 특정 메서드나 상태를 테스트하는 게 아니라, 컴포넌트가 렌더링한 결과와 상호작용하는 방법을 모방하는 쿼리를 사용한다. 그래서 사용자가 페이지에서 DOM 요소를 찾고 상호작용하는 것과 유사항 방식으로 테스트 코드를 작성할 수 있다.

이로 인해 컴포넌트 내부 구현이 변경되더라도 테스트 코드가 깨지지 않고 유연하게 유지 된다.

 

RTL 주요 목표는 컴포넌트의 사용자 경험을 테스트하는 것으로, 내부 상태나 메서드에 대한 직접적인 접근을 제한해서 테스트 코드가 컴포넌트의 내부 구현에 민감하지 않도록 한다. 이를 통해 테스트 코드가 실제 사용자 동작을 모방하고 신뢰성을 향상 시킬 수 있다.

 

2. get

- getBy: 원하는 요소를 찾지 못할 경우나 여러개의 요소를 찾을 경우 에러를 던진다.

- getAllBy: 여러 요소를 찾아 배열을 반환한다. 원하는 요소를 찾지 못할 경우 에러를 던진다. 원소가 반드시 페이지에 존재해야만 하는 경우 활용한다.

 

3. find

- findBy: 원하는 원소가 없더라도 비동기적으로 기다린다. 여러 원소를 찾거나정해진 timeout 동안 찾지 못하면 에러를 던진다.

- findAllBy: 여러 원소를 검색해 배열을 반환한다. 정해진 timeout동안 찾지 못하면 에러를 던진다. Promise를 리턴해서 실패 시 reject, 성공 시 resolve. 어떤 유저의 동작 후 등장하는 원소 등을 테스트하고자 할 때 활용한다.

 

4. query

- queryBy: getBy와 비슷하게 원소를 찾아 반환하거나, 못찾을 경우 에러를 던지지 않고 null을 반환한다. 여러 원소를 찾으면 에러를 던진다.

- queryAllBy: getAllBy와 비슷하게 여러개의 원소를 찾아 배열로 반환하거나, 하나도 찾지 못하면 에러 대신 빈 배열을 반환한다. 특정 요소를 찾을 수 없음을 assertion의 기준으로 둘 때 활용한다.

 

5. container

- container: 컴포넌트를 렌더한 결과를 감싸는 원소. queryseletor(), querySelectorAll()을 이용해서 selector 문법으로 원소를 선택할 수 있다.

 

 

6. jest-dom

RTL은 Jest를 확장하여 좀 더 쓰기 편한 assertion을 제공한다.

toBeInTheDocument(), toHaveValue(), toBeDisabled(), toBeVisible() 등 DOM 테스팅에 특히 유용한 assertion 메서드를 제공한다.