TIL-20210419

Today

• next와 typescript

content

정확히는 ts를 next에 적용하면서, mocha testing을 위한 환경 설정

ts compiling을 위한 tsconfig 파일이 있다. next의 컴포넌트 등을 tsx, ts로 작성하면 어떻게 컴파일링 할지 결정하는 것이다.

ts를 통해서 es6, es5등의 코드로 변경하면, babel을 통해 순수 자바스크립트 코드로 다시 컴파일 한다.

tsconfig는 extends를 통해 상속 및 오버라이드가 가능하다.

내가 겪은 문제

nextjs에서 tsconfig는 jsx를 preserve속성으로 사용해야 매번 react module을 불러오지 않고도 component를 구성할 수 있다. 하지만, mocha에서 component 테스트를 위해서는 react module을 불러와야 했고, react 모듈을 사용하여 jsx 문법을 사용하기 때문에, enzyme에서 '<' 토큰 에러가 발생했다.

토큰 에러의 발생으로 인해 tsconfig를 mocha test 환경에는 별도로 설정해야 했다.

ts-node를 통해 가상 메모리 환경을 만들어 mocha test를 진행하고 있어서 ts-node에 다른 tsconfig를 할당하여 해결하기로 했다.

ts-node에 다른 config를 설정하기 위해 TS_NODE_PROJECT를 통해 config 파일을 전달해 주었다.