SVGR jest 테스팅 에러

 

컴포넌트를 Test 하면서 에러가 발생했다. (Jest를 사용 중이다.)

원인은 Next.js에서 svg파일을 SVGR로 변환하여 사용하기 때문이었다. (원인을 알아내는 것도 한 시간 걸린 듯하다🙃)

SVGR 공식 문서에 친절하게 해결 방법이 나와있다.

 

Jest - SVGR

SVGR - Transforms SVG into React Components. - SVGR

 

 

1. __mock__ 폴더에 svg.js 파일을 생성한다.

export default 'SvgrURL'
export const ReactComponent = 'div'

현재 프로젝트에서는 이미 mocks폴더가 있어 svg.js 파일만 생성했다.

 

2.jest.config.ts 파일에 다음과 같이 코드를 추가한다.

module.exports = {
  moduleNameMapper: {
    // 프로젝트 폴더 구조에 맞게 바꿔주자
    '\\.svg$': '<rootDir>/__mocks__/svg.js',
    '\\.svg$': '<rootDir>/src/__mocks__/svg.js',
    '\\.svg$': '<rootDir>/src/mocks/svg.js', 
  },
}

이렇게 바꾸고 테스트를 실행해 보면

 

어림도 없지 바로 같은 에러 발생. 도대체 왜?!?!?!? 에러가 발생한 것인가. 이때부터 폭풍 검색이 시작됐다.

 

 

결론은 허탈하게도 정규표현식 수정으로 해결된다.

module.exports = {
  moduleNameMapper: {
  // 프로젝트 폴더 구조에 맞게 바꿔주자
    '^.+\\.(svg)$': '<rootDir>/src/mocks/svg.js', 
  },
}

• \\.svg$: 문자열 중. .svg로 끝나는 부분만 검사한다.
• ^.+\\.(svg)$: 파일 경로 전체를 검사하여 .svg로 끝나는 파일을 찾는다.

 

 

??? 여전히 모르겠다. 일단 하나 알게 된 건 공식문서

 

 

 

추가로 나는 svg.js를 아래와 같이 변경했다.

export default 'svg';
export const ReactComponent = 'div';

 

 

참고자료

nextjs @svgr/webpack jest + @issue 해결