테스팅 쿼리

screen 쿼리 목록

https://testing-library.com/docs/queries/about/#priority

About Queries | Testing Library

getByRole의 역할 목록

https://www.w3.org/TR/wai-aria/#role_definitions

Accessible Rich Internet Applications (WAI-ARIA) 1.2

logRoles를 사용하면 역할을 알아낼 수 있음

import { logRoles, render, screen } from "@testing-library/react";
import App from "./App";


test("버튼의 초기 색상이 올바른지 테스트", () => {
  const { container } = render(<App />);
  logRoles(container);
  
  
//
  console.log
    button:

    Name "파란색으로 변경":
    <button
      style="background-color: red;"
    />

매처 목록

https://github.com/testing-library/jest-dom

GitHub - testing-library/jest-dom: :owl: Custom jest matchers to test the state of the DOM

쿼리 기본 매커니즘

command[all]ByQueryType

아래 항목들을 조합해서 사용

 

command

get - DOM에 있을 것으로 expect하는 경우 사용

query - 요소가 DOM 내에 있지 않을 것으로 expect하는 경우 사용 (ex. 툴팁 등)

find - 쿼리는 요소가 나타날 것으로 예상하지만 DOM에 대한 변경이 즉시 발생하지 않을 수 있을 때 작동. (비동기에 사용)

 

[all]

생략 가능

 

QueryType

Role (대부분의 경우)

AltText (image)

Text (보이는 요소)

PlaceholderText, LabelText, DisplayValue (form 요소들)

쿼리 상세

getByRole

접근성 트리 에 노출된 모든 요소를 ​​조회하는 데 사용할 수 있다. 이 옵션을 사용하면 액세스 가능한 이름 name 으로 반환된 요소를 필터링할 수 있다.

예시 )

screen.getByRole('button', {name: /submit/i})

매처

숫자나 문자열 => toBe()

객체나 배열 => toEqual()

 

부정의 경우 not을 붙이면 됨  - 예시) .not.toBeChecked()

toHaveStyle(css: string | object) - 스타일 확인

 

주의

둘 다 통과되는 오류가 있다.

.toHaveStyle({backgroundColor: 'red'})
.toHaveStyle({backgroundColor: 'I can put anything I want in here'})

케밥 케이스를 사용하면 해당 오류 해결 가능

.toHaveStyle({ "background-color": "red" });

.toHaveStyle("background-color: red");

렌더링 일으킨 다음 다시 조회해야 함

await userEvent.click(요소);

 expect(items.length).toBe(2);
await userEvent.click(요소);

 expect(items.length).toBe(1);

 

toHaveTextContent(text: string | RegExp, options?: {normalizeWhitespace: boolean}) - 텍스트 확인

toBeEnabled() / toBeDisabled() - 활성화 됐는지

toHaveBeenCalledTimes => 최소 호출 횟수

toBeCalledTimes => 정확한 호출 횟수

toHaveBeenCalledWith vs toBeCalledWith => 똑같은 기능임

 

가상 DOM에만 적용할 수 있는 매처

toBeInTheDocument()

toBeVisible()

toBeChecked()