React 테스트 라이브러리를 사용하여 텍스트 내용 테스트 향상

표지 사진 Scott Webb - Unsplash
React 애플리케이션을 테스트할 때 여러 가지 방법으로 테스트를 작성할 수 있습니다.그러나 미세한 변화는 가독성과 유효성에 큰 차이를 일으킬 수 있다.
본문에서 나는 흔히 볼 수 있는 장면을 탐구할 것이다.변수 prop을 기반으로 일부 텍스트를 보여 주는 구성 요소를 테스트합니다.나는 기본적으로 React와 React 테스트 라이브러리에 익숙하다고 가정할 것이다.
이 예에서, 나는 이름을 받는 인사 구성 요소가 하나 있다.이것은 제공된 이름으로 맞춤형 환영 정보를 보여 줍니다.

function Greeting({name}) {
  return <h1>Welcome {name}!</h1>
}

테스트해 봅시다.

import {render, screen} from '@testing-library/react'
import Greeting from './greeting'

test('it renders the given name in the greeting', () => {
  render(<Greeting name="Jane"/>)
  expect(screen.getByText(`Welcome Jane!`)).toBeInTheDocument()
})

우리는 이런 테스트를 쓸 수 있을 뿐만 아니라, 틀림없이 통과할 수 있을 것이다.여기서, 우리는 예상한 텍스트가 나타나는지 검사할 것이다.하지만 우리는 몇 가지 문제를 해결해 볼 수 있다.

먼저, "Jane"이라는 이름은 우리의 테스트에서 두 번 등장했다. 우리는 그것을 하나의 변수로 끌어올려 우리의 테스트를 더욱 읽을 수 있게 할 수 있다.

초, 제목이 아닌 다른 요소를 보여주기 위해 구성 요소를 변경하면 이 테스트는 통과됩니다.하지만 이것은 우리가 테스트가 우리에게 알려주기를 바라는 변화다.

셋째, 만약에 우리가 구성 요소를 파괴하고 명칭을 나타내지 않는다면 우리는 좋은 테스트 실패 소식을 얻지 못할 것이다.

테스트에서 변수 사용하기

test('it renders the given name in the greeting', () => {
  const name = 'Jane'
  render(<Greeting name={name}/>)
  expect(screen.getByText(`Welcome ${name}!`)).toBeInTheDocument()
})

여기에서 우리는 이름을 변수에서 추출할 것이다.이제 더 분명한 것은 명칭이 테스트의 중점이다.
우리는 FakerJs과 같은 라이브러리를 사용하여 무작위 이름을 만들 수 있다.이런 방식을 통해 우리는 특정한 명칭 자체가 중요하지 않고 명칭만 보여주면 된다고 전달할 수 있다.

import faker from 'faker'
test('it renders the given name in the greeting', () => {
  const name = faker.name.firstName()
  render(<Greeting name={name}/>)
  expect(screen.getByText(`Welcome ${name}!`)).toBeInTheDocument()
})

접근 가능한 소자 테스트

이제 렌더링 중인 요소를 처리할 수 있습니다.우리는 텍스트로만 요소를 찾는 것이 아니라 그 역할(이 예에서 heading)을 통해 검사할 수 있다.우리는 name의 선택할 수 있는 두 번째 매개 변수에서 우리가 찾고 있는 텍스트를 getByRole 속성으로 제공합니다.

expect(
  screen.getByRole('heading', { name: `Welcome ${name}!` }
).toBeInTheDocument()

만일 우리가 구성 요소를 div이 아니라 h1으로 바꾸면 우리의 테스트는 실패할 것이다.우리의 이전 버전은 여전히 통과될 것이며, 이 변화를 일깨워 주지 않을 것이다.이러한 검사는 표기된 의미를 보존하는 데 매우 중요하다.

테스트 실패 메시지 개선

만약 우리가 구성 요소를 파괴하고 이름을 표시하지 않는다면, 우리의 실패 소식은 여전히 이상적이지 않다.

이것은 결코 무섭지 않다.Jest에서 찾을 수 있는 접근 가능한 요소를 제공합니다. 여기에서 이름이 없는 것을 볼 수 있습니다.그러나 만약 이것이 더 큰 구성 요소라면, 이 로그에서 문제를 찾아내는 데 시간이 걸릴 수 있습니다.우리는 더 잘할 수 있다.

expect(
  screen.getByRole('heading', { name: /welcome/i }
).toHaveTextContent(`Welcome ${name}!`)

우리는 이곳에서 몇 가지 일을 했다.우리는 텍스트의 정적 부분을 추출했는데, 이 예에서 '환영' 이라는 단어이다.전체 텍스트 문자열에 따라 검색하지 않고 /welcome/i을 포함하는 헤딩 요소를 찾을 것입니다.우리는 일반 문자열이 아닌 정규 표현식을 사용하기 때문에 텍스트의 이 부분을 부분적으로 일치시킬 수 있습니다.
다음에 우리는 toBeInTheDocument과 다른 매칭기를 사용할 수 있으며 우리가 발견한 jest-dom을 기대하는 것이 아니다.toHaveTextContent을 사용하여 요소의 텍스트가 예상에 맞는지 확인하십시오.이렇게 하는 것이 더 좋은 데는 두 가지 이유가 있다.우선, 텍스트를 읽으면, 텍스트의 내용은 우리가 검사해야 할 것들, 단지 일부 요소만 존재하는 것이 아니라는 것을 보여 준다.그 다음으로 우리는 더 좋은 테스트 실패 정보를 얻었다.

여기서 우리는 바로 문제의 소재를 보았다. 우리는 어느 곳에서도 그것을 찾을 필요가 없다.

요점을 요약하고 다시 말하다.

우리는 테스트에서 변수를 추출하여 테스트의 중요한 데이터를 전달했다.

우리는 getByRole을 사용하여 구성 요소의 의미를 검증한다.

우리는 toHaveTextContent을 사용하여 테스트가 검사 중인 출력을 전달한다.더 유용한 테스트 실패 소식을 얻을 수 있습니다.

나는 Kent C Dodd's Epic React 과정에서 몇 가지 기교를 배웠다.그것은 내가 이미 잘 알고 있다고 생각하는 모든 것에 대한 이해를 증강시켰다.
이 which query to use with React Testing Library 가이드도 유용하다.jest-dom documentation은 테스트를 개선할 수 있는 모든 일치기를 알려 줍니다.