[React] Jest(1) 소개 및 설치 간단 테스트

---

Jest에 대해

소개

Facebook에서 개발한 JavaScript 테스팅 프레임워크로
Jest는 JavaScript 애플리케이션(React, Vue, Angular)과 라이브러리를 테스트하고,
테스트 실행 및 결과 보고를 단순하고 간편하게 만들어주는 강력한 도구입니다.

장점

• 간단한 설정: Jest는 초기 설정이 간단하며, 별도의 설정 파일 없이도 기본 설정으로 즉시 사용할 수 있습니다. 이로 인해 개발자가 테스트 환경을 설정하는 시간을 절약할 수 있습니다.

• 내장된 어설션 라이브러리: Jest에는 내장된 어설션 라이브러리가 포함되어 있어, 테스트 결과를 쉽게 검증할 수 있습니다. 이로써 별도의 어설션 라이브러리를 추가로 설치하거나 구성할 필요가 없습니다.

• Snapshot 테스팅: Jest의 스냅샷 테스팅 기능은 UI 컴포넌트 렌더링 결과를 스냅샷으로 캡처하고 변경 사항을 자동으로 감지하여 테스트를 수행할 수 있습니다. 이를 통해 UI 변경을 감지하고 검증하는 데 유용합니다.

• 비동기 코드 테스트: Jest는 비동기 코드(예: 비동기 함수, 프로미스, 타이머)를 테스트하는 데 강력한 지원을 제공하며, async/await와 함께 사용하여 비동기 코드를 쉽게 테스트할 수 있습니다.

• 자동 테스트 실행: Jest는 파일 변경을 감지하고 자동으로 테스트를 실행하는 기능을 제공하여 개발자의 생산성을 높입니다.

---

Jest 설치

npm install --save-dev jest

yarn add --dev jest

`--save-dev`, `--dev` 또는 -D 옵션은 패키지를 devDependencies에 추가하고, 개발 환경에서만 사용할 것이라는 의미입니다.

---

Jest 간단 테스트

간단 덧셈 함수를 만들어 test 해보자

//fn.js
const fn = {
  add: (num1, num2) => num1 + num2,
};

export default fn;

//fn.test.js
import fn from "./fn";

test(`1은 1이야`, () => {
  expect(1).toBe(1);
});

test(`2더하기 3은 5야`, () => {
  expect(fn.add(2, 3)).toBe(5);
});

test(`3더하기 3은 5야`, () => {
  expect(fn.add(3, 3)).toBe(5);
});

test(`테스트 설명`, () => {
expect().toBe();
});
- expect(): 메소드는 검증하려는 값을 감싸는 래퍼(wrapper) 함수입니다. 이 래퍼 함수를 통해 예상 결과와 실제 결과를 비교하고 검증할 수 있습니다.
- toBe(): 메소드는 expect()를 통해 얻은 값을 기대하는 값과 비교합니다. 두 값이 정확히 일치해야 테스트가 통과됩니다.

• npm start 명령어 실행 시 프로젝트에 모든 test 파일을 실행시킨다.

아래와 같이

---

마치며

혹시 잘못된 정보나 궁금하신 게 있다면 편하게 댓글 달아주세요.
지적이나 피드백은 언제나 환영입니다.