[JEST] js + ts 적용

Initial setting

• 설치 명령어

npm install --save-dev jest

• package.json → scripts 등록

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

• import 사용을 위한 설정

  1. 바벨 설치 (node 기반 jest는 ESModule 사용 불가하여 바벨로 변환)

      npm install -D @babel/core @babel/preset-env

  2. 바벨 설정

     babel.config.json 생성

     {
       "presets": ["@babel/preset-env"]
     }

  3. jest.config.json 생성 (해당 설정은 필수가 아님)

     {
       "verbose": true,
       "collectCoverage": true
     }

     
     

• TS JEST 적용(타입스크립트 사용 시)

npm i -D @types/jest ts-jest

기존 jest.config.json 파일 제거 후 npx ts-jest config:init 명령어로 config 파일 생성

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  verbose: true,
  collectCoverage: true,
};

---

JEST Matchers 정리

• Matchers는 다양한 방식으로 값을 테스트할 수 있는 메서드

Matchers	description
toBe()	단순한 값 비교 (객체 비교 시 사용 x 메모리 주소도 확인하기 때문에 의도치 않은 결과 나올 수 있음)
toEqual()	객체가 일치한지 검증 (주로 사용되는 메서드)
toStrictEqual()	엄격한 toEqual로 undefined 허용 X
toBeNull()	오직 Null과 같은지 확인
toBeNaN()	NaN 인지 확인
toBeUndefined()	undefined만 확인
toBeDefined()	변수가 정의되었는지 확인 (toBeUndefined()에 반대)
toBeTruthy()	검증 대상이 true로 간주되면 테스트 통과
toBeFalsy()	검증 대상이 false로 간주되는 경우 테스트가 통과
toMatch()	정규 표현식을 이용해 문자열이 포함되어 있는지 확인
toHaveLength()	배열의 길이를 체크할 때 사용
toContain()	배열이나 반복하는 객체가 특정 요소를 포함하는지 확인
toThrow()	함수가 호출될 때 에러를 던지는지 확인
toBeCalled()	실행한 함수에 기대한 함수가 호출되는지 확인
toBeCalledWith()	기대한 함수의 결과값에 포함이 되는지 확인
toHaveProperty()	객체에 해당 key : value 값이 있는지 검사한다
toBeCalledTimes()	함수가 몇번 호출되었는지 검증
toBeCalledWith()	함수가 설정한 인자로 호출 되었는지 검증
toReturn()	함수가 오류없이 반환되는지 테스트
toReturnTimes()	함수가 지정한 횟수만큼 오류없이 반환되는지
toReturnWith()	함수가 지정한 값을 반환하는지 테스트
lastReturnedWith()	함수가 마지막으로 반환한 특정 값을 테스트하는 데 사용 합니다
nthReturnedWith(nthCall, value)	함수가 n번째 호출에 대해 반환한 특정 값을 테스트하는 데 사용
toBeLessThan()	숫자 또는 큰 정수 값 을 비교 하는 데 사용 ~미만
toBeLessThanOrEqual()	숫자 또는 큰 정수 값 을 비교 하는 데 사용 ~이하
resolves	비동기 Promise 결과가 resolve인 경우 사용
rejects	비동기 Promise 결과가 reject인 경우 사용

---

기본 문법 및 사용 예제

• jest 기본 문법

  Jest는 보통 함수의 반환값을 인자로 받는 expect 함수를 제공한다. 그리고 그 인자를 토대로 결과값을 expectation 객체로 반환해 준다.

  
  

  describe('계산 테스트', () => {
    const a = 1,
      b = 2;
  
    test('a + b는 3이다.', () => {
      expect(a + b).toEqual(3);
    });
  });
  
  // describe: 그룹 테스트를 위한 실행 함수
  // test: 개별 테스트를 위한 실행 함수
  // expect: 식을 실행하는 함수
  // toEqual: Test Mathcher 중 하나로 값을 비교할 때 사용됨

  
  

• jest 사용 예제
  add.js 생성

  const add = (a, b) => a + b;
  export default add;

  add.test.js 생성
  [file].test.js (test 파일은 테스트할 함수 파일명. test.js)

  import add from './add';
  
  test('add n + n = n', () => {
    expect(add(2, 2)).toBe(4);
  });

  
  

• jest 비동기 처리
  
  

  • 1. 비동기 처리 (프로미스 객체를 리턴하지 않는 경우)

    테스트 함수에 done 인수 사용

    • done 미사용 시 callback 함수 호출 시점에 테스트 코드 종료 (비동기 코드를 기다리지 않음)
    • done 사용 시 done() 호출 시까지 테스트 코드 종료되지 않아서 코드 종료 시점을 컨트롤 가능
      
      

    // fn.js
    function 비동기_함수(callback) {
      setTimeout(() => callback(), 3000);
    }
    
    // fn.test.js
    test('비동기 처리', done => {
      function callback() {
        try {
          expect(1 + 1).toBe(2);
          done();
        } catch (error) {
          done();
        }
      }
      비동기_함수(callback)();
    });

  • 2. 비동기 처리 (프로미스 객체를 리턴하는 경우)

    테스트 함수에 return 사용 + resolves, rejects Matcher 사용

    
    

    // fn.js
    function 비동기_함수(n) {
      return new Promise((res, rej) => {
        setTimeout(() => {
          if (n > 1) {
            res(n);
          } else {
            rej('error');
          }
        }, 3000);
      });
    }
    
    // fn.test.js
    // resolve 결과 처리법
    test('비동기 처리(resolve )', () => {
      return expect(비동기_함수(10)).resolves.toBe(10); // pass
    });
    
    // reject결과 처리법
    test('비동기 처리(reject)', () => {
      return expect(비동기_함수(0)).rejects.toBe('error'); // pass
    });

  • 3. 비동기 처리 (async & await)

    테스트 함수에 async & await 사용
    
    

    // fn.js
    function 비동기_함수(n) {
      return new Promise((res, rej) => {
        setTimeout(() => {
          if (n > 1) {
            res(n);
          } else {
            rej('error');
          }
        }, 3000);
      });
    }
    
    // fn.test.js
    test('비동기 처리', async () => {
      const result = await 비동기_함수(10);
      expect(result).toBe(10);
    });

---

Jest 사이트:  https://jestjs.io/