리액트 테스트 : React Testing Library로 Counter 테스트하기

React Testing Library는 상용구 제거, 테스트 환경 자동 초기화 등 다양한 기능을 제공합니다.

React Testing Library는 DOM Testing Library의 React 구현입니다.

(다른 구현으로는 React Native Testing Library 등이 있습니다). 

이전 게시물에서 작성한 코드 변경하기

• 돔 생성 보일러플레이트 제거
• 이벤트 보일러플레이트 제거
• 테스트 환경 초기화 보일러플레이트 제거

import * as React from 'react'
import {render, fireEvent} from '@testing-library/react'
import Counter from '../../components/counter'

test('counter increments and decrements when the buttons are clicked', () => {
  const {container} = render(<Counter />)
  const [decrement, increment] = container.querySelectorAll('button')
  const message = container.firstChild.querySelector('div')

  expect(message.textContent).toBe('Current count: 0')
  fireEvent.click(increment)
  expect(message.textContent).toBe('Current count: 1')
  fireEvent.click(decrement)
  expect(message.textContent).toBe('Current count: 0')
})

fireEvent는 ReactTestUtils의 act() 함수로 자동으로 래핑됩니다.

fireEvent를 통해 거의 대부분의 브라우저 이벤트를 발생시킬 수 있습니다.

@testing-library/jest-dom 사용하기

jest 기본 assertion보다 좀더 의미있는 assertion과 log를 얻을 수 있습니다.

test('counter increments and decrements when the buttons are clicked', () => {
  const {container} = render(<Counter />)
  const [decrement, increment] = container.querySelectorAll('button')
  const message = container.firstChild.querySelector('div')

  expect(message).toHaveTextContent('Current count: 0')
  fireEvent.click(increment)
  expect(message).toHaveTextContent('Current count: 1')
  fireEvent.click(decrement)
  expect(message).toHaveTextContent('Current count: 0')
})

변경 전 로그

변경 후 로그

참고

Test Utilities – React (reactjs.org)

Test Utilities – React

Fix the "not wrapped in act(...)" warning (kentcdodds.com)

Fix the "not wrapped in act(...)" warning