첫 React 단위 테스트 작성 방법

다시 오신 것을 환영합니다!

우리가 중단한 부분 - GitHub

오늘 우리가 하는 일:

스모크 테스트 만들기

첫 번째 TDD 반복 수행

테스트 주도 개발의 세 가지 법칙

실패한 단위 테스트를 작성할 때까지 프로덕션 코드를 작성할 수 없습니다.

실패하기에 충분한 것보다 더 많은 단위 테스트를 작성할 수 없으며 컴파일하지 않는 것이 실패입니다.

현재 실패한 테스트를 통과하기에 충분한 것보다 더 많은 프로덕션 코드를 작성할 수 없습니다.

첫 번째 단위 테스트 만들기

중단한 부분부터 계속하기 전에 Title.tsx라는 웹 페이지 제목에 대해 별도의 구성 요소를 만든 다음 component 내의 src 디렉토리에 추가했습니다.



이제 모든 설정이 완료되었으므로 테스트를 작성해 보겠습니다.
Title.test.js 라는 새 테스트 구성 요소를 만드는 것으로 시작하겠습니다.

이 테스트에서는 매우 간단한 작업을 수행하여 제목이 렌더링되었는지 확인합니다. 이 테스트는 모든 텍스트 본문에 대해 수행해야 하는 것이 아니지만 지금은 TDD에 대한 예제 역할을 합니다.

test('once rendered title is visible', () => {

})

Title 구성 요소를 마운트하여 시작하겠습니다.

const { render } = require("@testing-library/react")
import Title from './Title'

test('once rendered title is visible', () => {
  render(<Title />)
})

이제 실제로 테스트를 실행하려면 앱이 이미 실행 중인 경우 새 터미널을 열고 npm run test를 실행합니다. 따라서 현재 다음과 유사한 출력이 있습니다.


이제 우리는 그것을 실패로 만들 필요가 있습니다. 제목을 찾도록 요청해 보겠습니다.

렌더링된 내용을 가져오려면 screen라는 또 다른 가져오기가 필요하므로 이를 사용하여 "samuel preston"이라는 텍스트가 있는 화면의 요소를 찾습니다.

const { render, screen } = require("@testing-library/react")
import Title from './Title'

test('once rendered, title is visible', () => {
  render(<Title />)

  screen.getByText(/samuel preston/i)
})

이를 통해 다음과 유사한 출력을 얻을 수 있습니다.


이제 이 요구 사항을 충족하는 코드를 작성해 보겠습니다. Title 구성 요소로 돌아가서 "Samuel Preston"을 포함하는 새 h1 요소를 만듭니다.

function Title() {
  return (
    <>
      <h1>
        Samuel Preston
      </h1>
    </>
  )
}

이제 파일을 저장하면 테스트 터미널에서 테스트를 다시 실행해야 하며 다음과 유사한 출력이 표시되어야 합니다.


이것은 이 프로젝트 내에서 TDD 여정의 첫 번째 반복을 표시합니다.

GitHub

현재 위치를 확인하려면 각 게시물 끝에 있는 최종 커밋link을 따라가면 됩니다!