쿼리함수란?

React Testing Library에서 쿼리 함수는 특정 조건을 충족하는 요소를 DOM에서 찾을 때 사용되는 함수이다.
쿼리는 페이지에서 요소를 찾기 위해 테스트 라이브러리가 제공하는 방법이다.
이들 간의 차이점은 요소가 발견되지 않으면 쿼리에서 오류가 발생하는지 또는 Promise를 반환하고 다시 시도하는지 여부이다.

• getBy...
  getBy 접두사가 붙은 함수는 일치하는 요소가 없거나 둘 이상의 일치가 발견되면 에러를 throw한다. (둘 이상의 요소가 예상되는 경우 대신 getAllBy 사용) 즉, 요소가 반드시 존재해야하면, 주로 테스트에서 필수적으로 존재해야하는 요소를 선택할 때 사용한다.

test('getBy example', () => {
  render(<MyComponent />);
  const buttonElement = screen.getByRole('button', { name: 'Click me' });
  expect(buttonElement).toBeInTheDocument();
});

• queryBy...
  queryBy 접두사가 붙은 함수는 일치하는 요소가 없으면 null을 반환한다. 에러가 방생하지 않으므로 요소가 존재하지 않아도 테스트를 계속 진행할 수 있다. 주로 선택적으로 존재할 수 있는 요소를 선택할 때 사용한다. 둘 이상의 일치 항목이 발견되면 오류가 발생한다. (확인된 경우 대신 queryAllBy 사용).

test('queryBy example', () => {
  render(<MyComponent />);
  const optionalElement = screen.queryByTestId('optional-element');
  expect(optionalElement).toBeNull();
});

• findBy...
  findBy 접두사가 붙은 함수는 비동기적으로 해당 조건을 충족하는 요소를 찾는다. 주어진 쿼리와 일치하는 요소가 발견되면 Promise를 반환한다. 요소가 발견되지 않거나 기본 제한 시간이 1000ms 후에 둘 이상의 요소가 발견되면 promise가 거부된다. 둘 이상의 요소를 찾아야하는 경우 findAllBy를 사용한다.

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

test('findBy example', async () => {
  render(<MyComponent />);
  const loadingElement = screen.getByText('Loading...');
  expect(loadingElement).toBeInTheDocument();
  await screen.findByText('Loaded');
  const loadedElement = screen.getByText('Loaded');
  expect(loadedElement).toBeInTheDocument();
});