React Testing Tutorial(9) - findBy

findByReact Testing Library에서 DOM요소를 찾을 때 많이 쓰이는 메서드 중 하나인 findBy는 비동기적으로 요소를 찾을 때 유용하다.API 호출이나, 타이머처럼 일정 시간이 지난 후에 렌더링 되는 요소를 테스트할 때 주로 사용된다.findBy는 Promise를 반환한다. 지정된 시간 내에 해당 요소를 찾으면 resolve, 그렇지 않으면 reject 된다. 사용시기데이터 패칭 이후 나타나는 요소setTimeout, setInterval 등으로 일정 시간이 지난 후 나타나는 요소상태 변경으로 인한 렌더링 결과물findBy와 getBy는 유사하지만 비동기 요소를 기다린다는 점에서 다르다.promise를 반환하기 때문에 주로 async/await와 함께 사용된다.const elemen..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2024. 9. 18.
• textsms

React Testing Tutorial(7) - getByDisplayValue, getByAltText, getByTitle, getByTestId

getByDisplayValue()폼 요소(, 등)에 표시된 텍스트 값을 기반으로 DOM요소를 찾는 데 사용된다.주로 폼 입력 필드의 값을 확인하거나 해당 값을 가진 요소를 대상으로 테스트할 때 유용하다.사용 예시import { render, screen } from '@testing-library/react';test('input 요소에 입력된 값을 찾습니다.', () => { render(); const inputElement = screen.getByDisplayValue('테스트 값'); expect(inputElement).toBeInTheDocument();});위 코드에서 getByDisplayValue('테스트 값')은 value 속성이 '테스트 값'인 input 요소를 찾는다.get..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2024. 9. 8.
• textsms

React Testing Tutorial(5) - getByRole, getByRole option

getByRole접근성 트리를 통해 요소를 찾아내는 데 사용하는 메서드이다.사용자가 페이지에서 상호작용 할 수 있는 요소를 찾아내는 데 도움을 준다.주요 개념1. 역할 기반 탐색getByRole은 HTML의 role 속성에 따라 요소를 찾아낸다. 이 role은 스크린 리더와 같은 접근성 도구가 웹 페이지를 해석할 때 사용하는 중요한 속성이다.2. 일치 기준기본적으로 역할 기반으로 찾지만 추가적으로 name옵션을 사용하여 요소의 텍스트나 aria-label과 같은 접근성 속성도 검사할 수 있다.3. 다양한 HTML 요소 탐색버튼, 링크, 이미지, 체크박스 등 다양한 HTML 요소를 탐색할 수 있다., , 등은 각각 button, link , checkbox와 같은 역할을 한다. 'getByRole'을 사..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2024. 8. 25.
• textsms