자바스크립트 테스트 프레임워크 Jest로 단위 테스트하기

자바스크립트 테스트 프레임워크 Jest로 단위 테스트 마스터하기

자바스크립트(JavaScript) 애플리케이션의 품질을 유지하고 코드의 안정성을 확보하기 위해 단위 테스트는 필수적입니다. 다양한 테스트 프레임워크 중에서 Jest는 간결한 문법과 강력한 기능으로 인해 널리 사용되고 있습니다. 이 글에서는 Jest의 기본 개념부터 고급 사용법까지 단계별로 살펴보며, 어떻게 단위 테스트를 효과적으로 작성하고 관리할 수 있는지 알아보겠습니다.

 

 

목차

1. Jest 소개
2. Jest 설치 및 설정
3. 기본 단위 테스트 작성하기
4. 모의 함수(Mock Functions) 사용하기
5. 비동기 코드 테스트하기
6. 스냅샷 테스트 활용하기
7. Jest의 고급 기능과 확장

 

1. Jest 소개

Jest는 Facebook에서 개발한 오픈 소스 자바스크립트 테스트 프레임워크로, 설정이 간단하고 성능이 뛰어나며 다양한 기능을 제공합니다. Jest는 특히 React 애플리케이션 테스트에 최적화되어 있지만, Node.js 및 일반 자바스크립트 코드베이스에서도 매우 유용하게 사용될 수 있습니다.

Jest의 주요 특징으로는 다음과 같은 것들이 있습니다:

• 자동 모킹 기능을 통한 간편한 테스트
• 스냅샷 테스트를 통한 UI 변화 감지
• 비동기 코드 테스트를 위한 내장 지원
• 강력한 CLI 도구로 테스트 커버리지 분석 가능

 

 

2. Jest 설치 및 설정

Jest를 사용하려면 먼저 프로젝트에 Jest를 설치해야 합니다. npm 또는 yarn을 사용하여 설치할 수 있습니다:

npm install --save-dev jest

설치 후에는 package.json 파일에 다음과 같은 테스트 스크립트를 추가합니다:

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

이제 npm test 명령어로 Jest를 실행할 수 있습니다. 기본적으로 Jest는 프로젝트의 __tests__ 디렉터리 또는 .test.js 파일 확장자를 가진 테스트 파일을 자동으로 찾아 실행합니다.

 

 

3. 기본 단위 테스트 작성하기

Jest로 단위 테스트를 작성하는 것은 매우 간단합니다. 기본적인 테스트는 test 함수와 expect 문을 사용하여 작성할 수 있습니다. 예를 들어, 두 수의 합을 계산하는 함수를 테스트한다고 가정해보겠습니다:

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

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

이 테스트는 sum 함수가 1과 2를 더했을 때 3을 반환하는지 확인합니다. Jest는 이와 같은 기본적인 테스트를 통해 함수의 정확성을 보장할 수 있습니다.

 

 

4. 모의 함수(Mock Functions) 사용하기

테스트를 작성할 때, 외부 의존성을 모킹하여 테스트 대상 함수에 집중할 수 있습니다. Jest는 이러한 모의 함수를 간편하게 만들 수 있는 기능을 제공합니다:

const myMock = jest.fn();
myMock.mockReturnValue(42);

test('mock function returns 42', () => {
    expect(myMock()).toBe(42);
});

이 코드는 myMock이라는 모의 함수를 생성하고, 호출 시 42를 반환하도록 설정합니다. 이를 통해 외부 함수의 동작을 통제하고, 특정 상황에 대한 테스트를 정확하게 수행할 수 있습니다.

 

 

 

 

5. 비동기 코드 테스트하기

비동기 코드의 정확한 동작을 보장하기 위해서는 특별한 테스트 방법이 필요합니다. Jest는 async/await 또는 done 콜백을 사용하여 비동기 함수를 테스트할 수 있습니다:

test('fetches data successfully', async () => {
    const data = await fetchData();
    expect(data).toBe('some data');
});

위 예제에서는 fetchData 함수가 비동기적으로 데이터를 반환하는지 확인합니다. Jest는 비동기 코드의 테스트도 직관적이고 쉽게 작성할 수 있도록 도와줍니다.

 

 

6. 스냅샷 테스트 활용하기

Jest의 스냅샷 테스트는 UI 컴포넌트의 변화 감지에 유용합니다. 스냅샷 테스트는 컴포넌트의 출력이 이전과 동일한지 확인하며, 변화가 있을 경우 경고를 발생시킵니다:

test('renders correctly', () => {
    const tree = renderer.create().toJSON();
    expect(tree).toMatchSnapshot();
});

이 코드는 MyComponent의 렌더링 결과를 스냅샷으로 저장하고, 이후 테스트에서 동일한지 확인합니다. UI 변경이 발생하면 Jest는 이를 감지하고, 변경 사항을 반영할지를 선택할 수 있습니다.

 

 

7. Jest의 고급 기능과 확장

Jest는 기본적인 기능 외에도 강력한 확장성을 자랑합니다. 커버리지 리포트를 생성하거나, CI/CD 파이프라인에 통합하여 자동화된 테스트 환경을 구축할 수 있습니다. 또한, 다양한 플러그인과 설정 옵션을 통해 프로젝트에 최적화된 테스트 환경을 조성할 수 있습니다.

예를 들어, 코드 커버리지를 확인하려면 다음과 같은 명령어를 사용할 수 있습니다:

npm test -- --coverage

이 명령어는 테스트 실행 후 커버리지 리포트를 생성하여, 테스트되지 않은 코드 부분을 쉽게 파악할 수 있도록 도와줍니다.