꽤 오래 전에 겪었던 문제인데, 원래 알고 있었던 방법으로도 해결이 안되어서 포트폴리오 개발때는 클라우드 서비스에 이미지를 업로드하고 url을 받아오는 식으로 처리했었다.
근데 오늘 기업 과제를 하면서 '아, 이번만큼은 반드시 짚고 가야한다' 싶은 마음에 서치를 했고 생각보다 꽤 간단히 해결되었다.
근 한달 전에도 같은 방법으로 시도했다가 해결이 안돼서 url을 가져다가 사용한건데...
왜 그럴까 추측하면서 가장 확실하면서도 간단한 시도를 하지 않았다는 사실을 알게됐다.
바로!!!! on/off.........
얼마 전에도 react, react-dom을 설치했음에도 불구하고 계속 ReactDOM이 import가 안되고 dependencies에 없다며 광광 울길래 '대체 뭔일이야?' 하고 두어시간을 동료와 함께 고생했는데.
너무 간단하게 vscode를 껐다 켜니 해결되는 문제였다.
오늘도 뭔가가 잘 안되는 느낌에 parcel-cache 다 지우고, jest 자동 실행도 껐다가 켜고, iterm까지 껐다 켜니 금방 해결됐다. 참나..ㅎㅎㅎ
때때론 너무나 확실하고 간단한 방법임에도 잊고 있는 방법이 있다는 것...ㅎㅎㅎ 너무 어렵게 생각하지 말자. 껐다 켜도 안되면, 재설치 해도 안되면 그 때 다시 고민할 것.
어쨌든, stack overflow의 답변과 잘 정리된 블로그 글을 참고하여 다시 한번 정리해보는 테스트(jest) 에러 대처 방법
1. jest.config.js 파일에 moduleNameMapper 설정
원래 test 때문에 jest.config.js 파일에 사전 설정해둔 것들이 있는데 그 아래에 moduleNameMapper를 추가해준다.
지금 생각해보니 jpg, png, gif같은 이미지 파일들 뿐만 아니라 mp3, mp4와 같은 음성파일도 오류가 났었던 기억이 새록새록... 추억의 뽀그로 타이머..ㅎㅎ
이게 왜 제대로 안됐나 몰라 .. 에휴.
moduleNameMapper: {
'\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
'\\.(css|less)$': 'identity-obj-proxy',
},2. root directory 아래에 __mocks__ 폴더 생성 및 fileMock.js 파일 생성
위에 작성한 코드를 보면 rootDir 하위에 __mocks__ 폴더를 생성하고 그 폴더 안에 fileMock.js 파일을 만들어야 할 것 같은 느낌이..
맞다.
사실 rootDir도 헷갈려서 src 폴더 하단에 __mocks__ 폴더를 만들어놓고 헤매기도.
scr 폴더와 동일한 레벨로 만들어주면 된다.
fileMock.js 파일을 mocks 폴더 아래에 만들어주고 아래 코드를 적어주기.
module.exports = 'test-file-stub';3. identity-obj-proxy 설치
위 과정을 끝냈다면 아래의 명령어로 identity-obj-proxy를 설치해준다.
npm i -D identity-obj-proxyproxy라는 말에서 왠지 얘가 무언가를 가로챌 것 같은 너낌이...ㅎㅎ
잘 해결!
여튼 나는 여기까지 설정하고 package.json에 아무 설정도 안해줬는데도 잘 해결되긴 했다만, 만약 해결되지 않는다면 위에 링크로 걸어놓은 블로그 글 또는 stack-overflow를 참고하여 해당 파일에 추가 설정을 해 주면 될 것 같다.
아, 별 것 아닌게 해결되지 않아서 속상했는데...
어쨌든 다시 테스트가 잘 돌아가니 어서 과제에 박차를 가해보자!!
