리액트 테스트 : Context API 테스트와 커스텀 렌더 함수 사용하기

TLDR : UI 사용자가 관심 없는 건 구현 상세입니다.

컨텍스트를 사용하는 컴포넌트를 테스트하려면 wrapper가 필요합니다.

(ThemeProvider, Router, Authentication)

우리가 UI를 테스트 하는 이유는, bad ux(사용자 관점 버그)를 막기 위함입니다.

 

따라서 테스트 코드는 UI적인 관점만 드러나면 좋습니다.

코드가 아닌 사용자의 행동으로 UI가 변해야 하는 경우 act 함수를 통해 명시한 것도 비슷한 맥락입니다.

따라서, render 관련한 함수도, 유틸로 분리합니다.

---

테마를 테스트 하는 코드

얼핏 보면 렌더가 뭔가 이상합니다. 이는 컨텍스트를 테스트의 관심사에서 제외해 버렸기 때문입니다.

대신 테스트 자체에 좀 더 집중할 수 있습니다. (테마의 변경)

https://github.com/kentcdodds/testing-react-apps/blob/main/src/__tests__/final/07.extra-3.js

GitHub - kentcdodds/testing-react-apps: A workshop for testing react applications

import * as React from 'react'
import {render, screen} from 'test/test-utils'
import EasyButton from '../../components/easy-button'

test('renders with the light styles for the light theme', () => {
  render(<EasyButton>Easy</EasyButton>, {theme: 'light'})
  const button = screen.getByRole('button', {name: /easy/i})
  expect(button).toHaveStyle(`
    background-color: white;
    color: black;
  `)
})

test('renders with the dark styles for the dark theme', () => {
  render(<EasyButton>Easy</EasyButton>, {theme: 'dark'})
  const button = screen.getByRole('button', {name: /easy/i})
  expect(button).toHaveStyle(`
    background-color: black;
    color: white;
  `)
})

아래의 테스트 유틸리티를 사용합니다.

https://github.com/kentcdodds/testing-react-apps/blob/main/src/test/test-utils.js

GitHub - kentcdodds/testing-react-apps: A workshop for testing react applications

import * as React from 'react'
import {render as rtlRender} from '@testing-library/react'
import {ThemeProvider} from 'components/theme'

function render(ui, {theme = 'light', ...options} = {}) {
  const Wrapper = ({children}) => (
    <ThemeProvider initialTheme={theme}>{children}</ThemeProvider>
  )
  return rtlRender(ui, {wrapper: Wrapper, ...options})
}

export * from '@testing-library/react'
// override React Testing Library's render with our own
export {render}

위와 같은 방식으로 컨텍스트가 필요한 경우, 테스트 유틸로 구현을 분리하여, 테스트의 의도가 더 잘 드러나게 할 수 있 있습니다.

참고

https://github.com/kentcdodds/testing-react-apps/blob/main/src/__tests__/exercise/07.md

GitHub - kentcdodds/testing-react-apps: A workshop for testing react applications

https://testing-library.com/docs/react-testing-library/api#wrapper

API | Testing Library

https://testing-library.com/docs/react-testing-library/setup

Setup | Testing Library