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개일 때도 에러를 발생시킨다.
• getAllBy-는 요소가 2개 이상일 때 사용한다.
• getAllBy-는 배열을 반환한다.

getBy-와 getAllBy-의 차이점

메서드	반환 값	요소가 없을 때	요소가 여러 개일 때	사용 시점
getBy	하나의 요소	에러 발생	첫 번째 요소만 반환	요소가 하나일 것으로 예상될 때
getAllBy	요소들의 배열	에러 발생	모든 요소를 배열로 반환	요소가 여러 개일 것으로 예상될 때

textMatch

textMatch는 React Testing Library에서 사용하는 옵션 중 하나로, 요소를 찾을 때 텍스트 일치 조건을 지정하는 방법이다.
주로 getByRole, getByText, findByText 등의 메서드와 함께 사용하며, 특정 텍스트와의 일치 기준을 설정할 수 있다.

사용법

단순 텍스트 일치

가장 기본적인 방식으로, 텍스트가 완전히 일치하는 경우에만 요소를 찾는다.

screen.getByText("Hello, World!", { exact: true })

exact 옵션은 텍스트가 완전히 일치하는지 여부를 설정하는 옵션이다. 기본값은 true이며, false로 설정하면 대소문자를 구분하지 않고 일치하는 요소를 찾는다.

정규 표현식 사용

정규 표현식을 사용하여 텍스트를 찾을 수 있다. 정규 표현식을 사용하면 텍스트의 일부만 일치하거나 대소문자를 구분하지 않고 찾을 수 있다.

screen.getByText(/hello/i) // 대소문자 구분 없이 hello를 찾음
screen.getByText(/world/) // world를 포함하는 텍스트를 찾음

함수 사용

함수를 사용하여 텍스트를 찾을 수 있다. 함수를 사용하면 텍스트를 동적으로 찾을 수 있다.
함수의 인자값은 2가지이다.

(content?: string, element?: Element | null) => boolean

 

 

// hello로 시작하는 텍스트를 찾음
screen.getByText((content, element) => content.startsWith("hello"))

// p 태그 중 hello를 포함하는 텍스트를 찾음
screen.getByText((content, element) => {
    return content.includes("hello") && element.tagName === "P"
})