보일러 플레이트에 React-Testing-Library 설정하기
이 가이드는 Jest를 설치한 상태에서 React Testing Library(RTL)를 설정하는 방법을 단계별로 안내합니다. 이 과정은 최신 버전의 Jest와 RTL을 사용하는 환경을 구축하는 데 필요한 모든 설정을 포함합니다.
1. React Testing Library 설치
Jest와 함께 React Testing Library를 설치합니다.
npm install --save-dev @testing-library/react @testing-library/jest-dom
@testing-library/react: React 컴포넌트를 테스트하는 데 필요한 주요 라이브러리입니다.@testing-library/jest-dom: Jest와 함께 사용할 수 있는 추가적인 DOM 관련 매처를 제공합니다.
2. Jest 설정 파일 구성
Jest 설정 파일을 작성하여 테스트 환경을 jsdom으로 설정합니다. Jest 28 이상에서는 jest-environment-jsdom을 별도로 설치해야 합니다.
jest.config.js
module.exports = {
testEnvironment: 'jest-environment-jsdom',
};
또는 package.json에 직접 설정할 수도 있습니다.
package.json
{
"jest": {
"testEnvironment": "jest-environment-jsdom"
}
}
jest-environment-jsdom 설치
npm install --save-dev jest-environment-jsdom3. setupTests.ts 파일 생성
테스트 실행 전 Jest 환경을 설정하는 setupTests.ts 파일을 생성합니다. 이 파일에서 @testing-library/jest-dom을 불러와 기본적인 Jest 매처(matchers) 외에도 DOM 요소를 테스트할 때 유용한 여러 가지 추가적인 매처를 제공합니다.
src/setupTests.ts
import '@testing-library/jest-dom';
또한 추가적으로 jest.config,js 파일에 다음을 추가합니다
},
// Jest 실행 전에 실행할 파일을 지정합니다.(RTL 설정 파일을 불러옵니다.)
setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
};React Testing Library 주요 API
React Testing Library는 매우 심플하지만 강력한 API를 제공합니다. 기본적으로 @testing-library/react 패키지에서 render() 함수와 screen 객체를 불러와 사용하며, 유저와 상호작용을 테스트할 때는 선택적으로 fireEvent 객체도 불러와야 합니다.
1. 주요 API 구성
React Testing Library는 크게 세 가지로 구성됩니다:
render()함수: DOM에 컴포넌트를 렌더링합니다.screen객체: DOM에서 특정 영역을 선택하기 위한 다양한 쿼리 함수를 제공합니다.fireEvent객체: 특정 이벤트를 발생시켜 상호작용을 테스트합니다.
2. render() 함수
render() 함수는 인자로 넘어온 JSX를 DOM에 렌더링해줍니다.
사용 예시
import { render } from "@testing-library/react";
render(<YourComponent />);
이렇게 호출하면, YourComponent가 가상 DOM에 렌더링됩니다.
3. screen 객체
screen 객체를 통해 DOM에서 특정 영역을 선택하기 위한 다양한 쿼리 함수를 호출할 수 있습니다.
사용 예시
import { render, screen } from "@testing-library/react";
render(<YourComponent />);
const button = screen.getByText(/click me/i);
이 예시에서는 getByText 쿼리 함수를 사용하여 "click me"라는 텍스트를 가진 버튼 요소를 선택합니다.
4. fireEvent 객체
fireEvent 객체는 쿼리 함수로 선택된 영역을 대상으로 특정 사용자 이벤트를 발생시키기 위해 사용합니다.
사용 예시
import { render, screen, fireEvent } from "@testing-library/react";
render(<YourComponent />);
const button = screen.getByText(/click me/i);
fireEvent.click(button);
이 예시에서는 fireEvent.click(button)을 통해 버튼 클릭 이벤트를 발생시킵니다.
5. 종합 예시
아래는 위의 API들을 종합적으로 사용한 간단한 예시입니다.
import { render, screen, fireEvent } from "@testing-library/react";
render(<YourComponent />);
const button = screen.getByText(/click me/i);
fireEvent.click(button);
이 코드는 YourComponent를 렌더링하고, "click me"라는 텍스트를 가진 버튼을 찾아 클릭 이벤트를 발생시킵니다.
이와 같이 React Testing Library의 주요 API를 사용하면, 컴포넌트가 DOM에서 어떻게 렌더링되고, 사용자와의 상호작용이 어떻게 이루어지는지를 쉽게 테스트할 수 있습니다.
