💜가상 DOM에서 요소 찾기

⚡screen

• render에서 생성된 시뮬레이션된 DOM에 엑세스 가능

⚡screen query methods

• 형식

command[All]By{QueryType}

• command
  • get : 요소가 DOM 내에 있을 것 expect
  • query : 요소가 DOM 내에 있지 않을 것 expect
  • find : 요소가 비동기적으로 나타날 경우 expect -> DOM에 비동기적인 업데이트를 기다릴 때 유용
• [All]
  • 포함 : 하나 이상의 매치 expect -> 전체 배열 받음
  • 미포함 : 하나의 매치만 expect
• {QueryType}
  • 무엇으로 검색 하는지
  • Role : 역할, 접근성 때문에 가장 우선시
  • AltText
  • Text
  • PlaceholderText
  • LabelText
  • DisplayValue

⚡query methods 요소 찾을 때 우선순위

• 접근성 고려해서 요소 찾거나 보조 기술(스크린 리더)로 요소 찾는걸 권장(공식문서)

1순위) 다 접근 가능

• getByRole : 페이지에서 요소 역할을 식별(button, heading) (참고문서)
  • 접근 가능한 역할 목록 or role="" 형식으로 추가 가능
  • name 옵션{ name : } 사용해서 해당 역할을 가진 요소들 중 특정 요소 선정
  • logRoles : render 된 컨테이너 안에 어떤 role이 존재하는지 보여줌

    const { container } = render(<App />);
    logRoles(container);

• getByLabelText : 폼에 관해 해당 레이블을 가진 폼 찾을 때 사용
• getByPlaceholderText : 입력 요소에 관해
• getByText : 대화형이 아닌 디스플레이 요소
  • 화면에 존재하지 않음을 테스트 할 때
  • getByText 사용하면 해당 텍스트를 찾을 수 없습니다는 에러 발생
  • queryByText 사용하여 요소를 찾지 못하면 null을 반환하여 not.toBeInTheDocument() 사용 가능

    // 에러 발생
    expect(screen.getByText("화면에 존재하지 않는 텍스트")).not.toBeInTheDocument();
    // 통과
    expect(screen.queryByText("화면에 존재하지 않는 텍스트")).not.toBeInTheDocument();

• getByDisplayValue : 특정 값이 폼 요소 입력 필드에 표시되고 있는지 확인할 때 사용

2순위) 시맨틱 쿼리

• 1번에서 어느 것도 사용할 수 없을 시 사용
• getByAltText : 이미지 관련 요소
• getByTitle : 타이틀 관련 요소

3순위) test id

• 쿼리에 대한 최후 수단으로 꼭 필요한 경우에만 사용
• 사용자가 볼 수도 없고 스크린 리더도 액세스 불가능
• getByTestId : 해당 test id를 가진 요소

💜유저 이벤트 시뮬레이션

• fireEvent
  • @testing-library/react에서 제공하는 기능으로, 이벤트를 강제로 발생
  • 일반적으로 DOM 요소에 대한 이벤트를 발생
  • 테스트하는 동안 사용자의 실제 상호작용을 모방하는 것이 아니라 이벤트를 프로그래밍 방식으로 실행
• userEvent
  • @testing-library/user-event 에서 제공하는 기능으로, 사용자 이벤트를 더 완전하고 현실적으로 시뮬레이션
  • 실제 사용자가 요소와 상호작용하는 것과 유사한 이벤트를 실행하여 테스트
  • setup 메서드에서 반환받는 값으로 user 객체 정의

const user = userEvent.setup();

• 항상 Promise 반환하기 때문에 호출 시 비동기 처리 필요

await user.click(버튼);

💜Assertion(단언)

• 찾은 요소로 유저 이벤트 시뮬레이션을 시킨 후
  코드나 시스템의 특정 부분이 기대한 대로 동작하는지를 검증

⚡jest-dom 의 단언

• 참고 공식문서
• 버튼 : toBeEnabled(), toBeDisabled()
• 체크박스 : toBeChecked()
• 부정의 쌍이 없는 경우 단언 앞에 not 사용