이번에 프로젝트에서 테스트 코드를 추가하기 위해 @testing-library를 사용하는데 pnpn test시 에러가 발생하였다.

SyntaxError: Unexpected token '<’

“왜 이 에러가 났을까?” 하면서 찾아보다가 compilerOptions.jsx 가 preserve 인 것이 문제가 된다고 하여서 react로 수정하니 잘 동작하였다.

// tsconfig.json
{
...
"compilerOptions": {
	    ...
			"jsx": "react",
			...
     },
...
}

저번에도 이런 비슷한 이슈가 있었는데, 안되었던 것인지 모르는체 넘어갔다가 또 또 또 이러는 것보니 이제는 넘어갈 수 없다…!

Documentation - JSX

Basic usage

JSX는 ECMAScript에 XML을 확장한 구문으로 트랜스파일러를 통해 ECMAScript로 변환하는데 사용된다. JSX를 사용하기 위해 두 가지 작업을 수행해야 한다.

1. .tsx확장자를 사용하여 파일 이름을 지정.
2. tsconfig.json 의 compilerOptions.jsx 옵션을 활성화 // 사용하라는 의미 같음

TypeScript는 세 가지(preserve, react, react-native) JSX 모드를 제공하는데 오직 출력(emit) 단계에만 영향을 미치며, 타입 체킹에는 영향을 주지 않는다.

• preserve 모드
  • JSX를 출력의 일부로 유지하여 다른 변환 단계(예: Babel)에서 추가로 사용할 수 있게 함.
  • 출력 파일은 .jsx 확장자.
• react 모드
  • React.createElement를 출력, 사용하기 전에 JSX 변환을 거칠 필요가 없음.
  • 출력 파일은 .js 확장자
• react-native 모드
  • 모든 JSX를 유지한다는 점에서 'preserve'와 동일
  • 출력 파일은 .js 확장자