react testing library | input 요소 getByLabelText로 가져오기

문제

 

2가지 인풋이 있다. 

"비밀번호"를 라벨로 가지는 인풋 1개와 "비밀번호 확인"을 라벨로 가지는 인풋 1개

 

테스트를 돌리는데 이상하게 "비밀번호 확인" 인풋에 입력되어야하는 값이 계속 위의 "비밀번호" 인풋에 입력되는 현상이 있었다.

디버깅하기 너무 어려웠던것은, 테스트에서 에러나는 부분은 비밀번호 확인 인풋 DOM 요소를 찾지 못해서는 아니었다. 비밀번호 확인 인풋은 찾아지는데, 그게 제대로된 아래 비밀번호 확인 인풋이 아닌 위의 비밀번호 인풋으로 찾아지는 문제였다.

 

도대체 왜이럴까.. 하다가 Testing Playground에서 시도해보다가 드디어 원인을 찾았다.

 

원인

컴포넌트

<label for='pw'>비밀번호</label>
<input id='pw' />

<label for='pw'>비밀번호 확인</label>
<input id='pw' />

 

테스트코드

screen.getByLabelText('비밀번호')

 

input의 id가 같은 경우, id가 같은 모든 인풋이 아래와같이 찾아진다.

 

 

const input = screen.getByLabelText('비밀번호')
userEvent.type(input, '1111')

 

하지만 위와 같이 dom 요소를 변수에 할당하게 되면 가장 상위의 요소가 할당되고, 그 요소를 선택하여 이벤트를 주는 것이다.

공통컴포넌트로 쓴다고 만들어둔 <TextField/>컴포넌트에 id값을 일관적으로 적어둔 부분에서 문제가 있었던 것이다.

 

해결은 공통컴포넌트에 부여한 id값을 삭제하면서 해결했다.

 

Mui 텍스트필드는 지정한 id값이 없으면 자동으로 새로 random 값을 만들어준다. 그렇기때문에 컴포넌트별로 unique한 id를 가져 인풋끼리 같은 id를 공유할 일이 없다.