테스트 코드를 작성하기 전 정리해야 할 것들

1. 무엇을 렌더링할것인가?
2. 프롭스가 필요한가?
3. wrapper가 필요한가?(Provider, Router 등)
4. 어떤 파일에서 테스트 할 것인가?
5. 어떻게 테스트할 것인가?(테스트 하는 기능들)
6. 비동기 처리가 필요한가?

좀 더 딥하게 생가하고 정리해보자!

1. 무엇을 렌더링할 것인가?
 테스트 하고자 하는 기능을 갖고 있는 최소한의 컴포넌트를 render() 한다.
 테스트하는 document가 render되는 컴포넌트라고 생각했을 때, 내가 테스트해야 하는 기능의 트리거만 있는 컴포넌트만을 렌더해서는 안된다는 것이다.
※ 초반에 테스트 코드를 짤때에 자주 했던 실수 중에 하나가 바로 이부분이었다.

2. 프롭스가 필요한가?
 프롭스에 간단한 값이 필요하다면 값을 주면되지만, 콜백함수가 필요하다면 jest.Fn()과 같이 모킹을 해주어야 한다.

3. wrapper가 필요한가?
 리액트 라우터를 통해 라우팅했다면 BrowserRouter로 감싸줘야할 것이고, 전역상태 관리 툴을 사용했다면 Provider로 감싸줘야할 것이다. 이러한 것들을 wrapper라고 이야기하고 render()의 옵션인 wrapper에 명시해줌으로써 wrapper에 대한 동작을 테스트할 수 있다.
 이러한 부분에 대해 좀 더 이쁜 코드를 작성할 수 있도록 팁이 공식문서에 잘 작성되어 있어서 참고하면 좋다.

리액트 라우터 : https://testing-library.com/docs/example-react-router/
Provider : https://testing-library.com/docs/example-react-context/

4. 어떤 파일에서 테스트 할 것인가?
 기본적으로 테스트 기능이 있는 컴포넌트명에 .test.tsx를 붙여서 사용한다.
 왜 tsx인가? ts에서는 컴포넌트에 대해서 다룰 수 없기 때문에 컴포넌트를 render시키고 테스트하기 위해서 ts가 아닌 tsx로 작성해야 된다.
※ 테스트 코드를 작성했는데 render(<App/>)을 하고 나니 빨간줄이 그어졌다면 확장자를 확인해보자.

5. 어떤 것을 테스트 할 것인가?
 테스트 할 때에 너무 깊게 들어가서 서버에서 이루어지는 로직까지 모킹 함수에 작성하는 경우가 있는데.. 이러지 말자.
 우리는 프론트 단에서 이루어지는 UI에 대한 테스트 코드를 작성한다는 것을 상기하고 모킹을 하더라도 반환되는 값에 대해서 명시하고 그 값을 통해 원하는 UI가 나오는지에 대한 로직을 테스트하면 된다.
 값의 타입은 타입스크립트가 잡아줄 것이고, 테스트 코드를 통해서는 어떤 화면을 내가 기대하는지 작성하고 그 테스트가 통과하는 코드를 짜면 된다.

6. 비동기 처리는 필요한가?
 일단 userEvent를 사용한다면 userEvent 버전 14 이후로는 비동기 처리를 해야한다.
 그리고 내가 어떤 결과를 기다려야 해서 waitFor를 걸거나 findBy 메소드를 사용해야한다면 비동기 처리를 해주어야 한다. 

 

 테스트 코드를 작성하기 전에 먼저 생각해야하는 것들에 대해서 작성해보았다.

 아직 테스트 코드가 익숙하지 않기 때문에 내가 지금까지 느낀 부분에 대해서 적은 것이 정답이 아닐 수 있기 때문에 혹여 글을 읽고 다른 생각을 갖고 있다면 태클 대환영!