Jest | RN 설정

jest.config.js Jest 의 규칙, 환경 설정 등
jest.setup.js 테스트 실행 전 준비 코드 (전역 mock, 글로벌 변수, 확장 matcher import, storage 등)

jest.config.js

// (불필요한 라인 삭제)
module.exports = {
  preset: 'react-native',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
  transformIgnorePatterns: [
    'node_modules/(?!(react-native|@react-native|@react-navigation|@gorhom|react-native-reanimated|react-native-vector-icons|react-native-svg|@react-native-async-storage|@react-native-community|@react-native-firebase|@sentry|react-native-toast-message|react-native-gesture-handler|react-native-safe-area-context|react-native-screens|react-native-dialog|react-native-bouncy-checkbox|immer|react-native-pager-view)/)',
  ],
  moduleNameMapper: {
    '^react-native$': '<rootDir>/jest/react-native-mock.js',
    '^react-native-vector-icons/.*$':
      '<rootDir>/jest/react-native-vector-icons-mock.js',
    '^@/(.*)$': '<rootDir>/src/$1',
    '^react-native-safe-area-context$':
      '<rootDir>/jest/react-native-safe-area-context-mock.js',
    '^react-native-gesture-handler$':
      '<rootDir>/jest/react-native-gesture-handler-mock.js',
    '^react-native-reanimated$':
      '<rootDir>/jest/react-native-reanimated-mock.js',
  },
  testMatch: ['**/__tests__/**/*.test.(ts|tsx|js)', '**/*.test.(ts|tsx|js)'],
  collectCoverageFrom: [
    'src/**/*.{ts,tsx}',
    '!src/**/*.d.ts',
    '!src/**/*.stories.{ts,tsx}',
    '!src/**/__tests__/**',
  ],
};

• preset: 테스트 시 사용할 기본 환경
• setupFilesAfterEnv: jest.setup.js 파일을 사용하여 글로벌 설정 적용
• moduleFileExtensions: 테스트할 확장자
• transformIgnorePatterns: node_modules 중 트랜스파일 예외처리할 목록 (ESM 패키지, 네이티브 모듈 등 Jest가 제대로 읽을 수 있도록)
• moduleNameMapper: 모듈 별칭(alias) 를 실제 경로 또는 mock 파일로 매핑
• testMatch: 어떤 파일들을 테스트로 인식할지 (glob 패턴 사용)
• collectCoverageFrom: 커버리지 측정 대상 파일 경로

test.setup.js

jest.mock('react-native', () => {
  let RN = {};
  try {
    RN = jest.requireActual('react-native');
  } catch (e) {
    RN = {
      Platform: { OS: 'ios', select: obj => obj.ios ?? obj.default },
      NativeModules: {},
      Animated: {},
      StyleSheet: { create: obj => obj },
    };
  }

  return {
    ...RN,
    Animated: {
      ...RN.Animated,
      Value: jest.fn(() => ({
        setValue: jest.fn(),
        interpolate: jest.fn(config => config),
      })),
    },
  };
});
  
jest.mock('@react-navigation/native', () => {
  const actualNav = jest.requireActual('@react-navigation/native');
  return {
    ...actualNav,
    useNavigation: () => ({
      navigate: jest.fn(),
      goBack: jest.fn(),
      reset: jest.fn(),
      push: jest.fn(),
    }),
    useRoute: () => ({
      params: {},
    }),
    useFocusEffect: jest.fn(callback => callback()),
  };
});
  
jest.mock('react-native-reanimated', () =>
  require('react-native-reanimated/mock'),
);

테스트용 데이터 생성 - React Native 테스트 환경에서 네이티브 기능이 동작하지 않거나 에러 발생에 대응하기 위해 RN 모듈울 목데이터로 만들어 테스트를 보호한다
실제 RN 모둘을 불러올 수 없는 경우 최소한의 mock 객체를 만들어서 반환하도록

• mock: 테스트용 데이터 생성
• requireActual: 원본 모듈을 불러옴
• fn: 테스트용 함수