[React] Jest Testing Library, Query 사용 우선 순위

Narcoker·2023년 7월 5일

React

목록 보기

23/32

위에 언급된 Query 가 더 우선 순위가 높다.

누구나 접근가능한 Query

시각적/마우스 이벤트는 사용자가 보조 기술을 통해 사용자의 경험을 반영하는 쿼리

getByRole

DOM Tree 에 노출된 모든 요소를 조회하는 데사용할 수 있다.
옵션으로 엑세스 가능한 이름을 사용함으로써 엘리먼트를 반환 받을 수 있다.
getByRole('button', {name: /submit/i})

getByLabelText

form 요소들을 가지고 올 때 유용하게 쓰인다.

getByPlacehoderText

getByPlaceholderText 함수는 플레이스홀더 텍스트를 가진 input 요소를 찾는 데 사용된다.
예를 들어, 사용자에게 입력받는 필드인 input 요소가
'Enter your name'이라는 플레이스홀더를 가지고 있을 때,
getByPlaceholderText 함수를 사용해 해당 요소를 찾을 수 있습니다.
import { render, screen } from '@testing-library/react';
import YourComponent from './YourComponent';

test('find an element with the placeholder text', () => {
  render(<YourComponent />);
  const inputElement = screen.getByPlaceholderText('Enter your name');
  // 이후에는 inputElement를 가지고 원하는 테스트 작업을 수행합니다. 예를 들면:
  // expect(inputElement.value).toBe('initial value'); 등
});

getByText

getByText는 Testing Library에서 제공하는 쿼리 함수 중 하나로,
주어진 텍스트 내용을 가진 DOM 요소를 찾는다.

getByText는 인수로 전달된 텍스트와 일치하는 텍스트 노드를 가진 요소를 찾는다.
이 함수는 텍스트 노드의 내용이 주어진 문자열이나 정규식,
또는 함수와 일치할 때까지 DOM 트리를 순회합니다.
import { render, screen } from '@testing-library/react';
import YourComponent from './YourComponent';

test('find an element with the given text', () => {
  render(<YourComponent />);
  const element = screen.getByText('Hello, world!');
  // 이후에는 element를 가지고 원하는 테스트 작업을 수행합니다.
});

getByDisplayValue

입력 필드(input, select, textarea 등)의 현재 값을 가진 DOM 요소를 찾는다.

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

test('find an input with the given value', () => {
  render(<YourComponent />);
  const inputElement = screen.getByDisplayValue('Specific Value');
  // 이후에는 inputElement를 가지고 원하는 테스트 작업을 수행합니다.
});

시멘틱 Query

getByAltText

대체 텍스트(alt text)에 따라 이미지나 다른 요소를 찾는다.

이미지의 alt 속성은 그 이미지가 표현하는 내용을 설명하는 텍스트이다.
이 속성은 보조 기술(예: 스크린 리더)에게 이미지의 내용을 전달하는 데 중요하며,
이미지가 로드되지 않을 때 표시된다.
import { render, screen } from '@testing-library/react';
import YourComponent from './YourComponent';

test('find an image with the given alt text', () => {
  render(<YourComponent />);
  const imageElement = screen.getByAltText('Specific Alt Text');
  // 이후에는 imageElement를 가지고 원하는 테스트 작업을 수행합니다.
});

getByTitle

HTML 요소의 title 속성을 기반으로 요소를 선택한다.

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

test('find an element with the given title', () => {
  render(<YourComponent />);
  const element = screen.getByTitle('Specific Title');
  // 이후에는 element를 가지고 원하는 테스트 작업을 수행합니다.
});

테스트 ID

getByTestId

테스트 용으로 지정된 고유한 data-testid 속성을 가진 요소를 선택합니다.

data-testid 속성은 테스트를 위한 목적으로 만들어진 고유 식별자로,
테스트 중인 컴포넌트의 DOM 구조나 스타일이 변경되더라도 안정적으로 요소를 찾을 수 있게 해준다.
일반적으로 이 속성은 테스트의 목적으로만 사용되며,
사용자 인터페이스나 접근성에는 영향을 주지 않는다.
import { render, screen } from '@testing-library/react';
import YourComponent from './YourComponent';

test('find an element with the given data-testid', () => {
  render(<YourComponent />);
  const element = screen.getByTestId('your-test-id');
  // 이후에는 element를 가지고 원하는 테스트 작업을 수행합니다.
});