Vitest : Query function (쿼리함수)에 대해서

About Queries | Testing Library (testing-library.com)

About Queries | Testing Library

 

쿼리함수란 React Testing Library 패키지에서 제공하는 기능으로 페이지에서 요소를 찾을 수 있도록 도와주는 함수이다. 위의 사이트에서 쿼리 함수에 대해 정보를 얻을 수 있다. 쿼리 함수 종류는 크게 get, query, find로 나뉜다. 

• getBy
  쿼리에 해당하는 하나의 요소를 반환, 요소를 찾지 못하면 에러 발생
• queryBy
  쿼리에 해당하는 하나의 요소를 반환, 요소를 찾지 못하면 null을 반환함. 존재하지 않는 요소 검증 시 유용
• findBy
  쿼리 시행 후 Promise를 반환, 요소를 찾으면 resolve / 찾지 못하거나 2개 이상 찾은 경우 reject 반환
  
  
• 복수개를 찾을 경우 getAllBy, queryAllBy, findAllBy 를 사용한다. 

쿼리함수	설명
ByRole	role 속성 값으로 요소를 찾는다. 기본적으로 가지고 있는 role을 사용할 수 도 있고, 직접 role 속성을 지정할 수도 있다.
ByLabelText	label의 값으로 label과 연결된 input 태그를 찾는다.
ByPlaceholderText	placeholder의 값으로 input 또는 textarea를 찾는다.
ByText	content text 값으로 요소를 찾는다.
ByDisplayValue	input의 form 요소의 현재 value 값을 기준으로 요소를 찾는다.
ByAltText	alt 속성의 값으로 요소를 찾는다.
ByTitle	title 속성의 값으로 요소를 찾는다.
ByTestId	요소에 testid 속성을 부여해서 요소를 찾는다.

 

ByAltText의 경우에는 주로 <img>요소에서 사용된다. ByRole의 경우 기본적으로 가지고 있는 Role은  ARIA - 접근성 | MDN (mozilla.org) 이나 HTML role 속성 여기서 확인이 가능하다.

//Comp01.jsx

export default function Comp01() {
    return (
        <div>
            <h1>코딩쥐의 티스토리</h1>
            <label htmlFor="search">검색</label>
            <input name="search" id="search" placeholder="검색어를 입력하세요" />
            <button title="버튼입니다.">제출</button>
            <ul data-testid="ul">
                <li id="item">아이템 1</li>
                <li id="item">아이템 2</li>
            </ul>
        </div>
    )

};

//Comp01.test.jsx
import { logRoles, render, screen } from '@testing-library/react';
import Comp01 from './Comp01.jsx';

// findBy의 경우 Promise를 반환하기 때문에 동기화 위하여 async, await 사용
test('예시 컴포넌트 테스트', async () => {
    render(<Comp01 />);

    // queryAllBy & ByRole 사용 
    const listItems = screen.queryAllByRole('listitem', { id: /item/i });
    expect(listItems).toHaveLength(2);

    // getBy & ByLabelText 사용 
    const inpEl1 = screen.getByLabelText(/검색/i); // 검색이란 텍스트를 가진 라벨과 연결된 input 찾음
    logRoles(inpEl1); // <input id="search" name="search"  placeholder="검색어를 입력하세요" />
    expect(inpEl1).toBeInTheDocument();

    // findBy & ByPlaceholderText사용
    const inpEl2 = await screen.findByPlaceholderText(/검색어를 입력하세요/i);
    expect(inpEl2).toBeInTheDocument();

    // getBy & ByText 사용
    const heading = screen.getByText(/코딩쥐의 티스토리/i);
    expect(heading).toBeInTheDocument();

    // getBy & ByTitle 사용
    const buttonEl = screen.getByTitle(/버튼입니다./i);
    expect(buttonEl).toBeInTheDocument();

    // getAllBy & ByTestId 사용
    const ul = screen.getAllByTestId('ul');
    expect(ul.length).toBe(1);
});