JEST 환경 설정

---

📌 JEST 프레임워크 설치

npm

npm install -D jest

yarn

yarn add -D jest

• -D(dev): 개발계 환경에서만 사용 가능한 devdependencies에 추가
• npm 버전이 5보다 낮을 경우 --save 명령어 추가 (5 이상의 버전은 save가 디폴트)

📌 Babel 설치

npm install -D babel-jest

• jest는 es5문법을 따르고 해석하기 때문에 상위버전인 es6 구문의 테스트 파일을 읽기 위해서 해당 구문을 es5로 트랜스파일 해줄수 있는 트랜스파일러 babel이 필요하다.

⭐️ typescript를 사용하는 경우 타입 체크 프레임워크 ts-jest를 설치

npm install -D ts-jest

⭐️ 사용 중인 파일을 jest가 인식 할 수 있도록 해당 확장자에 대한 jest 추가 설치

react

npm install -D react-jest

vue

npm install -D vue-jest

📌 jest config 수정

moduleFileExtensions : 테스트를 적용할 파일 확장자 (필수)

moduleFileExtensions: ['js', 'ts', 'json', 'vue']

transform: 정규식 조건에 맞는 확장자를 가진 파일에 트랜스파일 적용

transform: {
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest'
    ...
    
    
    ⭐️ 테스트하고자 하는 파일 확장자에 대한 설정을 추가로 할 수 있다
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
  }

moduleNameMapper : import할 파일의 경로를 지정할 수 있다. 이전에 웹팩 config 파일에 alias를 통해 디렉토리 경로를 커스터마이징한 경우 jest에도 같은 내용으로 경로를 지정해두면 혼선을 막을 수 있다.

  moduleNameMapper: {
    '^@client/(.*)$': '<rootDir>/src/$1',
    '^@client/common/(.*)$': '<rootDir>/src/common/$1',
  }

📌 테스트 파일 작성

test 또는 spec 으로 작성해주면 된다.

jest 문법은 여러가지가 있는데 기본적으로 몇개만 설명하면

• describe : 테스트 그룹 생성, 해당 함수 내에서 임시 변수,객체들을 선언해 사용 할 수 있다.
• test : 테스트 단위 생성, describe안에 여러 test가 작성될수 있다.
• expect : 검증을 위한 mather 접근자
• toBe/toEqual 등... : expect의 리턴 값과 비교하는 matcher 함수. 이름이 꽤나 직관적이여서 보고도 어떤 기능을 하는지 유추가 가능하다.

(expect값이 정규식에 부합하는지 검사하는 테스트)

📌 테스트 명령어 지정

package.json

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

⭐️ coverage를 통한 품질 지표 확인

yarn test --coverage

또는 package.json 추가

  "scripts": {
    "test": "jest --coverage"
  }

출력된 테스트 커버리지

• File : 파일과 폴더 트리
• % Stmts : 구문 비율
• % Branch : 조건문의 분기점 비율
• % Func : 함수 비율
• % Lines : 코드 줄 수 비율
• Uncovered Line #s : 커버되지 않은 줄 위치

전체적인 퍼센티지가 높으면 높을수록 테스트가 빈틈 없이 이루어졌다는 증거라고 한다.