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