React Testing Library 사용하기 (from Scratch) - 1

테스트코드는 왜 중요한가요? 

테스트코드는 코드를 리팩토링 할 때, 혹은 리팩토링을 하지 않아도 중요한 존재입니다. 리팩토링을 할 때에는 테스트코드를 짜두고 리팩토링을 하면 하기 전과 후의 결과가 동일하다는 것을 보장할 수 있습니다. 외에도 새로운 기능이 추가되거나 기존 기능이 변경되었을 때 다른 기능들이 제대로 동작하지 않을 수도 있기 때문에 테스트코드를 만들어두면 유지보수할 때 예상치 못 한 에러들을 미리 방지할 수 가 있습니다. 다양한 개발서적에서도 이 중요성을 굉장히 강조하고 있습니다. 

 

 

React Testing Library는 세부적인 구현사항보다는 실제 사용자 경험과 유사한 방식의 테스트를 작성하기를 권고합니다. 예를 들어서 div 태그를 사용하는지 보다 div 테그의 메세지가 브라우저에 잘 노출이 되는지, button이 잘 뜨는 지 등을 파악하는 것을 더 중요하다고 생각합니다. 

리액트 테스트코드를 짜기 위해서 검색을 하다보면 jest 라는 단어도 많이 보시게 될 것입니다. 역시나 테스트코드를 짜기 위한 도구입니다. 다른 점이 있다면 React Testing Library가 jest를 포함하고 있다고 생각하면 좋을 것 같습니다. jest 는 자체적인 기능 테스트를 할 수 있지만 React 컴포넌트를 렌더링하는 테스트를 하기 위해서는 몇 가지 추가적인 기능들이 필요합니다. 

 

리액트 기본 페이지로 알아보는 테스트코드

제일 처음 리액트 프로젝트를 생성하면 React 로고가 빙글빙글 도는 페이지가 뜹니다. 

그리고 생성된 폴더와 파일을 찬찬히 보시면 APpp.test.js 라는 파일이 있습니다. 

그 파일을 오픈해보시면 네, 여러분은 테스트 코드가 어떻게 생겼는지 보시게 됩니다. 

 

App.test.js

import { render, screen } from "@testing-library/react";
import App from './App';

test('renders learn react link', () =>{
 render(<App />);
 const linkElement = screen.getByText(/learn react/i);
 expect(linkElement).toBeInTheDocument();
}

빙글빙글 돌고 있는 리액트 로고 밑에 자리잡은 링크에 대한 테스트입니다.

App.js 파일에 있는 a tag에 적혀있는 Learn React 라는 텍스트를 딴 단어로 변경하시고 테스트를 돌려봅시다 

테스트 코드를 돌리기 위해서는 터미널을 오픈하시고요 

npm test or yarn test 를 적어주시면 됩니다. 그러면 여러 옵션이 뜨는데요, a를 타이핑하시면 전체 코드를 확인합니다. 

그러면 failed 라고 뜰 겁니다. 

 

 

About Queries

테스트코드를 짜기 위한 다양한 코드가 정말 많습니다. Testing Libarary 쿼리보러가기(https://testing-library.com/docs/queries/about)

필수적으로 test, render 등이 쓰이는데요, test는 method, render은 테스트해야할 특정 컴포넌트를 렌더링하는데 쓰입니다. screen은 쿼리를 사용해서 특정 DOM을 가져오기 위한것이라고 이해하면 좋을 것 같아요. container로 쓰이기도 합니다. screen 뒤에 붙는 getByText 같은 것이 쿼리입니다. 

 

 

 

 

 

 

 

 

학습자료 

◾ https://tecoble.techcourse.co.kr/post/2021-10-22-react-testing-library/

◾ https://testing-library.com/docs/queries/about