jest 기초

시작하며

테스팅 프레임워크 jest를 처음 배우게 되었다. 이제까지 작은 프로젝트에서는 테스팅 보다는 만들면서 수정하는 방식으로 진행하였는데 비동기 처리나 코드의 안전성을 위해 테스팅이 필요한 프로젝트에 사용해보고자 공부하게 되었다. 잠깐 맛본 jest는 달달했다.

npm init -y
npm i -d jest

 

기초 문법

각각의 test를 통해 기대하는 값이 맞는지 확인할 수 있다는 점에서 jest를 사용해서 각각의 component나 util의 기능을 확인해보고 진행한다면 더 유지보수하는데 효과적일 것이라는 생각이 들었다. 하지만 모든 테스트에 비용이 들어가는 만큼 테스트가 필요한 부분을 선별하고 오버엔지니어링 하지 않는 방법론이 있을지 궁금해졌다. (추후 유닛테스트 포스팅 예정)

let num;

describe('test name', () => {
    //test가 실행할 때마다 실행하는 전처리기
    beforeEach(() => {
        num = 1;
    });

    //test가 실행할 때마다 실행되는 후처리기 
    afterEach(() => {
        num =0;
    });

    //toBe는 원시타입에 대한 단순 비교를 한다.
    test('num === 1', () => {
        num = 1;
        expect(num).toBe(1);
    });
    
    //toEqual은 배열이나 객체 내부 깊은 비교 수행
    test('num is [1,2,3]', ()=>{    
        num = [1,2,3];
        expect([1,2,3]).toEqual([1,2,3]);
    })

    //true, false 판별
    test('truthy', ()=>{
        num=0;
        expect(num).toBeFalsy();
        num=1;
        expect(num).toBeTruthy();
    })

    /**
     *  toThrow()
     * 예외 발생 여부를 테스트해야 할 때는 toThrow()함수를 사용한다. 
     *  */

    function getNum(num) {
        if(num === 0) throw new Error('num is zero');
        return {
            num, 
        }
    }
    
    test('throw error when num is 0', () => {
        expect(()=>getNum(1).toThrow());
        expect(() => getNum(-1).toThrow('num is zero'))
    })

})

비동기 사용하기

promise를 return 하는 함수의 경우는 async/await을 사용하고 setTimeout과 같은 함수는 콜백함수를 이용해서 비동기 처리를 할 수 있다.

function fetchUserPromise(num, callback) {
  return new Promise((res)=>{
    setTimeout(()=>{
      const user = {
        email: num + "@gmail.com"
      }
      res(user);
    },1000);
  })
}
function fetchUser(num, callback) {
    setTimeout(() => {
      const user = {
        email: num + "@gmail.com",
      };
      callback(user);
    }, 1000);
  }

  test("fetch a user", (done) => {
    fetchUser(1, (user) => {
      expect(user).toEqual({
        email: "1@gmail.com",
      });
      done()
    });
  });

  test('get promise', async () => {
    const user = await fetchUserPromise(1);
    expect(user).toEqual({
      email: "1@gmail.com",
    });
  })


/**
 * Promise 비동기 처리하기 
 */

 

React에서 jest 적용하기 ➡️