React Testing Tutorial(7) - getByDisplayValue, getByAltText, getByTitle, getByTestId

getByDisplayValue()

폼 요소(<input/>,<textarea/> 등)에 표시된 텍스트 값을 기반으로 DOM요소를 찾는 데 사용된다.

주로 폼 입력 필드의 값을 확인하거나 해당 값을 가진 요소를 대상으로 테스트할 때 유용하다.

사용 예시

import { render, screen } from '@testing-library/react';

test('input 요소에 입력된 값을 찾습니다.', () => {
  render(<input value="테스트 값" />);

  const inputElement = screen.getByDisplayValue('테스트 값');
  expect(inputElement).toBeInTheDocument();
});

위 코드에서 getByDisplayValue('테스트 값')은 value 속성이 '테스트 값'인 input 요소를 찾는다.

getByAltText()

img, area, input 요소에서 alt 속성을 기반으로 찾는다. 주로 이미지를 대상으로 접근성 테스트나 이미지의 존재 여부를 확인할 때 유용하게 사용된다.

사용 예시

import { render, screen } from '@testing-library/react'

test('이미지 요소에 설정된 alt 텍스트를 통해 이미지를 찾습니다.', () => {
  render(<img alt="테스트 이미지" src="/test.png" />)

  const imageElement = screen.getByAltText('테스트 이미지')
  expect(imageElement).toBeInTheDocument()
})

getByTitle()

요소의 title 속성을 기반으로 DOM 요소를 찾는데 사용된다. title 속성은 주로 요소에 대한 추가 정보를 제공하는 툴팁 형태로 나타나며, 접근성을 개선하거나 사용자에게 추가적인 정보를 제공할 때 유용하다.

사용 예시

import { render, screen } from '@testing-library/react'

test('title 속성을 가진 요소를 찾습니다.', () => {
  render(<button title="저장">Save</button>)

  const buttonElement = screen.getByTitle('저장')
  expect(buttonElement).toBeInTheDocument()s
})

getByTestId()

DOM 요소를 특정 테스트 ID 속성을 통해 찾는데 사용된다.
요소를 선택하는 데 있어 명확한 방식으로 요소에 data-testid 라는 속성을 추가하여 테스트에서 쉽게 선택할 수 있도록 한다

보통 테스트에서만 사용되고, 실제로 UI에서는 보이지 않는다.

사용 예시

import { render, screen } from '@testing-library/react'

test('data-testid를 통해 요소를 찾습니다.', () => {
  render(<div data-testid="custom-element">테스트</div>)

  const element = screen.getByTestId('custom-element')
  expect(element).toBeInTheDocument()
});

getByTestId