게시물 업데이트

2021/02/09 : RTL을 활용한 테스트 (+ Axios Mockup 테스트)
2021/05/05: Axios Mockup 테스트 추가 포스팅

실습 Repository :https://github.com/LeeHyungi0622/react_testing_library_mock_axios_request_practice_repo

React Testing Library 설치

1

$ npm install --save-dev @testing-library/react

React Router Test

이번 포스팅에서는 React router testing에 대해서 정리해보려고 한다.
React router test파일은 <App/> component에 대한 test file을 작성한다.

• 우선 기본적으로 작성할 테스트 케이스의 내용을 정리해보자.

  • (Test case 1) 처음 <App/> component가 rendering될때 root path와 matching되는 Home component가 rendering되는가?
  • (Test case 2) <nav> 태그로 만든 각 menu를 클릭했을때 각 각의 matching되는 component로 rendering이 되는가?
  • (Test case 3) route에 해당하는 path가 없는 경우에는 404 Not Found component가 rendering되는가?
  • (Test case 4) 페이지가 loading되는 동안 <Loading /> component가 페이지가 표시되는가?

  Test case 4의 Loading component가 DOM에 그려지는 것을 확인하기 위해서 component를 Lazy하게 가져와야 한다.