[Javascript] Jest란 ?

1.Jest란?

Jest는 Javascript 애플리케이션을 위한 테스팅 프레임워크로, 페이스북에서 개발하고, 주로 React 애플리케이션에서 테스트용으로 쓰지만, 일반 Javascript 및 Node.js 애플리케이션에서도 효과적인 사용이 가능합니다. Jest는 단위 테스트, 통합 테스트, 스냅샷 테스트 등을 지원하여 개발자가 코드의 품질을 보장할 수 있도록 도와주는 라이브러리입니다.

---

2. Jest의 특징

• 간단한 설정: 기본적으로 설치 후 바로 사용할 수 있어 복잡한 설정 필요X
• 스냅샷 테스트: UI 컴포넌트의 렌더링 결과를 저장, 이후 비교하여 변경 사항을 쉽게 확인
• 모의 함수(mock functions): 테스트 중 특정 함수의 동작을 모의하여, 의존성을 줄이고 테스트의 집중도를 높임
• 비동기 테스트 지원: Promise 및 async/await를 사용해 비동기 코드를 쉽게 테스트
• 코드 커버리지: 테스트 코드의 커버리지를 쉽게 측정할 수 있어, 어떤 부분이 테스트 되었는지 확인 가능

---

3.Jest의 장단점

• 장점
  
  • 사용 용이성: 직관적인 API와 간단한 사용법으로 빠른 시작 가능
  • 빠른 실행 속도: 테스트를 병렬로 실행하여 성능 최적화
  • 활발한 커뮤니티: 많은 사용자와 문서가 있어 문제 해결에 용이
  • 풍부한 기능: 다양한 테스트 유형(단위, 통합, 스냅샷) 지원
• 단점
  • 학습 곡선: Jest의 모든 기능을 이해하는 데 시간 소요
  • 설정의 복잡성: 특정 고급 기능을 사용 시 설정이 복잡해질 수 있음

---

4.Jest 사용법 (Javascript 기준)

먼저 프로젝트 폴더에 javascript를 세팅해줍니다.

npm init -y && yarn add -D jest

 

package.json 파일에 다음과 같이 테스트 스크립트를 추가합니다.

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

 

다음 테스트 파일로 *.test.js 또는 *.spec.js 형식으로 작성합니다.

// sum.js
function sum(a, b) {
  return a + b;
}

module.exports = sum;

// sum.test.js
const sum = require("./sum");

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);
});

 

테스트를 실행하려면 다음 명령어를 사용해 테스트 할 수 있습니다.

npm test && yarn test

---

5.스냅샷 테스트 예제

스냅샷 테스트는 UI 컴포넌트의 렌더링 결과를 저장하고 비교하는 데 유용한 테스트 입니다.

// myFunction.js
function formatUser(user) {
  return `User: ${user.name}, Age: ${user.age}`;
}

module.exports = formatUser;

 

우선 위처럼 간단한 테스트 함수를 작성하고, formatUser 함수에 대한 스냅샷 테스트를 작성합니다.

// MyFunction.test.js
const formatUser = require("./myFunction");

test("formats user data correctly", () => {
  const user = { name: "Andrew", age: 35 };
  const result = formatUser(user);

  // 스냅샷 저장
  expect(result).toMatchSnapshot();
});

---

6.비동기 테스트 

비동기적으로 데이터를 가져오는 함수를 작성할 수 있습니다. 함수를 작성하고 함수에 대한 비동기 테스트를 작성해보겠습니다. 

// fetchData.js
const fetchData = () =>
  new Promise((resolve) => {
    setTimeout(() => {
      resolve("data received");
    }, 1000);
  });

module.exports = fetchData;

 

const fetchData = require("./fetchData");

test("fetches successfully data from an API", async () => {
  const data = await fetchData();
  expect(data).toBe("data received");
});

---

결론

이렇게 Javascript에서 Jest를 사용해 스냅샷 테스트와 비동기 테스트를 수행하는 방법을 배워보았습니다. 스냅샷 테스트는 함수의 반환 값을 저장하고 비교하는 데 사용되며, 비동기 테스트는 Promise를 반환하는 함수를 테스트하는 데 사용됩니다. 

---

 

 

GitHub - Koras02/javascript-jest