테스팅

테스트를 하는 이유

유저가 인터랙트를 할 때 제대로 잘 구동을 하는지 알아보기 위해서 테스팅은 필수이다.
테스팅 결과가 우리가 원하는대로 작동을 할 수록 우리가 원하는 웹 애플리케이션이 만들어졌다고 볼 수 있다.

테스트 기본 규칙

최종 UI만 관심을 가진다.

테스트의 목적은 우리가 원하는대로 결과값이 화면에 띄어지는 지를 살펴보는 것이다. 컴포넌트의 내부의 데이터 흐름까지 검증할 필요는 없다. 예를 들어, 모달을 띄우는 작업을 했을 때 그 작업을 state로 처리했는지, 어떤 state를 사용했는지는 검증할 필요가 없다. 단지 유저가 모달 띄우기 버튼을 크릭했고, 최종화면에서 유저정보가 담긴 UI가 렌더링 되었는지만 확인하면 된다.

페이지 전체를 렌더링하여 테스팅한다.

각각의 컴포넌트는 잘 작동이 되더라도 서로 합쳐져서 작동을 할 때 문제가 발생할 수 있다. 따라서 상호의존적인 컴포넌트들이 통합된 상태로 잘 작동이 되는지를 살펴봐야 한다.

테스트를 할 때는 최대한 분해해서 테스트를 해야 한다.
다음 예제를 살펴보자.

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { fetchUser, selectUser, selectUserFetchStatus } from './userSlice'

export default function App() {
  const dispatch = useDispatch();
  const user = useSelector(selectUser);
  const userFetchStatus = useSelector(selectUserFetchStatus);

  return (
    <div>
      {/* Display the current user name */}
      <div>{user}</div>
      {/* On button click, dispatch a thunk action to fetch a user */}
      <button onClick={() => dispatch(fetchUser())}>Fetch user</button>
      {/* At any point if we're fetching a user, display that on the UI */}
      {userFetchStatus === 'loading' && <div>Fetching user...</div>}
    </div>
  );
}

App 컴포넌트에서는 리듀서, 셀렉터, thunk까지 모두 사용한다. 테스트를 할 때는 다음 조건들을 염두에 두어야 한다.

• 첫 화면에서는 아무런 유저 결과값이 받아와지지 않는다.
• 'Fetch user'라고 쓰여져 있는 버튼을 클릭하면 fetching을 시작한다. 그리고 화면에서는 'Fetching user...'라는 글씨가 보여진다.
• 일정 시간이 지나면 유저 결과값을 받아오고, 더 이상 화면에서는 'Fetching user...'라는 글씨가 안 보인다. 대신 API호출로 받아온 유저의 이름이 스크린에 나타난다.

테스트 방법

컴포넌트를 테스트 할 때는 우리가 원하는대로 웹이 작동 된다고 가정한 채 DOM에 렌더링한다. 렌더 함수 내 wrapper option을 활용해서 우리가 커스터마이징한 렌더함수를 export할 수가 있다.

리덕스 공식문서: https://redux.js.org/usage/writing-tests

참고 블로그: by 카카오헤어샵 개발자