[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 설정 전 절대경로 사용 테스트 케이스 동작

 

 

 

 

이 상태에서 위의 설정에 적어둔 것처럼 jest.config에 path alias 사용을 위한 설정을 추가한다면 다음과 같이 올바르게 동작하는 것을 볼 수 있습니다.

 

jest 설정 후 절대경로 사용 테스트 케이스 동작

 

 

 

 

 

 

 

 

이상으로 jest에서 path alias 적용하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.