[Next] Jest 사용 환경 설정하기

안녕하세요. J4J입니다.

 

이번 포스팅은 jest 사용 환경 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

Jest 사용 환경 설정 방법

 

환경 설정을 하기 전 현재 개발하고 있는 프로젝트 환경이 어떻게 구성되어 있느냐에 따라 저와 같이 수행하더라도 정상 동작이 되지 않을 수 있습니다.

 

이번 설정에서 구성되는 기본적인 프로젝트 환경은 next cli를 이용하여 typescript 환경을 구축한 것을 기반으로 할 예정이기에 글을 보실 때 참고해 주시면 될 것 같습니다.

 

또한 일반적으로 next에서 jest를 사용하시는 경우 컴포넌트에 대한 테스트도 함께 수행하실 것이기 때문에 jest를 설정하면서 testing-library도 함께 설정하도록 하겠습니다.

 

 

반응형

 

 

[ 1. 패키지 설치 ]

 

$ npm install -D jest @types/jest ts-jest @testing-library/jest-dom @testing-library/react jest-environment-jsdom ts-node

 

 

 

[ 2. package.json script 추가 ]

 

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

 

 

 

[ 3. jest.setup 파일 생성 ]

 

jest.setup 파일은 테스트 파일마다 적용되어야 하는 설정 값들을 전역적으로 적용하고자 할 때 사용합니다.

 

프로젝트 최상위 경로에 jest.setup.ts 파일을 생성해 주고 다음과 같이 testing-library 사용을 위한 설정을 해주시면 됩니다.

 

jest.setup 위치

 

// jest.setup.ts
import '@testing-library/jest-dom'; // 모든 test 파일에 testing-library 사용할 수 있도록 설정

 

 

 

 

[ 4. jest.config 파일 생성 ]

 

jest.config 파일은 jest의 동작과 관련된 전반적인 설정 값들을 적용하고자 할 때 사용합니다.

 

이 파일 또한 프로젝트 최상위 경로에 jest.config.ts로 생성해 주고 다음과 같이 설정 값들을 추가해 주시면 됩니다.

 

jest.config 위치

 

// jest.config.ts
import type { Config } from 'jest';

import nextJest from 'next/jest';

const createJestConfig = nextJest({
    dir: './src', // jest가 동작되는 기본 경로 설정
});

const config: Config = {
    preset: 'ts-jest', // jest 설정에 기반이 되는 preset 등록
    coverageProvider: 'v8', // coverage 코드 추적을 위해 사용되는 provider 설정
    testEnvironment: 'jsdom', // test를 위해 사용되는 환경 등록 (web app 기반을 개발한 경우 jsdom 활용)
    setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'], // jest.setup 환경 등록
    // module들을 다른 resource로 대체하여 사용되고자 할 때 설정
    moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/src/$1', // jest에도 path alias가 적용되기 위해 설정 (tsconfig에 path alias 설정이 되어 있는 경우만 사용)
    },
};

export default createJestConfig(config);

 

 

 

config에는 가장 기본적인 설정들을 해봤고 다른 설정들이 필요한 경우 Jest 공식 문서를 참고하시면 더 많은 정보를 확인해볼 수 있습니다.

 

그리고 여기서 설정된 moduleNameMapper의 path alias 같은 경우 tsconfig에 다음과 같이 설정되어 있으니 커스텀하여 작성하실 때 참고해 주시면 됩니다.

 

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  },
}

 

 

 

 

테스트

 

테스트를 위해 다음과 같이 코드를 작성해 보겠습니다.

 

// src/app/page.tsx
export default function RootPage() {
    return (
        <main>
            <div>
                <h2 data-testid="root-page-title-text">RootPage Title</h2>
            </div>
        </main>
    );
}


// src/app/page.test.tsx
import RootPage from '@/app/page';
import { render, screen } from '@testing-library/react';

describe('root page test', () => {
    test('check title', () => {
        render(<RootPage />);
        expect(screen.getByTestId('root-page-title-text')).toBeInTheDocument();
    });
});

 

 

 

그리고 다음 명령어를 이용하여 테스트를 수행해 보면 정상적으로 테스트가 수행되는 것을 확인할 수 있습니다.

 

jest 동작 확인

 

 

 

 

 

 

 

 

이상으로 jest 사용 환경 설정하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.