jest

 

 

jest 동작 방식

 

1. 테스트 코드 다 짬 + script 명령어까지 완성함을 가정으로 이야기하자면

2. npm test (설정한 명령어) => jest.config.js 나 package.json을 통해 jest 설정을 읽음

3. 테스트 파일을 찾음. 기본적으로 루트 디렉토리에서 '.test.js, .test.ts, .spec.js, spec.ts' 를 찾음 (jsx나 tsx 도 찾음)

4. 테스트 환경을 설정함

     4-1. testEnvironment 설정에 따라서 테스트 환경 설정함.

     4-2. 리액트는 jsdom을 사용하여 브라우저와 유사한 환경을 만듦 <= 메모리 상에서 돌아간다고 함

     4-3. 이때 jest.setup.ts 같은 파일도 실행됨

5. 테스트 파일을 하나씩 실행함

     5-1. 파일을 가져와서 실행

     5-2. describe 블록 내의 정의된 테스트 스위트를 실행함

     5-3. 각 테스트 스위트 내에서 test 나 it 블록으로 정의된 테스트 케이스를 실행함

     5-4. 테스트 끝나면 결과를 수집, 요약하여 보고함.

     5-5. 클린업함. 이때 모의 함수 재설정하거나 파일 시스템 정리하는 작업 할 수 있음

 

 

 

이렇게 생김

// App.test.tsx

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

describe('App Component', () => {
  test('renders the Todo List header', () => {
    render(<App />);
    expect(screen.getByText(/Todo List/i)).toBeInTheDocument();
  });
});

 

describe 내의 test 블록을 하나씩 실행함

이 테스트 이름은 renders the Todo List header 임

app 컴포넌트 가져와서 가상 공간에 띄우고 스크린에 'Todo List' 라는 text가 있는지 테스트. 이때 태그는 신경 안 씀

i 는 대소문자 구별 안하겠다는 이야기임

 

screen.getByText 메서드 사용법

1. 정규식 사용 가능, 이때 i는 대문자 따지지 않겠다는 의미
expect(screen.getByText(/Add Todo/i)).toBeInTheDocument();


2. 문자열 사용, 이 문자열 있는지 확인함. 이때 대소문자 구별함
expect(screen.getByText("Add Todo")).toBeInTheDocument();


3. 함수형 인수, 텍스트가 Add로 시작하는 경우 찾음
expect(screen.getByText((content, element) => content.startsWith("Add"))).toBeInTheDocument();

 

 

 

 

 

흘러가는 거 얼추 알았으니

이제 실전

 

npm i -D jest
npm i --save-dev @types/jest
// 리액트 써서 필요함
npm install --save-dev @testing-library/react @testing-library/jest-dom