React Test - 2 : Jest

Doodream·2022년 8월 15일
0

React Test

목록 보기
2/4
post-thumbnail

Jest

  • RTL은 컴포넌트를 가상돔으로 렌더링하는데 도움을 줍니다.
    - 특정 돔을 가상돔으로 렌더링
    • 가상돔 안에서 해당 돔을 검색하여 가져올 수 있는 탐색 기능
    • 가상돔 안에서 해당 돔에 interaction을 일으키는 기능

여기까지가 RTL의 기능입니다. 즉, 테스트 러너는 아닙니다.
테스트를 찾고 실행하고 테스트의 잣대를 단언할 기능이 필요합니다.

Jest는 이러한 테스트 러너입니다. 다만 유일한 테스트 러너는 아니며 이과같은 테스트 러너가 Mocha, Jasmine 도 있지만 react에서는 jest를 권장하며 cra 에 함께 포함되어있습니다.

Jest watch mode

npm test를 통해 테스트 러너를 실행시키면 watch 모드로 들어갑니다.
이 watch 모드란 마지막 커밋 이후 파일의 모든 변경사항을 확인하여 마지막 커밋이후 변경된 파일과 관련된 테스트만 실행합니다.

즉, 커밋 이후 바로 npm test를 실행하면 아무런 파일 변경사항이 없으므로 test를 실행하지 않습니다.

Jest의 원리

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText("리액트 배우기");
  expect(linkElement).toBeInTheDocument();
});

위 코드에서 test 함수는 jest에서 제공합니다.

  • 첫번째 인수는 하나의 테스트의 이름입니다.
    - 테스트를 한 후 해당 테스트의 이름에 대한 결과를 표시할 때 사용됩니다.
  • 두번째 인수는 테스트 함수입니다. 테스트는 에러메세지가 없다면 통과하는 원리 입니다. 예를들어 test 함수가 빈 함수라면 테스트에 에러가 없으므로 통과 합니다. 하지만 에러메세지가 발생한다면 테스트를 통과하지 못하게 됩니다.

빈 테스트 함수

test('renders learn react link', () => {
});

에러를 발생시킨 테스트 함수

test('renders learn react link', () => {
 throw new Error("에러 발생!")
});

하지만 이렇게 테스트를 할때에는 고의적으로 에러를 발생시키기 보다는 assertion을 통해서 예상과에서 다른 결과가 발생한다면 에러를 발생시키는 과정으로 테스트가 이루어집니다.

profile
일상을 기록하는 삶을 사는 개발자 ✒️ #front_end 💻

0개의 댓글