1. Jest

• FaceBook이 만들어진 테스팅 프레임워크
• React Testing Library와 같이 같이 사용됨
• 최소한의 설정으로 동작하며 Test Case를 만들어서 어플리케이션 코드가 잘 돌아가는지 확인
• 단위 (Unit) 테스트를 위해서 이용
• Create React App으로 생성된 프로젝트는 Jest를 지원
• 그렇지 않은 경우 npm으로 추가
  • npm install jest --save-dev
• Jest가 Test 파일을 찾을 떄 다음 이름 규칙을 가진 파일 등은 전부 Test 파일로 판단함
  • 파일명.test.js
  • 파일명.spec.js
  • tests 폴더 안에 들어있는 파일
• cf. Jest 공식문서

2. Jest 파일 구조

1
📦 describe # 여러 관련 테스트를 그룹화하는 블록
2
├─ test(it) # 개별 테스트를 수행하는 곳. 각 테스트를 작은 문장처럼 설명
3
│  ├─ expect # 값을 테스트할 때마다 사용,
4
│  ├─ # expect 함수 혼자서는 거의 사용 되지 않으며 matcher와 함께 사용
5
│  └─ matcher # 다른 방법으로 값을 테스트 할 때 사용
6
├─ test(it)
7
├─ test(it)
8
└─ test(it)

2.1 test(it) 예시

1
📦 describe 과일
2
└─ it 사과
3
└─ it 바나나

2.2 expect, matcher 예시

1
test("2+2는 4임", () => {
2
  expect(2 + 2).toBe(4); // toBe(4) 부분이 matcher
3
})
4

5
test("2+2는 5가 아님", () => {
6
  expect(2 + 2)not.toBe(4); // not.toBe(4) 부분이 matcher
7
})

3. CRA Test

• Create React App으로 생성된 프로젝트의 App.test.js가 기본 테스트가 진행되는 곳임
• npm test로 실행
  • 실행해보면 a를 누르면 전체 실행
  • q를 누르면 빠져나올 수 있음

1
// App.test.js
2
import { render, screen } from '@testing-library/react'
3
import App from './App'
4

5
test('renders learn react link', () => {
6
  // ** render : DOM에 컴포넌트를 랜더링하는 함수
7
  // 인자로 랜더링할 React 컴포넌트가 들어감
8
  render(<App />)
9

10
  // render의 인자로 들어있는 컴포넌트에 learn react라는 텍스트가 들어있는지 없는지 테스트
11
  const linkElement = screen.getByText(/learn react/i)
12
  expect(linkElement).toBeInTheDocument()
13
})

4. 쿼리 함수

• cf. Testing Library 공식 문서 About Queries
• 쿼리는 페이지에서 요소를 찾기 위해 테스트 라이브러리가 제공하는 방법
• 여러 유형의 쿼리("get", "find", "query")가 존재
• 상황에 맞게 적절하게 사용해야 함

4.1 get, find, query

getBy...

• 쿼리에 대해 일치하는 노드를 반환하고 일치하는 요소가 없거나 둘 이상의 일치가 발견되면, 오류를 발생
• 둘 이상의 요소가 예쌍되는 경우에는 대신 getAllBy 사용

findBy...

• 주어진 쿼리와 일치하는 요소가 발견되면 Promise를 반환
• 요소 가 발견되지 않거나 기본 제한 시간인 1000ms 후에 둘 이상의 요소가 발견되면 약속이 거부
• 둘 이 상의 요소를 찾아야 하는 경우 findAllBy를 사용
• getBy + waitFor = findBy

queryBy...

• 쿼리에 대해 일치하는 노드를 반환 하고 일치하는 요소가 없으면 null을 반환
• 존재하지 않는요소를 어설션하는데 유용
• 둘 이상의 일치 항목이 발견되면 오류가 발생
• 확인된 경우 대신 queryAllBy 사용

"waitFor

• 일정 기간 동안 기다려야 할 때 waitFor를 사용
• 기대가 통과할 때까지 기다릴 수 있음

4.2 정리

cf. https://testing-library.com/docs/queries/about/#types-of-queries