에러) jest syntaxerror: cannot use import statement outside a module

jest를 이용해 api를 테스트하기 위해 코드를 작성하고 테스트를 돌려보다가 제목과 같은 에러를 만났다...

 

위의 에러는 jest 환경에서 ES6 문법을 이용해 import할 때 발생한다고 한다.

특히 axios의 버전이 업그레이드 되어 컴파일 과정에서 ES Commonjs로 컴파일 되지 않으며 발생하는 문제이다.

 

이러한 문제를 해결하기 위해 StackOverflow의 글을 참고해 해결했다.

 

우선 @babel/core, @babel/preset-env, @babel/preset-react, babel-jest 를 설치해주자

npm install @babel/core @babel/preset-env @babel/preset-react babel-jest --save-dev

 

그리고 babel.config.js 파일을 루트 디렉터리에 만들어주고 아래의 코드를 작성한다.

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react']
};

 

다음은 jest.config.js 파일도 생성하는데 이 파일 또한 루트 디렉터리에 만들어준다.

module.exports = {
	moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
	transform: {
		'^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
	},
	transformIgnorePatterns: ['/node_modules/(?!(axios)/)'],
};

 

 

그리고 마지막으로 package.json 파일의 script중 test를 수정해주자

"test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\"",

 

--transformIgnorePatterns은 Jest가 파일 변환시 무시할 파일의 패턴을 설정하는 옵션이다.