[React] 테스팅 패턴 - 설정과 해지

설정과 해지를 통한 환경의 격리

테스트하고자 하는 컴포넌트를 순수하게 외부환경으로 부터 격리할 수 있다

환경변수, 글로벌 변수, import, 다른 리액트 컴포넌트로 부터

언제 어디서나 테스트가 실행되더라도 같은 결과를 낼 수 있도록 통제할 수 있다.

 

테스트 전에 데이터 세팅, 특정 모듈 모킹 등 동작을 통해 테스트 시작환경이 동일하도록 조성하고

같은 방식으로 테스트 수행 이후에 테스트 동안에 변경되었던 값을 초기화 하여 차후 테스트에 주는 영향을 방지한다. 

 

설정 (Setup)과 해지 (Teardown) 예시

Timer를 이용하는 경우 (setTimeout, setInterval, clearTimeout, clearInterval) 테스트는 예측이 어려워지고 느려진다.

이런 경우에는 fake timer를 이용하는것이 좋다.

 

설정

beforeEach(() => {
   jest.useFakeTimers() // timer 모킹
})

 

해지

afterEach(() => {
    jest.runOnlyPendingTimers() // 수행되지 않았던 타이머 실행
    jest.useRealTimers() // 모킹제거
})

 

다음 테스트에 영향을 주는 것들을 제거해 주어야 한다. fake timer를 사용하는 주된 이유는 3rd 파티 라이브러리가 테스트가 끝난 이후 실행되는 시점에서 fake timer의 사용으로 인해서 제대로된 동작을 안할 수도 있기 때문에 real timer로 교체를 해주어야 한다. 

 

 

간단한 Counter Application 

요구사항

기능1. 초기값이 0이다.

기능2. +버튼 클릭 시 1이 증가

기능3. -버튼 클릭 시 1이 감소

기능4. reset 버튼 클릭 시 0으로 리셋

 

import { FC, useState } from "react"

type Props = {
    initialCount?: number
}
export const Counter: FC<Props> = ({ initialCount = 0 }: Props) => {
    const [count, setCount] = useState<number>(initialCount)
    const increase = () => setCount(count + 1)
    const decrease = () => setCount(count - 1)
    const reset = () => setCount(initialCount)
    return (
        <div>
            <button name='-' onClick={decrease}> - </button>
            <div role='count'>
                {count}
            </div>
            <button name='+' onClick={increase}> + </button>
            <button name='reset' onClick={reset}> reset </button>
        </div>
    )
}

 

테스트 코드

import { Counter } from "@/components/Counter"
import { render, screen } from "@testing-library/react"

describe("Counter component", () => {
	// 초기값 확인테스트 코드
    it("InitialCount = 0", () => {
        render(<Counter />)
        expect(screen.getByRole('count').textContent).toBe('0')
    })
})

 

일반적으로는 React Testing Library의 함수 내부에서 설정과 해지를 진행한다.

timer를 이용하는 등 예외적인 상황에서는 설정과 해지를 반드시 체크 해야한다. 

 

설정과 해지 함수의 동작 순서

 * { // 1-beforeAll, 모든 scope의 테스트 동작 시작 전, 
 *      { // 1-beforeEach, root scope test 동작 전 
 *          // do test
 *      } // 1-afterEach, // root scope test 동작 전
 *      {
 *          // 2-beforeAll
 *          { // 1 beforeEach
 *              { // 2-beforeEach, root scope test 동작 전 
 *                  // do test
 *              } // 2-afterEach, // root scope test 동작 전  
 *          } // 1 afterEach
 *          // 2-afterAll
 *      }
 * } // 1-afterAll, 모든 scope의 테스트 동작 시작 전,

 

 

[참고]

패스트캠퍼스 강의 (100가지 시나리오로 학습하는 프론트엔드 : 5년 이상 경험을 초압축한 실전 문제 해결 패키지) 를 기반으로 작성하였고, 추가 서치 내용을 정리하였습니다.