[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.ts
import '@testing-library/jest-dom'; // 모든 test 파일에 testing-library 사용할 수 있도록 설정
[ 4. jest.config 파일 생성 ]
jest.config 파일은 jest의 동작과 관련된 전반적인 설정 값들을 적용하고자 할 때 사용합니다.
이 파일 또한 프로젝트 최상위 경로에 jest.config.ts로 생성해 주고 다음과 같이 설정 값들을 추가해 주시면 됩니다.
// 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 사용 환경 설정하는 방법에 대해 간단하게 알아보는 시간이었습니다.
읽어주셔서 감사합니다.