Jest는 React Native를 포함한 React 애플리케이션을 테스트하는 데 일반적으로 사용되는 JavaScript 테스트 프레임워크입니다. 테스트 커버리지 보고서 및 시각적 회귀 테스트를 위한 스냅샷과 같은 기능을 통해 직관적이고 사용하기 쉬운 테스트 환경을 제공합니다.
또한 @testing-library는 테스트에 대한 보다 사용자 중심적인 접근 방식을 제공하는 React용 테스트 유틸리티 모음입니다. 사용자가 상호 작용하는 것과 동일한 방식으로 컴포넌트를 테스트하는 데 중점을 두며 구현 세부 사항보다는 동작을 테스트하도록 권장합니다.
Jest와 @testing-library를 사용하여 프로젝트를 설정하려면 먼저 npm 또는 yarn을 사용하여 개발 종속 요소로 설치해야 합니다. 프로젝트 디렉토리에서 다음 명령을 실행하면 됩니다.
npm install --save-dev jest @testing-library/react-native @testing-library/jest-native이러한 종속 요소를 설치한 후에는 프로젝트의 루트 디렉터리에 __tests__ 디렉터리를 만들 수 있습니다. 이 디렉토리에는 테스트하려는 컴포넌트에 해당하는 테스트 파일이 포함되어야 합니다. 예를 들어 Button 컴포넌트가 있는 경우 __tests__ 디렉터리 내에 Button.test.js 파일을 만들 수 있습니다.
테스트 파일에서 렌더링 및 fireEvent와 같은 @testing-library/react-native에서 필요한 함수를 임포트하여 컴포넌트를 렌더링하고 사용자 상호작용을 시뮬레이션할 수 있습니다. 또한 @testing-library/jest-native를 임포트하여 어설션에 대한 추가 일치자를 제공할 수도 있습니다.
또한 https://docs.expo.dev/guides/testing-with-jest/ 해당 내용을 따라 환경 구성을 마친 경우, App.js 파일과 동일한 디렉터리에 App.test.js라는 파일을 만들 수 있습니다.
App.test.js에서 컴포넌트가 충돌 없이 렌더링되는지 확인하는 테스트 케이스를 작성할 수 있습니다:
import React from 'react';
import { render } from '@testing-library/react-native';
import App from './App';
describe('App component', () => {
test('renders without crashing', () => {
render(<App />);
});
});여기서는 가상 DOM 환경에서 컴포넌트를 렌더링할 수 있도록 @testing-library/react-native에서 렌더 함수를 가져옵니다. 그런 다음 렌더 함수를 사용하여 앱 컴포넌트를 렌더링하고 오류가 발생하지 않는지 확인합니다.
컴포넌트의 동작을 확인하기 위해 보다 구체적인 테스트를 작성할 수도 있습니다. 예를 들어 앱 컴포넌트에 클릭 시 카운터가 증가하는 버튼이 있다고 가정해 보겠습니다. 버튼을 클릭할 때 카운터가 증가하는지 확인하는 테스트를 작성할 수 있습니다.
import React from 'react';
import { fireEvent, render } from '@testing-library/react-native';
import App from './App';
describe('App component', () => {
test('counter increments when button is clicked', () => {
const { getByTestId } = render(<App />);
const button = getByTestId('increment-button');
const counter = getByTestId('counter');
fireEvent.press(button);
expect(counter.props.children).toEqual(1);
});
});이 테스트에서는 먼저 앱 컴포넌트를 렌더링하고 getByTestId 함수를 사용하여 버튼과 카운터 요소에 대한 참조를 가져옵니다. 그런 다음 fireEvent.press 함수를 사용하여 버튼의 클릭 이벤트를 시뮬레이션하고 카운터 값이 1로 증가했는지 확인합니다.
이는 ReactNative에서 Jest를 사용하여 테스트 코드를 작성하는 방법의 몇 가지 예시일 뿐입니다. 코드의 품질을 보장하기 위해 사용할 수 있는 테스트 방법과 어설션은 더 많이 있습니다.
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0
