Testing React with Jest and React Testing Library - 1

Jest 개요

render 메서드 실행

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

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/Learn React/i);
  expect(linkElement).toBeInTheDocument();
});

1. render 메서드
   인수로 제공하는 JSX에 관한 가상 DOM을 생성 현재 JSX에 관한 인수는 APP입니다 화면에 렌더된 모든 텍스트를 기반으로 DOM에서 요소를 찾는다.
2. i는 정규 표현식으로 대소문자 비교하지 않고 검색 의미한다.
   APP에서 찾는 요소가 'Learn React'이기에 대소문자 비교하지 않는 정규 표현식 사용했다.
3. 단언(Assertion)
   사실이라고 생각하는 사항을 표현한 논리식

Assertion 테스트의 통과 여부

1. expect
   전역메서드로 작성한 인수가 예측에 맞는지 확인을 위해 작성하며 유효성 검사가 가능한 다양한 항목의 매처(Matcher : toBeInTheDocument())를 제공한다.
2. More assertion examples
   • expect(element.textContent).toBe('hello') 요소의 텍스트 콘텐츠 매처는 tobe 인수는 hello로 예상한다.
   • expect(elementsArray).toHaveLength(7) 배열 요소의 길이를 7로 예상한다.

jest-dom

👉 create-react-app 실행 시 설치되며 setupTest.js 파일을 사용해 각 테스트 전 jest-dom을 가져오기에 CRA기반 프로젝트는 설치 없이 모든 테스트에서 jest-dom 매처를 사용할 수 있다.
Dom을 기반으로 한 매처로 Assertion 예시에서 살펴본 매처로 모든 노드 코드에 적용 가능

Jest 원리

1. RTL(React Testing Library)
   테스트를 위해서 컴포넌트를 가상 DOM으로 렌더링하고 요소를 클릭하거나 텍스트 입력 같은 상호 작용할 수 있다.
2. 테스트 러너
   RTL과 Jest는 상호 보완 관계로 Jest는 테스트를 찾고 실행하며 Assertion을 해준다. 테스팅 라이브러리는 많지만 Jest를 권장하는데 이는 효율적이고 사용이 쉽기 때문이다.
3. CRA test Watch 모드
   마지막 커밋 이후 파일의 모든 변경 사항을 확인해서 마지막 커밋 이후 변경된 파일과 연관된 테스트만 실행한다.
   Jest에서 파일을 계속 확인하다가 테스트와 관련된 변경 사항이 생기면 이를 확인하고 자동으로 테스트한다.
4. 2개의 인수를 가진 전역 테스트 메서드
   첫 번째 인수는 테스트의 문자열 설명 어떤 테스트에서 실패했는지 알려주는 라벨링이고
   두 번째 인수는 테스트 함수 테스트의 성공과 실패를 결정한다.

TDD 테스트 주도 개발

코드 작성 전 테스트 코드를 작성하여 테스트에 통과하도록 본 코드 작성한다.

1. TDD 사용이유
   • 본 코드 작성 전에 테스트를 작성하기에 코딩 프로세스의 일부라고 생각하고 코딩이 완료된 후에도 번거로운 일처럼 느껴지지 않는다.
   • 애플리케이션을 실행해서 원하는 대로 작동하는지 확인하면서 소프트웨어 업데이트를 하는 것은 수동 테스트이지만 코드 작성 전에 테스트를 작성해두면 변경 사항이 생길 때마다 자동으로 테스트를 진행해 주기에 수동으로 테스트하지 않아도 된다.

테스트의 타입

1. 유닛테스트
   한 유닛 혹은 단위 테스트로 이 유닛은 다른 코드의 유닛과 상호작용을 테스트 하지 않고 현재 유닛만 테스트 진행한다.
2. 통합테스트
   여러 유닛이 함께 작동하는 방식을 테스트로 컴포넌트간의 상호작용, 마이크로 서비스간의 상호작용을 테스트한다.
3. 기능 테스트
   소프트웨어의 특정 기능 테스트로 출력값을 제공하는 소프트웨어 단위, 동작 테스트를 한다. RTL은 기능 테스트를 권장한다.
4. 인수 테스트 혹은 E2E 테스트
   애플리케이션의 전체 플로우를 테스트하는 것으로 해당 테스트는 Cypress등 다른 라이브러리를 필요하므로 다음에 다루겠다.

가상 DOM에서 요소를 찾을 때 우선순위

About Queries | Testing Library

1. 누구나 액세스 가능한 쿼리
   마우스를 사용하고 화면을 보거나 보조 기술을 사용하는 사람이면 액세스 가능한 쿼리
   • getByRole
     접근 가능한 이름으로 반환된 요소를 조회할 수 있다.
     https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#roles
   • getByLabelText
     라벨 텍스트로 요소 조회할 수 있다.
   • getByPlaceholderText
     placeholder로 조회하지만 placeholder가 웹에서 가시성이 좋지 않기에 권장하지 않는다.
   • getByText
     위의 양식 외에 비대화형 요소인 div, span등의 요소를 찾는데 사용한다.
   • getByDisplayValue
     form에서 현재 값이 채워진 상태라면 유용하게 사용 가능하다.
2. Semantic Queries
   위에서 어느 것도 사용할 수없으면 시멘틱 쿼리 사용한다.
   • getByAltText 이미지의 Alt로 요소 검색한다.
   • getByTitle 요소의 Title 속성으로 검색한다.
3. Test IDs
   • getByTestId
     위 모든 경우가 적합하지 않은 경우 최후의 수단으로 data-testid 속성으로 요소를 검색한다.

https://www.udemy.com/course/jest-testing-library/