[React] Jest에서 path alias 적용하기
안녕하세요. J4J입니다.
이번 포스팅은 jest에서 path alias 적용하는 방법에 대해 적어보는 시간을 가져보려고 합니다.
Path Alias 설정이 필요한 경우
일반적으로 react를 활용하여 개발할 때 path alias를 사용하는 경우는 상대 경로 대신 절대 경로를 활용하기 위해서입니다.
그래서 path alias를 적용하고 있는 프로젝트 같은 경우는 이를 위한 설정 값들을 적용해 둔 경우가 존재하는데 typescript를 활용하시는 분들은 보통 다음과 같이 tsconfig.json에 설정되어 있을 확률이 매우 높습니다.
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"] // path alias 설정 (./src 경로의 하위 경로를 표현할 때 ./src 대신 @로 대체하여 사용)
}
},
}
그리고 이처럼 path alias를 사용하는 프로젝트에서 jest를 이용하여 테스트 케이스를 작성하는 경우 import 되는 컴포넌트들이 자연스럽게 path alias를 이용한 경로로 설정되는 모습도 볼 수 있습니다.
하지만 서버가 동작되었을 때 browser에서는 path alias가 올바르게 동작되는 반면 jest에서는 path alias가 제대로 적용되지 않는 경우를 확인할 수 있습니다.
jest에서 path alias를 그대로 활용하기 위해서는 tsconfig 설정 외에 추가적인 설정을 해줘야 합니다.
tsconfig에 설정한 것과 동일한 경로를 바라볼 수 있도록 적용해야만 올바르게 동작하기 때문에 설정하실 때 참고해 주시면 됩니다.
Jest에 path alias 적용 방법
[ 1. 기존 path alias 적용 사항 확인 ]
// tsconfig.json
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"] // path alias 설정 (./src 경로의 하위 경로를 표현할 때 ./src 대신 @로 대체하여 사용)
}
},
}
[ 2. jest.config에 동일한 유형의 path alias 설정 추가 ]
// jest.config.cjs
module.exports = {
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1', // jest에도 path alias가 적용되기 위해 설정 (tsconfig에 path alias 설정이 되어 있는 경우만 사용)
},
};
테스트
jest.config에 path alias를 설정하기 전 코드를 먼저 확인해 보겠습니다.
// src/App.tsx
export default function App() {
return (
<main>
<h2 role="app-page-text">App Page</h2>
</main>
);
}
// src/App.test.tsx
import { render, screen } from '@testing-library/react';
import App from './App'; // 상대경로 사용
describe('app test', () => {
test('app page text check', async () => {
render(<App />);
expect(screen.getByRole('app-page-text').textContent).toEqual('App Page');
});
});
코드를 위와 같이 작성한 뒤 테스트를 실행해 보면 올바르게 동작하는 것을 볼 수 있습니다.
이번엔 jest.config의 설정 없이 상대 경로에서 절대 경로로 변경한 뒤 테스트를 해보겠습니다.
그러면 다음과 같이 테스트가 실패하는 것을 확인할 수 있습니다.
// src/App.test.tsx
import App from '@/App'; // 절대경로 사용 (path alias 적용)
import { render, screen } from '@testing-library/react';
describe('app test', () => {
test('app page text check', async () => {
render(<App />);
expect(screen.getByRole('app-page-text').textContent).toEqual('App Page');
});
});
이 상태에서 위의 설정에 적어둔 것처럼 jest.config에 path alias 사용을 위한 설정을 추가한다면 다음과 같이 올바르게 동작하는 것을 볼 수 있습니다.
이상으로 jest에서 path alias 적용하는 방법에 대해 간단하게 알아보는 시간이었습니다.
읽어주셔서 감사합니다.