React Test - 1 : CRA에서 테스트 코드 실행해보기

Doodream·2022년 8월 15일
1

React Test

목록 보기
1/4
post-thumbnail

리액트에서 테스트 코드를 간단히 사용해보는 글이였다면 이글은 더 자세히 다양한 케이스에 대해서 리액트안에서 테스트 코드를 작성하는 방식에 대해서 알아보는 글입니다.

React Testing Library(RTL)

react 테스트 라이브러리는 하나의 라이브러리가 아니라 꽤 완고한 철학을 갖고 있습니다.

  • 사용자 사용 방식으로 소프트웨어를 테스트합니다
    - 내부구현 테스트를 대신하는 형태입니다.
  • 접근성 마커로 요소를 찾습니다.
    - 테스트 ID를 사용하는 대신 스크린 리더와 다른 보조 기술들로 요소를 찾습니다.

그렇다면 리액트를 테스트 하기위해서 어떤 것들이 필요할까요?
RTL 하나만 필요하지 않습니다. Jest라는 것이 필요합니다.

RTL vs Jest

RTL

  • 테스트에 필요한 가상돔을 제공합니다. 브라우저 없이 테스트를 진행하려면 버튼 요소같은 작업을 할 때에 가상으로 DOM을 그려주면서 하는 테스트가 필요합니다. 그리고 가상 DOM이 원하는대로 작동하는지도 확인이 필요합니다.

Jest

  • 테스트 러너입니다.테스트를 찾고, 실행하고, 테스트 통과여부를 결정하는 역할을 합니다.

React Test

이전 리액트 테스트 블로깅에서와 마찬가지로 CRA를 이용해서 React 프로젝트를 생성하면 자동으로 RTL과 Jest가 포함되있는 환경을 구축할 수 있습니다.

npx create-react-app example-react-test

프로젝트 구축을 모두 하면 npm start 대신 npm test를 해봅시다.

npm test는 jest에서 watch 모드로 실행 됩니다.

위 화면에서 a 버튼을 눌러 테스트를 실행해봅니다.

테스트 코드를 실행한 결과를 보면
src/App.test.js 라는 파일을 테스트 헀으며 총 1개의 테스트를 한 것을 확인 할 수 있습니다.

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  // 가상돔을 생성합니다.
  const linkElement = screen.getByText("리액트 배우기");
  // 생성된 가상돔에서 인수로 주어진 정규식이 있는 컴포넌트를 찾아 반환합니다. 물론 정규식대신 문자열을 그대로 집어넣어도 됩니다. 
  expect(linkElement).toBeInTheDocument();
  // jest에서 제공하는 전역 메서드인 exp
});

위 코드의 라인 별로 알아봅시다.

  • render: test 함수에서는 처음 render라는 함수를 사용합니다. 예상가능하다 싶이 render 함수의 첫번째 인자로 제공하는 JSX를 받아 가상돔을 생성하는 역할을 합니다.
  • screen global: 이제 생성된 가상돔에 대한 접근은 screen global 을 통해서 접근합니다.
  • expect: Assertion(단언) 이라고 하는 단계는 테스트가 실패 혹은 성공하게되는 주요원인이 됩니다. expect는 jest에서 제공하는 전역메서드 입니다. 첫번째 인수로서 expect가 Assertion 해야할 대상이 들어가게 됩니다.
    다음으로 일종의 단언해야할 형태로서 Matcher가 주어집니다. 이것이 단언의 유형이 됩니다. DOM 기반의 matcher들은 따로 있습니다.

자주 사용하게 되는 Matcher들

expect(el.textContent).toBe('안녕')
// screen 리더에서 특정지은 JSX 대상의 textContent는 '안녕'과 일치 하는가?
expect(elementsArray).toHaveLength(7)
// JSX 배열의 길이가 7인가?
profile
일상을 기록하는 삶을 사는 개발자 ✒️ #front_end 💻

0개의 댓글