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..

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

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..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2024. 9. 1.
• 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

React Testing Tutorial(3) - Assertion, Matchers

Assertions테스트에서 코드의 특정 조건이나 표현이 예상대로 작동하는지를 확인하는 구문을 의미한다.테스트 중인 코드가 기대한 결과를 반환하는지, 특정 상태에 있는지를 확인하기 위해서 사용된다.즉, Assertion은 코드의 동작이 기대와 일치하는지 확인해 주고, 예상과 일치하지 않을 경우 테스트를 실패로 표시한다.테스트를 통과/실패로 만들어 예상과 실제 결과 간의 불일치를 조기에 발견할 수 있게 도와준다.사용 예시expect(value).toBe(expectedValue)위의 구문이 Assertion으로 value가 expectedValue와 동일한지 검사한다.  Matchers테스트 대상 코드의 결과를 예상한 값과 비교하는 데 사용되는 함수이다. expect와 함께 사용되고, 올바로 작동하는지 확..

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