React + Ts 프론트엔드 개발기(feat. 메이플스토리) - 05. 테스트를 위한 엔트리 포인트 추가

Jest, React-testing-library와 같은 테스트가 아닌, REST API 통신을 위한 간단한 테스트 베드를 작성했습니다.

인풋, 버튼만을 간단히 띄워두고 fetch의 결과를 즉각적으로 확인하고자 테스트용 페이지를 따로 작성했습니다.

postman과 같은 툴을 사용하면 용이하겠지만, 이런 테스트 환경을 직접 구축해보고자 하는 개인적인 욕심이 있어 간단하지만 직접 구현하고자 했습니다.

 

 

npm run dev를 활용해 개발 환경에서 리액트 어플리케이션을 실행시키는 것처럼, npm run test 명령어를 통해 테스트 베드를 띄울 수 있도록 했습니다.

## package.json

"scripts": {
    "dev": "vite dev --open",
    "test": "vite --mode test --port 5174 --open",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
},

 

package.json에서 테스트를 위한 "test" 스크립트를 추가하였습니다.

--mode를 활용해 어플리케이션을 test 모드로 실행할 것을 알립니다.

--port를 활용해 개발 환경이 가진 포트인 5173과 겹치지 않도록 했습니다.

 

## main.tsx

import { lazy, StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

const Application = lazy(() => import('./application/application'));
const TestApplication = lazy(
	() => import('./__test__/application/test_application')
);

(function main() {
	const dev_mode = import.meta.env.MODE;

	const entry = getEntryPoint(dev_mode);

	createRoot(document.getElementById('root')!).render(
		<StrictMode>{entry}</StrictMode>
	);
})();

function getEntryPoint(mode: string) {
	switch (mode) {
		case 'test':
			return <TestApplication />;
		case 'development':
			return <Application />;
	}

	throw new Error(`There is no entry point for mode: '${mode}'`);
}

 

package.json에서 --mode로 설정해둔 값은 클라이언트에서 import.meta.env.MODE 에 접근해 값을 가져 올 수 있습니다.

 

설정한 dev_mode 값에 따라, 적절한 엔트리 포인트가 되는 컴포넌트를 root div에 렌더링 시키는 방식을 통해 test 환경과 development 환경을 분리하였습니다.

 

또한 test 환경에서, 혹은 일반적인 개발 환경에서 사용되지 않는 다른 엔트리 포인트 관련 파일을 로드하지 않도록 하기 위해 lazy loading을 적용시켰습니다.

 

사실 애초에 테스트 환경과 개발 환경에서 로드하는 html을 다른 파일로 각기 분리하면 위와 같은 분리 로직 또한 필요가 없어 보입니다. 이에 대해서는 추후 더 알아봐야 할 것 같습니다.