챌린지 기간은 뭐 매일이 힘들지만, 어제는 컨디션이 많이 안좋았다. 목이랑 허리도 너무 아프고... 이사가면 의자부터 바꿀꺼다. 그러다보니 집중도 안되고 뭐... 그렇게 어려운 과제가 아니었음에도, 퍼포먼스가 평소의 절반도 안나온 듯 했다.
아무튼 학습내용은 정규표현식과 테스트코드였다. 규식이 형이야 워낙 예전부터 사용해왔지만, 항상 쓸때마다 다시 공부했었는데, 이번기회에 제대로 공부해둔거 같다.
문제는 테스트코드였는데, 예전에 TS로 nest.js를 할때 경험한적이 있어서 나는 당연히 매우 간단하게 짤수있을 줄 알았다. 근데 여기서 3시간정도 삽질을 하게 되는데... 문제는 js의 모듈 임포트 시스템에 대한 이해도 부족이었다.
우선 다음과 같이 install 했다.
npm i --save-dev jest그리고 package.json을 다음과 같이 수정한다.
"scripts": {
"test": "jest"
},
이렇게 하면 npm test 명령어로 테스트를 실행할 수 있다.
Jest는 .test .spec가 포함되거나 **test** 폴더 내에 있는 파일을 감지하여 테스트를 실행한다고 한다. 여기서는 폴더링을 할 수 없으니, 그냥 test.js 파일을 만들어서 테스트를 진행하자.
기분좋게 테스트를 시작하려 하는데,,, 아무리해도 에러가 나서 찬찬히 읽어보니 Jest에서 발생하는 import오류이다... 그래서 찾아보니까 babel 및 여러 패키지를 설치하고 설정해야한다고 한다. 그래서 babel을 설치하고 설정을 해보았다.
npm i --save-dev @babel/core @babel/preset-env babel-jest
그리고 프로젝트의 루트 디렉토리에 jest.config.js 파일을 만들고 아래와 같이 작성한다.
module.exports = {
transform: {
"^.+\\.jsx?$": "babel-jest",
},
};
그리고 babel.config.js 파일을 만들고 아래와 같이 작성한다.
module.exports = {
presets: ["@babel/preset-env"],
};
와.. 여기서 별 삽질을 다 했는데... 결국은 `import {} from ""`으로 불러오던 모듈들을 `const a from ""`으로 불러오는 방식으로 바꿨다. 두 방식이 어떤 차이가 있는 거 같은데... 정확히는 전혀 모르겠다...
아무튼 나머지 파일들도 전부 바꿔주니까 jest가 다음과 같이 잘 돌아갔다. 이번 주말에 JS를 공부하면서 모듈시스템에 대해서도 반드시 공부해야겠다.
