[Canvas-불꽃놀이-17] Jest 설정과 테스트 진행 순서

이전 글 : [Canvas-불꽃놀이-16] SparkParticle로 잔상효과 적용하기

[Canvas-불꽃놀이-16] SparkParticle로 잔상효과 적용하기

 

Jest설치와 Particle 클래스와 자식 클래스 테스트 코드 작성

 

이제 프로젝트의 마무리로 테스트 코드를 작성해 의도한 대로 프로젝트가 동작하는지 확인해 보도록 하겠다.

 

1. Jest 설치와 기본 설정

다음과 같이 Jest를 설치하고 테스트 환경을 구성한다.

 

1-1. 설치 (npm)

npm install --save-dev jest

 

1-2. package.json에 테스트 설정 추가

{
  "scripts": {
    "test": "jest"
  }
}

 

1-4. jest.config.cjs 설정

npm init jest@latest

jest.config.cjs  설정하기

• Jest는 기본적으로 commonJS 환경에서 동작하며, 설정 파일에서도 CommonJS 방식인 module.exports를 사용한다.
• 프로젝트의 package.json에 type이 module로 되어있다면 js 파일에 ESModule로 처리된다.
• 이 경우 Jest는 설정 파일을 CommonJS로 형식으로 인지하지 못해 확장자를 cjs로 지정해야 CommonJS 방식을 사용할 수 있다.
• DOM API와 window객체를 이용해 테스트를 진행할 수도 있으므로 테스팅 환경은 일단 jsdom으로 설정한다.

module.exports = {
    transform: {
        "^.+\\.js$": "babel-jest", // .js 파일만 변환
    },
    moduleNameMapper: {
        "^@/(.*)$": "<rootDir>/src/$1", // @ 경로 별칭 처리
    },
    testMatch: ["**/__test__/**/*.test.js"], // __test__ 폴더에서 .test.js 파일 매칭
    testEnvironment: "jsdom", // DOM API 테스트를 위한 환경 설정
};

 

1-5. jsdom 테스트 환경 추가 설정 (+제거과정 추가)

• Jest와 jsdom을 사용하면 브라우저 객체와 DOM API (window, document, getElementById 등)와 관련된 단위 테스트를 수행할 수 있다. 이를 통해 DOM 조작이나 렌더링 관련 테스트를 Node.js 환경에서 진행할 수 있다.
• 하지만, 사용자와의 상호작용(클릭, 입력 값 변경)을 포함한 전체 UI 동작을 테스트 하려면 CYpress나 Playwright 같은 E2E 테스트 도구를 사용하는 것이 적합하다. E2E 테스트는 실제 브라우저 환경에서 실행돼서 더 현실적인 시나리오를 검증할 수 있다.
• jsdom을 테스트 환경으로 사용하려면 jest.config.js에 testEnvironment: "jsdom" 를 추가하고 추가적으로 아래 모듈을 설치해야 한다.

npm install --save-dev jest-environment-jsdom

 

<jsdom 제거를 고려할 경우>

• DOM 테스트 환경을 추가했는데 필요가 없어질 경우 아래와 같은 방법으로 제거하면 된다.

npm uninstall jest-environment-jsdom

• textEnvironment는 기본값이 node이기 때문에 jest.config.cjs에서 testEnvironment: "jsdom"을 삭제하면 된다.

 

1-6. test를 진행할 폴더 만들기

 

루트 경로에 __test__ 폴더를 추가한다.

앞으로 이 폴더에 테스트 파일을 작성하여 테스트를 진행하도록 한다.

 

 

 

 

 

 

 

 

 

 

 

 

2. Jest를 Vite에서 사용하기 위한 추가 설정

• Jest는 CommonJS (require, module.exports) 환경에서 작동하고 Vite는 ES 모듈환경을 기본적으로 사용한다.
  서로 환경이 달라 Jest가 Vite의 설정을 제대로 인식하지 못하고, ES 모듈을 트랜스파일링 하는데 문제가 발생할 수 있다.
• 이에 Vite와 Jest의 환경 차이를 해결하기 위해 Babel 설정이 필요하다.

 

2-1. Babel 환경 설치 추가

npm i --save-dev babel-jest @babel/core @babel/preset-env

 

 

2-2. babel.config.cjs 설정

• jest.config.cjs와 마찬가지로 Jest는 CommonJS 환경이기 때문에 babel 설정 파일의 확장자도 cjs로 작성해야 Jest가 이를 제대로 인식할 수 있다. 이를 통해 Jest가 ES 모듈을 사용하는 코드를 CommonJS로 변환하여 테스트 환경에서도 실행 가능하게 만든다.

module.exports = {
    presets: ["@babel/preset-env"], // 최신 JavaScript를 지원하지 않는 환경에서도 사용할 수 있도록 변환
};

 

3. 진행 순서

Jest의 설치가 끝나면 아래 순서에 따라 테스트를 진행해 보도록 한다.

 

utils

• 공통적으로 사용하는 유틸리티 메서드를 검증하여 안정성을 확보한다.
• 예) randomFloat, randomInt, setRgbaColor 등

 

CanvasOption

• DPI, 크기, 스타일 등  캔버스 설정 관련 로직을 검증한다.
• 예) isSmallScreen, isOutOfCanvasArea 등

 

Particle과 그 자식인 TailParticle, TextParticle, CircleParticle, SparkParticle

• 파티클 초기화, 업데이트, 그리기 등 개별 동작을 검증한다.
• 예) draw, update 등

ParticleManager

• 파티클 풀의 생성, 재사용, 반납 로직을 검증한다.
• 예) acquireParticle, returnToPool 등

TextData

• 텍스트를 렌더링하여 픽셀 데이터를 생성하는 로직을 검증한다.
• 예) drawText, getImageData 등

Canvas

• 전체 렌더링과 애니메이션 상호 작용을 통합적으로 검증한다.
• 예) 파티클 생성 및 업데이트, 애니메이션 흐름 등

 

Github Repo