jest 테스트 환경 설정

-

jest.config.cjs 환경설정

client 폴더에 가서 jest.config.cjs 파일을 생성합니다.

module.exports = {
  roots: ['<rootDir>/src'],
  testEnvironment: 'jsdom',
  testEnvironmentOptions: {
    url: 'http://localhost:3080',
  },
  collectCoverage: true,
  collectCoverageFrom: [
    'src/**/*.{js,jsx,ts,tsx}',
    '!<rootDir>/node_modules/',
    '!src/**/*.css.d.ts',
    '!src/**/*.d.ts',
  ],
  coveragePathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/test/setupTests.js'],
  //  Todo: Add coverageThreshold once we have enough coverage
  //  Note: eventually we want to have these values set to 80%
  // coverageThreshold: {
  //   global: {
  //     functions: 9,
  //     lines: 40,
  //     statements: 40,
  //     branches: 12,
  //   },
  // },
  moduleNameMapper: {
    '\\.(css)$': 'identity-obj-proxy',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      'jest-file-loader',
    '^test/(.*)$': '<rootDir>/test/$1',
    '^~/(.*)$': '<rootDir>/src/$1',
    '^librechat-data-provider/react-query$': '<rootDir>/../node_modules/librechat-data-provider/src/react-query',
  },
  restoreMocks: true,
  testResultsProcessor: 'jest-junit',
  coverageReporters: ['text', 'cobertura', 'lcov'],
  transform: {
    '\\.[jt]sx?$': 'babel-jest',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      'jest-file-loader',
  },
  transformIgnorePatterns: ['node_modules/?!@zattoo/use-double-click'],
  preset: 'ts-jest',
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect', '<rootDir>/test/setupTests.js'],
  clearMocks: true,
};


Jest 테스트 프레임워크의 설정 파일인 jest.config.cjs입니다.

Jest는 JavaScript 코드를 테스트하는 데 널리 사용되는 강력한 테스트 러너이며, 이 설정 파일은 Jest가 테스트를 어떻게 찾고, 실행하고, 보고할지를 정의합니다.

이 설정은 주로 React 및 TypeScript 기반의 프론트엔드 프로젝트를 테스트하는 데 최적화되어 있습니다.

Jest 설정 파일의 구성 요소 설명

1. 테스트 파일 위치 (roots)

JavaScript
roots: ['<rootDir>/src'],
  • 용도: Jest가 테스트 파일을 찾아야 할 루트 디렉토리를 지정합니다.
  • <rootDir>/src: 프로젝트의 루트 디렉토리(package.json이 있는 곳)에서 src 폴더를 기준으로 테스트 파일을 찾겠다는 의미입니다.

2. 테스트 환경 (testEnvironment, testEnvironmentOptions)

JavaScript
testEnvironment: 'jsdom',
testEnvironmentOptions: {
  url: 'http://localhost:3080',
},
  • testEnvironment: 'jsdom': 테스트 코드를 실행할 환경을 지정합니다. jsdom은 Node.js 환경에서 브라우저와 유사한 DOM 환경을 시뮬레이션해 줍니다. 이는 React 컴포넌트와 같이 브라우저 DOM에 의존하는 코드를 Node.js 환경에서 테스트할 때 필수적입니다.
  • testEnvironmentOptions: { url: 'http://localhost:3080' }: jsdom 환경의 옵션을 설정합니다. url을 지정하여 테스트 환경의 window.location.href와 같은 브라우저 URL 관련 속성들이 특정 값으로 설정되도록 합니다. 이는 특정 URL에 따라 다르게 동작하는 코드를 테스트할 때 유용할 수 있습니다.

3. 코드 커버리지 (collectCoverage, collectCoverageFrom, coveragePathIgnorePatterns, coverageReporters)

JavaScript
collectCoverage: true,
collectCoverageFrom: [
  'src/**/*.{js,jsx,ts,tsx}',
  '!<rootDir>/node_modules/',
  '!src/**/*.css.d.ts',
  '!src/**/*.d.ts',
],
coveragePathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/test/setupTests.js'],
coverageReporters: ['text', 'cobertura', 'lcov'],
// coverageThreshold: { ... } (주석 처리됨)
  • collectCoverage: true: 테스트 실행 후 코드 커버리지(테스트가 코드의 얼마나 많은 부분을 실행했는지)를 수집하도록 설정합니다.
  • collectCoverageFrom: 커버리지를 수집할 파일들의 패턴을 지정합니다. src 폴더 내의 .js, .jsx, .ts, .tsx 파일들을 포함하되, .css.d.ts (CSS 모듈 타입 선언 파일)와 .d.ts (TypeScript 타입 선언 파일)는 제외합니다. node_modules도 제외합니다.
  • coveragePathIgnorePatterns: 커버리지 수집에서 제외할 파일 또는 폴더의 패턴을 지정합니다. node_modules와 test/setupTests.js 파일은 커버리지 보고서에 포함되지 않습니다.
  • coverageReporters: 커버리지 보고서의 형식을 지정합니다.
    • text: 터미널에 텍스트 요약 보고서를 출력합니다.
    • cobertura: Jenkins와 같은 CI/CD 도구에서 사용되는 XML 형식의 보고서를 생성합니다.
    • lcov: HTML 보고서 등을 생성하는 데 사용되는 LCOV 형식의 보고서를 생성합니다.
  • coverageThreshold (주석 처리됨): 코드 커버리지 최소 임계값을 설정하는 부분입니다. 현재는 주석 처리되어 있지만, 프로젝트의 코드 커버리지가 일정 수준에 도달하면 이 값을 설정하여 코드 품질을 강제할 수 있습니다. (예: functions: 80이면 함수 커버리지가 80% 미만일 경우 테스트 실패)

4. 모듈 매퍼 (moduleNameMapper)

JavaScript
moduleNameMapper: {
  '\\.(css)$': 'identity-obj-proxy',
  '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
    'jest-file-loader',
  '^test/(.*)$': '<rootDir>/test/$1',
  '^~/(.*)$': '<rootDir>/src/$1',
  '^librechat-data-provider/react-query$': '<rootDir>/../node_modules/librechat-data-provider/src/react-query',
},
  • 용도: 특정 파일 확장자나 경로 패턴을 Jest가 모의(mock)하거나 다른 파일로 매핑하도록 지시합니다. Jest는 기본적으로 JavaScript 파일만 이해하므로, CSS나 이미지 같은 자산 파일은 테스트 환경에서 로드할 수 없습니다.
  • '\\.(css)$': 'identity-obj-proxy': .css 파일에 대한 임포트가 발생하면 identity-obj-proxy라는 가짜 객체로 대체합니다. 이는 CSS 모듈을 사용하는 경우 className이 undefined가 되는 문제를 방지합니다.
  • '\\.(jpg|...)$': 'jest-file-loader': 이미지, 폰트, 오디오/비디오 등 비-JS 자산 파일에 대한 임포트가 발생하면 jest-file-loader를 통해 처리합니다. 이 로더는 파일을 모의하여 테스트 오류를 방지합니다.
  • '^test/(.*)$': '<rootDir>/test/$1': test/로 시작하는 임포트 경로를 프로젝트루트/test/로 매핑합니다.
  • '^~/(.*)$': '<rootDir>/src/$1': ~/로 시작하는 임포트 경로를 프로젝트루트/src/로 매핑합니다. 이는 Babel이나 Vite 설정의 경로 별칭(alias)과 동일한 기능을 Jest에서도 사용할 수 있도록 합니다.
  • '^librechat-data-provider/react-query$': '<rootDir>/../node_modules/librechat-data-provider/src/react-query': librechat-data-provider/react-query라는 특정 모듈을 node_modules 내의 특정 소스 파일로 직접 매핑합니다. 이는 번들된 버전 대신 소스 코드를 직접 테스트해야 할 때 유용할 수 있습니다.

5. 테스트 결과 처리 및 정리 (restoreMocks, testResultsProcessor, clearMocks)

JavaScript
restoreMocks: true,
testResultsProcessor: 'jest-junit',
clearMocks: true,
  • restoreMocks: true: 각 테스트 전에 모든 모의(mock) 상태를 원래 구현으로 되돌립니다.
  • testResultsProcessor: 'jest-junit': 테스트 결과를 JUnit XML 형식으로 처리하여 출력합니다. 이는 CI/CD(지속적 통합/배포) 시스템에서 테스트 결과를 분석하고 보고하는 데 일반적으로 사용됩니다.
  • clearMocks: true: 각 테스트 전에 모든 모의 함수 호출 통계(mockFn.mock.calls, mockFn.mock.instances)를 초기화합니다.

6. 코드 변환 (transform, transformIgnorePatterns, preset)

JavaScript
transform: {
  '\\.[jt]sx?$': 'babel-jest',
  '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
    'jest-file-loader',
},
transformIgnorePatterns: ['node_modules/?!@zattoo/use-double-click'],
preset: 'ts-jest',
  • transform: Jest가 파일을 임포트하기 전에 변환해야 하는 방법을 지정합니다.
    • '\\.[jt]sx?$': 'babel-jest': .js, .jsx, .ts, .tsx 확장자를 가진 파일들을 Jest가 babel-jest를 사용하여 변환하도록 지시합니다. 이는 최신 JavaScript, React JSX, TypeScript 문법을 Jest가 이해할 수 있는 형태로 바꿔줍니다.
    • 비-JS 자산 변환: moduleNameMapper와 동일하게 이미지, 폰트 등의 비-JS 자산 파일을 jest-file-loader로 변환합니다.
  • transformIgnorePatterns: 변환하지 않고 건너뛸 파일 패턴을 지정합니다. node_modules 폴더는 일반적으로 변환되지 않지만, ?!@zattoo/use-double-click 부분은 @zattoo/use-double-click 패키지는 예외적으로 변환하도록 합니다. 이는 이 패키지가 최신 문법을 사용하여 Jest가 기본적으로 처리할 수 없을 때 필요할 수 있습니다.
  • preset: 'ts-jest': Jest가 TypeScript 파일을 처리할 수 있도록 ts-jest 프리셋을 사용합니다. 이는 babel-jest와 유사하게 TypeScript 코드를 변환하지만, ts-jest는 타입 검사에도 더 중점을 둡니다. (babel-jest와 ts-jest를 함께 사용하는 설정이므로, 상황에 따라서는 하나만 사용하는 것이 더 적절할 수도 있습니다.)

7. 테스트 설정 파일 (setupFilesAfterEnv)

JavaScript
setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect', '<rootDir>/test/setupTests.js'],
  • 용도: 각 테스트 파일이 실행되기 전에 특정 설정 파일을 실행하도록 합니다.
  • @testing-library/jest-dom/extend-expect: @testing-library/jest-dom 라이브러리에서 제공하는 추가적인 Jest 매처(matcher)를 활성화합니다. 이를 통해 <div data-testid="my-element">와 같은 DOM 요소를 .toBeInTheDocument()와 같이 더 쉽게 테스트할 수 있습니다.
  • <rootDir>/test/setupTests.js: 사용자 정의 전역 설정 파일을 실행합니다. 이 파일에는 모든 테스트에서 공통적으로 필요한 초기화 코드(예: 전역 모의, 환경 설정)가 포함될 수 있습니다.

요약

이 jest.config.cjs 파일은 React, TypeScript 기반의 프론트엔드 프로젝트를 위한 강력하고 포괄적인 Jest 테스트 환경을 설정합니다. 주요 목적은 다음과 같습니다:

  • 브라우저 환경 시뮬레이션: jsdom을 사용하여 Node.js 환경에서 브라우저 DOM을 모방하여 UI 컴포넌트를 테스트할 수 있게 합니다.
  • 최신 문법 및 타입스크립트 지원: Babel과 ts-jest를 통해 JSX, 최신 JavaScript, TypeScript 코드를 변환하여 테스트할 수 있게 합니다.
  • 자산 파일 처리: CSS, 이미지 등 비-JS 파일을 Jest가 이해할 수 있도록 모의하거나 변환합니다.
  • 코드 커버리지 분석: 테스트 커버리지를 수집하고 다양한 형식으로 보고합니다.
  • 테스트 환경 관리: 모의를 자동으로 복원/초기화하고, CI/CD를 위한 JUnit 보고서를 생성합니다.
  • 개발 편의성: 경로 별칭을 지원하여 모듈 임포트를 간소화합니다.

전반적으로 이 설정은 효율적이고 안정적인 프론트엔드 유닛 테스트 파이프라인을 구축하는 데 필요한 모든 요소를 포함하고 있습니다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

아파치 보안관련 기본설정

-
 🔧 기본 설정 항목들 1. ServerTokens & ServerSignature 설명 : Apache가 클라이언트에게 서버 정보를 얼마나 제공할지 결정함. 보안 권장 설정 : ServerTokens Prod ServerSignature Off Prod : 버전 정보 없이 "Apache"만 반환. Off : 에러 페이지나 디렉토리 목록에 서버 정보 숨김. 2. Timeout 설명 : 클라이언트와의 연결에 대해 Apache가 기다리는 시간. 권장 설정 (성능 및 DoS 방지): Timeout 30 기본값 60초 → 30초로 줄이면 유휴 연결을 빠르게 정리 가능. 3. KeepAlive & MaxKeepAliveRequests 설명 : 하나의 TCP 연결로 여러 요청을 처리할 수 있게 함. 권장 설정 : KeepAlive On MaxKeepAliveRequests 100 KeepAliveTimeout 5 KeepAliveTimeout 은 너무 길면 자원 낭비. 일반적으로 2~5초 권장. 4. 디렉토리 보호 설정 <Directory /var/www/html>     Options -Indexes     AllowOverride None     Require all granted </Directory> -Indexes : 디렉토리 인덱싱 비활성화. -  AllowOverride None : .htaccess 비활성화하여 보안 강화. Apache에서 HttpOnly 쿠키 설정하기 ✅ 방법 1: Apache에서 Set-Cookie 에 HttpOnly 추가하기 <IfModule mod_headers.c> Header edit Set-Cookie ^(.*)$ "$1;HttpOnly;Secure" </IfModule> 🔎 설명: mod_headers 모듈을 사용하여 모든 Set...
자세한 내용 보기

티베로 이관 작업 절차

-
티베로 이관 작업 절차 /* 기존 DB 환경 파악 신규 DB설치시 NLS_CHARACTERSET, DB_BLOCK_SIZE 기존과 동일해야 데이터 import 시 오류없이 import 된다. */ /*1.  터미널에서 기존 db 접속후 환경 파악 */ /* 티베로 db 접속 */ /* tbsql 사용자/패스워드@sid */ tbsql sys/tibero@SID /* DB_BLOCK_SIZE 확인 */ SHOW PARAMETER DB_BLOCK_SIZE SQL> SHOW PARAMETER DB_BLOCK_SIZE NAME                         TYPE     VALUE ---------------------------- -------- ---------------------------------------- DB_BLOCK_SIZE                INT32    8192 /* CHARACTER_SET 확인 */ SQL>  SELECT * FROM SYS._VT_NLS_CHARACTER_SET; CHARACTERSET_NAME NCHAR_CHARACTERSET_NAME ----------------- ----------------------- MSWIN949          UTF16 /*2. 테이블 스페이스 생성 스크립트 실제테이블 스크립트 용량 계산 추출 */ set linesize 1000 set pagesize 50000 set trimspool on spool create_tablespace.sql SELECT 'create tablespace ' || TABLESPACE_NAME || ' datafile ''' || ...
자세한 내용 보기

윈도우 네트워크 리소스 사용권한 오류

-
이미지
윈도우에서 네트워크 공유 오류 처리 이 네트워크 리소스를 사용할 권한이 없는 것 같습니다. 이 서버의 관리자에게 문의하여 액세스 권한이 있는지 확인하십시시오. 이렇게 메세지 뜨고 공유가 안될경우 cmd 콘솔창을 띄워서 기존에 등록되어 있는 연결정보를 다 삭제 하고 다시 접속하면 연결이 된다. 연결된 정보 확인 cmd 창에서  net use C:\Windows\System32>net use 새 연결 정보가 저장됩니다. 상태         로컬      원격                      네트워크 ------------------------------------------------------------------------------- OK                     \\192.168.6.20\IPC$       Microsoft Windows Network 명령을 잘 실행했습니다. 확인후 연결 끊기 net use /delete * 실행후 y를 눌러서 계속하면 현재 연결을 끊어 버립니다. 연결을 끊고 다시 네트워크 접속을 하면 정상적으로 접속이 됩니다. 전체가 아니고 해당 연결만 삭제 하는 방법은 net use /delete \\공유폴더명 위와 같이 하여도 해결이 안 될 경우 자경증명 관리자에서 저장된 자격증명 삭제하기 윈도우 키를 누른후 자격 증명 관리자 실행   자격증명 관리자 메뉴에 들어가서 Windows 자격증명 메뉴를 클릭하여 오류가 나는 아이피를 선택하여 제거 하고 다시 접속합니다.
자세한 내용 보기