본문 바로가기
카테고리 없음

[React] Jest: JavaScript 테스팅의 강력한 도구

shaprimanDev 2024. 9. 3. 14:59
반응형

 

오늘은 JavaScript 세계에서 가장 인기 있는 테스팅 프레임워크 중 하나인 Jest에 대해 이야기해보려고 합니다. 테스트는 우리의 코드가 예상대로 작동하는지 확인하는 중요한 과정이며, Jest는 이 과정을 간단하고 효율적으로 만들어줍니다.

Jest란 무엇인가?

Jest는 Facebook에서 개발한 JavaScript 테스팅 프레임워크입니다. 특히 React 애플리케이션 테스팅에 많이 사용되지만, 다른 JavaScript 프로젝트에서도 널리 활용됩니다. Jest의 주요 특징으로는 간단한 설정, 빠른 실행 속도, 강력한 모킹(mocking) 기능 등이 있습니다.

Jest의 주요 특징

  1. 간단한 설정 (Zero Configuration): Jest는 대부분의 JavaScript 프로젝트에서 추가 설정 없이 바로 사용할 수 있습니다.
  2. 빠른 테스트 실행: Jest는 병렬 처리를 통해 테스트를 빠르게 실행합니다.
  3. 코드 커버리지 보고: 내장된 코드 커버리지 도구로 테스트가 코드의 어느 부분을 커버하는지 쉽게 확인할 수 있습니다.
  4. 모킹 기능: 복잡한 의존성을 가진 코드도 쉽게 테스트할 수 있는 강력한 모킹 기능을 제공합니다.
  5. 스냅샷 테스팅: UI 컴포넌트의 변경사항을 쉽게 추적할 수 있습니다.
  6. 애매한 테스트 찾기: 여러 번 실행했을 때 간헐적으로 실패하는 테스트를 쉽게 식별할 수 있습니다.

Jest 시작하기

Jest를 시작하는 것은 매우 간단합니다. 먼저 프로젝트에 Jest를 설치해 봅시다:

npm install --save-dev jest

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

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

이제 npm test 명령어로 Jest를 실행할 수 있습니다.

기본적인 테스트 작성하기

Jest에서 테스트를 작성하는 기본 구조는 다음과 같습니다:

test('테스트 설명', () => {
  // 테스트 로직
  expect(실제값).toBe(기대값);
});

간단한 예제를 살펴보겠습니다:

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

module.exports = sum;

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

test('1 + 2는 3이다', () => {
  expect(sum(1, 2)).toBe(3);
});

이 테스트는 sum 함수가 1과 2를 더했을 때 3을 반환하는지 확인합니다.

비동기 코드 테스팅

현대 JavaScript 애플리케이션에서는 비동기 코드가 흔합니다. Jest는 비동기 코드 테스팅을 위한 여러 방법을 제공합니다:

1. Promises

test('데이터를 성공적으로 가져온다', () => {
  return fetchData().then(data => {
    expect(data).toBe('peanut butter');
  });
});

2. Async/Await

test('데이터를 성공적으로 가져온다', async () => {
  const data = await fetchData();
  expect(data).toBe('peanut butter');
});

모킹(Mocking)

모킹은 테스트 중에 특정 함수나 모듈의 동작을 시뮬레이션하는 기술입니다. Jest는 강력한 모킹 기능을 제공합니다:

test('forEach 모킹', () => {
  const mockCallback = jest.fn(x => 42 + x);
  [0, 1].forEach(mockCallback);

  expect(mockCallback.mock.calls.length).toBe(2);
  expect(mockCallback.mock.calls[0][0]).toBe(0);
  expect(mockCallback.mock.calls[1][0]).toBe(1);
  expect(mockCallback.mock.results[0].value).toBe(42);
});

이 예제에서는 jest.fn()을 사용하여 모의 함수를 생성하고, 이 함수가 어떻게 호출되었는지 검증합니다.

스냅샷 테스팅

스냅샷 테스팅은 UI 컴포넌트의 변경사항을 쉽게 추적할 수 있게 해 줍니다:

import React from 'react';
import renderer from 'react-test-renderer';
import Link from '../Link.react';

test('Link 컴포넌트가 올바르게 렌더링된다', () => {
  const tree = renderer
    .create(<Link page="http://www.facebook.com">Facebook</Link>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

이 테스트는 Link 컴포넌트의 렌더링 결과를 스냅샷으로 저장하고, 이후의 테스트에서 이 스냅샷과 비교합니다.

테스트 그룹화

describe 블록을 사용하여 관련된 테스트들을 그룹화할 수 있습니다:

describe('계산기 함수', () => {
  test('덧셈이 올바르게 동작한다', () => {
    expect(sum(1, 2)).toBe(3);
  });

  test('뺄셈이 올바르게 동작한다', () => {
    expect(subtract(5, 2)).toBe(3);
  });
});

테스트 커버리지

Jest는 내장된 코드 커버리지 도구를 제공합니다. package.json에 다음과 같이 설정을 추가하면 됩니다:

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

이제 npm test를 실행하면 테스트 실행과 함께 커버리지 리포트를 볼 수 있습니다.

모범 사례

  1. 테스트는 독립적이어야 합니다: 각 테스트는 다른 테스트에 의존하지 않고 독립적으로 실행될 수 있어야 합니다.
  2. 테스트는 결정적이어야 합니다: 동일한 입력에 대해 항상 동일한 결과를 반환해야 합니다.
  3. 테스트 설명은 명확해야 합니다: 테스트가 무엇을 검증하는지 명확히 설명해야 합니다.
  4. AAA 패턴을 따르세요: Arrange(준비), Act(실행), Assert(검증) 패턴을 따라 테스트를 구조화하세요.
  5. 과도한 모킹을 피하세요: 필요한 경우에만 모킹을 사용하고, 가능한 실제 구현을 테스트하세요.

Jest는 JavaScript 테스팅을 위한 강력하고 유연한 도구입니다. 간단한 설정, 빠른 실행 속도, 그리고 다양한 기능들로 인해 많은 개발자들이 선호하고 있습니다. 이 글에서 소개한 기본적인 개념들을 바탕으로, 여러분의 프로젝트에 Jest를 도입해 보시는 것은 어떨까요? 테스팅은 코드의 품질을 높이고, 버그를 사전에 방지하며, 리팩토링을 자신 있게 할 수 있게 해주는 중요한 과정입니다.

반응형

티스토리툴바