도입 이유

• 지난 프로젝트 때, 바닐라JS로 개발하는 과정에서 렌더링 문제로 많이 고생을 한 기억이 있다. 아마 바닐라에서 상태를 직접 컨트롤 해줘야하기 때문에 발생한 문제라 상태 기반으로 가상 dom을 이용하는 리액트에서는 다소 고생이 덜 할 것 같다. 그리고, 예상치 못한 결과값, 예상치 못한 에러를 데모 시간에 다른 분들이 직접 사용해보면서 기능에 문제가 조금 있었던 것을 느꼈습니다. 그래서 이번 프로젝트에서는 테스팅을 맛보고 도입해서 간략하게 컴포넌트, 기능 등의 테스팅은 어떻게 이루어지는지 학습할 예정입니다.

설정

global

컴포넌트 전역으로 사용하고 있는, emotion, provider 설정을 똑같이 해주면 된다.

공통 모듈 test-utils.tsx

import { ThemeProvider } from '@emotion/react'
import { render, RenderOptions } from '@testing-library/react'
import CartProvider from 'contexts/CartProvider'
import React, { ReactElement } from 'react'
import { theme } from 'utils/styles'

interface Props {
  children: React.ReactNode
}

export const CustomProvider = ({ children }: Props) => {
  return (
    <ThemeProvider theme={theme}>
      <CartProvider> {children}</CartProvider>
    </ThemeProvider>
  )
}

const customRender = (
  ui: ReactElement,
  options?: Omit<RenderOptions, 'wrapper'>,
) => render(ui, { wrapper: CustomProvider, ...options })

export * from '@testing-library/react'
export { customRender as render }

사용자 정의 파일에서 전역으로 설정해 둔 파일을 이용해서 테스팅 시작

import { render, screen, fireEvent } from './test-utils'

컴포넌트 렌더링 테스트 방법

1. render 메소드를 이용하여 컴포넌트를 렌더링 시켜준다.
2. 필수적으로 내려줘야하는 props가 있다면 더미데이터 props 주입
3. getByText or getBy등의 메소드를 이용하여 컴포넌트 내부에 존재하는 것을 아무거나 가져와서 잘 렌더링 되었는지 표시
4. 여기에서는 render에서 chilrdren으로준 "버튼" 텍스트가 화면에 잘 보이는지 테스팅 한다.

describe('버튼 컴포넌트 테스트<Button />', () => {
  it('렌더링 테스트', () => {
    render(<Button>버튼</Button>)
    const button = screen.getByText('버튼')

    expect(button).toBeInTheDocument()
  })
})

사용자 액션 테스트 방법

1. ex) 버튼 클릭 시 함수가 제대로 실행 되는지 테스트 한다고 가정
2. 버튼 컴포넌트 렌더링 props로 원하는 이벤트 함수 정의 jest.fn() 키워드 이용
3. 버튼 컴포넌트를 실행하기 위해 정보를 가져옴 screen.getByText('버튼')
4. 이벤트 실행 메서드 fireEvent를 이용하여 원하는 동작 이벤트 발생