@reach/router 좋군 …
1. 프로젝트 생성
CRA 로 프로젝트를 생성하게되면 Test 에 필요한 라이브러리 및 환경이 함께 설치된다.
$ npx create-react-app router-testing- testing-library/react: React 컴포넌트를 테스트하기 위한 DOM Testing Library 이다.
- testing-library/jest-dom: jest 테스트위한 custom matcher 들을 제공한다.
- testing-library/user-event: fire-event 보다 나은 브라우저 interactions simulation 을 제공한다.
2. Router 추가
테스트를 위해 Reach/Router 를 사용한다.
Reach/Router 는 React Router, Ember, Preact Router 의 아이디어를 기반으로한 Router 이다. React Router 보다 가볍고, 단순하며 쉽게 사용 할 수 있다.
$ npm i -S @reach/router3. 페이지 컴포넌트 추가
- Link: to prop 을 이용하여 원하는 페이지로 이동이 가능하다.
- Router: Route Componet 를 자식으로 가진다. 각 Route Comonent 는 path prop 을 가진다. default prop 을 이용하면 매칭되지 않는 모든 path 를 특정 페이지로 보낼 수 있다.
4. 테스트
- createHistory: location 의 변화를 감지하는 history object 를 생성한다. 주로 테스트 용도로 사용한다.
- createMemorySource: 메모리에서 history stack 을 관리하는 source 를 생성한다. 주로 테스트 용도로 사용한다.
- LocationProvider: location 변경을 감지하고 필요한 API 를 자동으로 설정해준다. (ex. location, navigate). 주로 테스트 용도로 사용한다.
