시작/TIL(Today I Learned)177 React Testing Tutorial(9) - findBy findByReact Testing Library에서 DOM요소를 찾을 때 많이 쓰이는 메서드 중 하나인 findBy는 비동기적으로 요소를 찾을 때 유용하다.API 호출이나, 타이머처럼 일정 시간이 지난 후에 렌더링 되는 요소를 테스트할 때 주로 사용된다.findBy는 Promise를 반환한다. 지정된 시간 내에 해당 요소를 찾으면 resolve, 그렇지 않으면 reject 된다. 사용시기데이터 패칭 이후 나타나는 요소setTimeout, setInterval 등으로 일정 시간이 지난 후 나타나는 요소상태 변경으로 인한 렌더링 결과물findBy와 getBy는 유사하지만 비동기 요소를 기다린다는 점에서 다르다.promise를 반환하기 때문에 주로 async/await와 함께 사용된다.const elemen.. 2024. 9. 18. React Testing Tutorial (8) - getAllBy..., textMatch getAllBy-이전까지 getBy-를 이용해서 한 개의 요소를 찾는 방법을 배웠다. 여러 개의 요소가 있는 상황을 테스트하는 상황도 있을 것이다. 이때 사용할 수 있는 방법으로 getAllBy-가 있다. getAllBy-는 getBy-와 비슷하지만, 여러 개의 요소를 찾을 때 사용한다.이전 글들은 1개의 요소를 찾을 때 사용했지만, 이번 글에서는 여러 개의 요소를 찾을 때 사용하는 방법을 알아보자.사용법const elements = screen.getAllByRole("textbox")expect(elements).toHaveLength(2) // textBox가 2개 있을 때주의사항getAllBy-는 요소가 없을 때 에러를 발생시킨다.getAllBy-는 요소가 1개일 때도 에러를 발생시킨다.getAl.. 2024. 9. 11. 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.. 2024. 9. 8. React Testing Tutorial(6) - getByLabelText(), getByPlaceholderText(), getByText() 1. getByLabelText()getByLabelText 함수는 폼 요소를 테스트할 때 주로 사용되다. 요소에 연결되어 있는 폼 요소(ex: input, textarea 등)를 쉽게 찾을 수 있게 도와준다.label에 연결된 폼 요소는 보통 접근성을 위해서 사용되며, getByLabelText를 사용하면 사용자가 실제로 인터페이스와 상호작용하는 방식과 유사한 방식으로 테스트할 수 있다.사용 예시아래와 같은 폼 요소가 있을 때UsernamePassword테스트 코드를 작성 시 getByLabelText()를 이용해서 input요소를 선택할 수 있다.text('폼 요소 테스트', () =>{ render() const usernameInput = screen.getByLabelText("Use.. 2024. 9. 1. React Testing Tutorial(5) - getByRole, getByRole option getByRole접근성 트리를 통해 요소를 찾아내는 데 사용하는 메서드이다.사용자가 페이지에서 상호작용 할 수 있는 요소를 찾아내는 데 도움을 준다.주요 개념1. 역할 기반 탐색getByRole은 HTML의 role 속성에 따라 요소를 찾아낸다. 이 role은 스크린 리더와 같은 접근성 도구가 웹 페이지를 해석할 때 사용하는 중요한 속성이다.2. 일치 기준기본적으로 역할 기반으로 찾지만 추가적으로 name옵션을 사용하여 요소의 텍스트나 aria-label과 같은 접근성 속성도 검사할 수 있다.3. 다양한 HTML 요소 탐색버튼, 링크, 이미지, 체크박스 등 다양한 HTML 요소를 탐색할 수 있다., , 등은 각각 button, link , checkbox와 같은 역할을 한다. 'getByRole'을 사.. 2024. 8. 25. React Testing Tutorial(4) - RTL Queries RTL Queries는 React Testing Library (RTL)에서 제공하는 DOM 요소를 선택하고 검증하기 위한 함수들을 의미한다.RTL은 React 컴포넌트의 UI와 상호작용을 테스트하기 위해서 사용되는 라이브러리로 이 라이브러리의 핵심 기능 중 하나가 queries이다.RTL에서 제공하는 주요 queries1. getBy조건에 맞는 단일 요소를 반환, 찾지 못하면 테스트가 실패한다.// 'submit' 텍스트를 포함하는 요소를 반환getByText('submit')2. queryBy조건에 맞는 단일 요소를 반환, 찾지 못하면 'null'을 반환요소가 1개 이상 있을 경우 에러를 발생한다.// 'submit' 텍스트를 포함하는 요소를 반환하거나 null을 반환queryByText('submi.. 2024. 8. 15. 이전 1 2 3 4 ··· 30 다음 728x90
