Expo 앱 최적화 및 성능 개선에 도움을 줄 수 있는 몇가지 프레임워크와 라이브러리 - ESLint, Prettier, Jest

ESLint

ESLint는 ECMAscript/javascript 코드에서 발견되는 패턴을 식별하고 보고하기 위한 도구로, 코드의 일관성과 버그 방지를 목표로 합니다

Setup

npx expo lint

Environment configuration

Expo 앱의 경우, javascript 소스 코드가 여러 다른 환경에서 실행되기 때문에, ESLint 구성이 복잡해질 수 있습니다.

이를 위해 ESLint에게 각 파일이 어떤 환경에서 동작하는지 알려줄 필요가 있습니다

예를 들어, Node.js 환경에서 동작한다면 :

/* eslint-env node */

Run lint

규칙 위반 사항이 출력됩니다

npm run lint

---

Prettier

Prettier는 코드 스타일을 자동으로 일관되게 유지해주는 코드 포맷터입니다

setup

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

.prettierrc

{
  "printWidth": 100, //코드 줄 길이의 최대 폭 100자
  "tabWidth": 2, // 들여쓰기 너비를 2 spaces
  "singleQuote": true, //작은 따옴표 사용
  "bracketSameLine": true // 객체, 배열, jsx요소 등의 닫는 괄호를 같은 줄에 배치
}

.eslintrc.js 업데이트

module.exports = {
  extends: ['expo', 'prettier'], //Prettier 규칙을 상속
  plugins: ['prettier'], // Prettier 플러그인 사용
  rules: {
    'prettier/prettier': 'error', // Prettier 규칙 위반을 정적 error로 처리
  },
};

Run 포맷

---

Jest

Jest는 JavaScript용 강력한 테스팅 프레임워크입니다. 다음과 같이 설정할 수 있습니다

• @testing-library/react-native: React Native 앱을 테스트하기 위한 라이브러리
• @types/jest: Jest에 대한 TypeScript 타입 정의 파일
• jest: Jest 테스팅 프레임워크
• jest-expo: Expo 프로젝트에서 Jest를 사용하기 위한 통합 패키지
• react-test-renderer: React 컴포넌트를 테스트하기 위한 랜더링 유틸리티

jest.config.js 파일 생성

module.exports = {
 // 프리셋을 expo 프로젝트에 맞춰 구성
  preset: 'jest-expo',
  // 이 옵션은 Jest가 변환을 무시해야 할 모듈 패턴들을 지정합니다.
  transformIgnorePatterns: [
    'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@sentry/react-native|native-base|react-native-svg|nativewind)',
  ],
};

npm run test

CallButton.test.js 코드

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import { Linking } from 'react-native'; // Linking 모듈을 가져옵니다.
import CallButton from '../CallButton'; // CallButton 컴포넌트를 가져옵니다.

jest.mock('react-native/Libraries/Linking/Linking', () => ({
  openURL: jest.fn(),
}));

describe('CallButton', () => {
  it('렌더링 성공', () => {
    const { getByText } = render(<CallButton />);
    expect(getByText('매장 주문')).toBeTruthy();
  });

  it('매장 번호로 연결 성공', () => {
    const { getByText } = render(<CallButton />);
    const button = getByText('매장 주문');

    fireEvent.press(button);
    expect(Linking.openURL).toHaveBeenCalledWith('tel:010-4040-1669');
  });
});

1. import { render, fireEvent } from '@testing-library/react-native';
   • @testing-library/react-native는 React Native 컴포넌트를 테스트하기 위한 유틸리티 라이브러리입니다.
   • render: 컴포넌트를 렌더링하고 테스트를 위한 유틸리티를 반환합니다.
   • fireEvent: 컴포넌트의 이벤트를 시뮬레이트하기 위해 사용됩니다.
2. jest.mock('react-native/Libraries/Linking/Linking', () => ({ openURL: jest.fn() }));
   • jest.mock은 모듈 모킹(mocking)을 위해 사용됩니다.
   • 이 코드는 react-native/Libraries/Linking/Linking 모듈을 모킹하여, openURL 함수를 모킹된 함수로 대체합니다.
   • 이렇게 하면 실제 Linking 모듈의 동작을 제어할 수 있습니다.
3. describe('CallButton', () => { ... }):
   • describe는 Jest에서 테스트 그룹을 정의하는 함수입니다.
   • 이 경우 CallButton 컴포넌트에 대한 테스트 그룹을 정의합니다.
4. it('렌더링 성공', () => { ... }):
   • it은 Jest에서 개별 테스트 케이스를 정의하는 함수입니다.
   • 이 테스트 케이스는 CallButton 컴포넌트가 성공적으로 렌더링되는지 확인합니다.
5. it('매장 번호로 연결 성공', () => { ... }):
   • 이 테스트 케이스는 CallButton 컴포넌트를 클릭했을 때 Linking.openURL이 정확한 전화번호로 호출되는지 확인합니다.
   • fireEvent.press(button);은 버튼을 클릭하는 시뮬레이션입니다.
   • expect(Linking.openURL).toHaveBeenCalledWith('tel:010-4040-1669');는 Linking.openURL이 예상된 전화번호로 호출되었는지 검증합니다.

이와 같이 Jest는 다양한 유틸리티 함수와 API를 제공하여 React Native 애플리케이션의 단위 테스트와 통합 테스트를 수행할 수 있습니다.