{intro}
<Spacing size="lg" />
## 🚨 에러 메시지
 
아래 에러를 해결한 포스트입니다.
 
- (로컬에서 Jest 실행 시) Cannot find module 'public/icons/icon.svg' from ...
- (CI 환경에서 Jest 실행 시) Cannot find module 'public/icons/icon.svg' or its corresponding type declarations.
 
## SVGR 모킹하기
 
로컬 환경에서 Jest를 실행하면 Cannot find module 에러가 발생했습니다. [SVGR 공식 사이트](https://react-svgr.com/docs/jest/)을 보며 svg 모킹 작업을 해 줍니다.
 
### 1. 목업 파일 생성하기
 
루트 폴더에 모킹을 위한 __ mocks __/svg.js 파일을 생성해 줍니다. 
(mocks 앞, 뒤 언더스코어는 붙여서 써주세요)
 
```javascript
export default 'SvgrURL'
export const ReactComponent = 'div'
```
 
### 2. Jest 설정하기
 
```javascript
// jest.config.ts
module.exports = {
 moduleNameMapper: {
 '\\.svg$': '<rootDir>/__mocks__/svg.js',
 },
}
```
 
jest.config.ts에서 .svg 파일이 1번에서 생성한 svg 모킹 파일로 매핑될 수 있도록 설정해 줍니다. 
그럼 로컬에서는 테스트가 잘 통과하는 모습을 볼 수 있습니다 👏👏👏
 
## SVG 타입 지정하기
 
Cannot find module 'public/icons/icon.svg' or its corresponding type declarations.
 
기쁜 마음으로 코드를 push 했지만, 테스트를 통과하지 못합니다 🥲 
아무래도 타입 문제인 것 같습니다.
 
### global.d.ts 파일에 svg 타입 선언하기
 
```typescript
declare module "*.svg" {
 export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
 export default ReactComponent;
}
```
 
루트 폴더에 global.d.ts를 만들고
.svg 파일을 React 컴포넌트처럼 사용할 수 있도록 타입을 선언해 줍니다.
그럼, CI 환경에서도 테스트가 잘 돌아가게 됩니다 🎉
 
## 포스팅을 마무리하며
 
오늘은 Jest 환경에서 SVGR를 사용할 시 발생하는 에러 해결 방법을 간단히 살펴보았습니다. 
혹시 Jest 세팅에 고생하는 분들이 계신다면 도움이 되면 좋겠습니다 👍

.css-y59011{position:relative;}.css-y59011::after{content:"";position:absolute;right:0;bottom:0;width:0;height:2px;background-color:var(--color-secondary);-webkit-transition:width 200ms ease-in-out;transition:width 200ms ease-in-out;} Jest에서 SVGR 테스트하기

Jest에서 SVGR 테스트하기