React Testing Tutorial(6) - getByLabelText(), getByPlaceholderText(), getByText()

1. getByLabelText()

getByLabelText 함수는 폼 요소를 테스트할 때 주로 사용되다.
<label> 요소에 연결되어 있는 폼 요소(ex: input, textarea 등)를 쉽게 찾을 수 있게 도와준다.
label에 연결된 폼 요소는 보통 접근성을 위해서 사용되며, getByLabelText를 사용하면 사용자가 실제로 인터페이스와 상호작용하는 방식과 유사한 방식으로 테스트할 수 있다.

사용 예시

아래와 같은 폼 요소가 있을 때

<label for="username">Username</label>
<input id="username" />

<label for="password">Password</label>
<input id="password" />

테스트 코드를 작성 시 getByLabelText()를 이용해서 input요소를 선택할 수 있다.

text('폼 요소 테스트', () =>{
    render(<FormComponent/>)

    const usernameInput = screen.getByLabelText("Username")
    const passwordInput = screen.getByLabelText("Password")

    export(usernameInput).toBeInTheDocument()
    export(passwordInput).toBeInTheDocument()
}) 

getByLabelText('Username')은 "Username"이라는 텍스트가 들어간 <label>과 연결된 input 요소를 반환한다.

테스트에서 특정 폼 요소를 정확히 선택하고, 접근성을 높이는데 매우 유용하다.

만약 여러 개의 요소가 있을 시 테스트는 실패한다.

<form>
    <label htmlFor="email1">Email</label>
     <input id="email1" type="email" /> 

     <label htmlFor="email2">Email</label> 
     <textArea id="email2" type="email" />
</form>


// 위의 폼 요소에서 테스트를 진행할 때

test('중복된 레이블 텍스트를 가진 요소-실패케이스', ()=>{
    render(<Form />)
    const emailInput = screen.getByLabelText('Email')

    // 어느 'Email' 레이블과 연결된 요소를 선택할지 모르기 때문에 오류가 난다. 
    expect(emailInput).toBeInTheDocument()
})

test('중복된 레이블 텍스트를 가진 요소-성공케이스', ()=>{
    const emailInput = screen.getByLabelText('Email', { 
        selector: 'input' 
    })
    // selector 옵션을 사용하여 두 번째 textarea 요소를 선택합니다.
    expect(emailInput).toBeInTheDocument()
    const emailTextarea = screen.getByLabelText('Email', { 
        selector: 'textarea' 
    })
    expect(emailTextarea).toBeInTheDocument()
})

요소가 input과 textarea로 다르기 때문에 getByLabelText()의 두 번째 인자 값인 option을 이용하여 어떤 요소를 선택할지 지정을 하면 테스트를 성공할 수 있다.

 

2. getByPlaceholderText()

입력 필드('input', 'textarea' 등)에서 placeholder 속성값을 기반으로 요소를 찾을 때 사용한다.

label이 없는 경우에도 사용자 인터페이스에서 입력 요소를 쉽게 찾을 수 있게 도와준다.

사용 예시

function Form() {
  return (
    <div>
      <input placeholder="Enter your name" />
      <input placeholder="Enter your email" />
    </div>
  )
}




  // 폼 요소에 대한 테스트를 진행할 수 있습니다.
test('getByPlaceholderText를 사용한 요소 선택', () => {
  render(<Form />);

  const nameInput = screen.getByPlaceholderText('Enter your name');
  const emailInput = screen.getByPlaceholderText('Enter your email');

  expect(nameInput).toBeInTheDocument();
  expect(emailInput).toBeInTheDocument();
});

주로 사용되는 상황

• label이 없는 입력 필드 : label이 없고 placeholder 속성만 있는 경우
• placeholder 텍스트를 이용해서 간결하게 테스트를 작성할 때
• 사용자가 폼을 작성할 때 placeholder는 중요한 힌트를 제공하기 때문에, 이를 기반으로 테스트하는 것이 사용자 경험을 검증하는데 도움이 된다.

 

3. getByText()

가장 기본적이고 많이 쓰이는 함수로, 요소의 텍스트 콘텐츠를 기반으로 특정 요소를 선택할 때 사용한다.
주로 p태그, div태그, span 태그에 감싸있는 특정 텍스트를 선택할 때 사용한다.

사용예시

function Component() {
  return (
    <div>
      <h1>Welcome to My Website</h1>
      <p>This is a paragraph with some text.</p>
      <button>Click Me</button>
    </div>
  )
}


test('getByText()를 이용한 요소 선택', ()=>{
    renter(<Component />)

    const headingElement = screen.getByText('Welcome to My Website')
    expect(headingElement).toBeInTheDocument()

    const buttonElement = screen.getByText('Click Me')
    expect(buttonElement).toBeInTheDocument()

    const paragraphElement = screen.getByText('This is a paragraph with some text.')
    expect(paragraphElement).toBeInTheDocument();
})

위와 같이 h1, p, button 관계없이 text를 포함하는 요소를 선택할 때 사용한다.

기본적으로 getByText()는 정확하게 일치하는 텍스트를 찾는다 하지만 두 번째 인자값인 option을 이용해서 부분적으로 일치하는 텍스트를 찾을 수 있다.

test('getByText()를 이용한 요소 선택', ()=>{
    renter(<Component />)

    const headingElement = screen.getByText('Welcome to My', {
        exact:false
    })
    expect(headingElement).toBeInTheDocument()
})

exact를 false로 지정하여 부분적으로 일치하는 요소를 찾을 수 있고, 또 다른 방법으로는 selector를 이용해서 특정한 HTML 태그를 지정해서 사용할 수 있다.

test('getByText()를 이용한 요소 선택', ()=>{
    renter(<Component />)

    const buttonElement = screen.getByText('Click Me', { 
        selector: 'button' 
    }); 
    expect(buttonElement).toBeInTheDocument();
})