Conversation
- SVG, PNG 등 정적 에셋 import 시 jest-transform-stub을 사용하도록 transform 설정 추가
✅ Deploy Preview for moadong ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughJest 설정 파일이 이미지 및 SVG 파일 확장자에 대해 Changes
Possibly related issues
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure 📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (2)
🔇 Additional comments (2)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Pull Request Overview
This PR resolves a SyntaxError encountered during Jest tests when importing image files by configuring Jest to handle static assets.
- Installed the "jest-transform-stub" library
- Updated Jest configuration to transform image file imports
- Mitigates the SyntaxError by converting image assets to string stubs
Reviewed Changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| frontend/package.json | Added "jest-transform-stub" dependency |
| frontend/jest.config.js | Configured Jest to transform image files using jest-transform-stub |
Files not reviewed (1)
- frontend/package-lock.json: Language not supported
| @@ -4,6 +4,7 @@ module.exports = { | |||
| testEnvironment: 'jsdom', | |||
| transform: { | |||
| '^.+\\.tsx?$': ['ts-jest', {}], | |||
There was a problem hiding this comment.
[nitpick] Consider adding a comment to explain that the regex covers the image formats used in the project, and if additional formats are introduced later, the regex should be updated accordingly.
| '^.+\\.tsx?$': ['ts-jest', {}], | |
| '^.+\\.tsx?$': ['ts-jest', {}], | |
| // This regex matches the image formats currently used in the project. | |
| // If additional image formats are introduced, update this regex accordingly. |
seongwon030
left a comment
seongwon030
left a comment
There was a problem hiding this comment.
굳굳 좋습니다!
mock으로 처리하는 방법도 있긴 하네요잉 ~ 다음에 이 방법으로도 처리해볼게요
처음엔 mockFile.js 방식으로 치환을 시도했는데, 경로 인식 문제가 있는지 해결이 되지 않아서... 결국 라이브러리로 방향을 틀었습니다 😞 |
아하.. 라이브러리 설치만 해 주면 되니까 이 방법이 더 편할 수도 있을 것 같습니당 |
2 participants
#️⃣ 연관된 이슈
📝 작업 내용
jest-transform-stub라이브러리 설치jest.config.js에.svg,.png등 이미지 파일에 대한 transform 설정 추가Unexpected token '<') 문제 해결✅ 문제 상황
SNS_CONFIG객체에 플랫폼별 아이콘(SVG/PNG)을 import하여 사용하는 로직이 추가되면서 테스트 실행 시 다음과 같은 에러 발생이는 Jest가
.svg파일을 JS처럼 파싱하려다 실패한 문제로, 정적 파일에 대한 처리 설정이 누락된 상태였음결론: Jest는 기본적으로 JS/TS만 이해하고, .svg, .png, .css 등 정적 자원은 이해 못 함
그래서 해결 방법은 이런 정적 파일들을 모두 가짜(mock) 파일로 치환하거나 특정 도구 (jest-transform-stub)로 처리 규칙을 명시해줘야함
🛠️ 해결 결과
jest-transform-stub을 도입하여.svg,.png등 정적 에셋을 mock 처리 - 쉽게 말하면 이미지를 문자열로 대체!!jest.config.js)에 이미지 파일을 위한transform항목 추가🫡 참고사항
jest-transform-stubnpm 페이지