Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[FE] 스토리북, RTL, msw 사용을 위한 환경설정 #32

Merged
merged 3 commits into from
Jul 19, 2024
Merged

[FE] 스토리북, RTL, msw 사용을 위한 환경설정 #32

merged 3 commits into from
Jul 19, 2024

Conversation

hwinkr
Copy link
Contributor

@hwinkr hwinkr commented Jul 18, 2024 •
edited by Yoonkyoungme
Loading

관련 이슈

작업 내용

  • 개발 환경에서 스토리북, RTL, msw 를 사용할 수 있도록 환경 설정을 했어요

특이 사항

1) msw 1.x -> 2.x

msw가 2.x 버젼으로 업데이트 되면서 Node.js 전역변수와 관련된 문제가 있었어요.

Request/Response/TextEncoder is not defined (Jest)

This issue is caused by your environment not having the Node.js globals for one reason or another. This commonly happens in Jest because it intentionally robs you of Node.js globals and fails to re-add them in their entirely. As the result, you have to explicitly add them yourself.

이 문제는 사용자 환경에 어떤 이유로든 Node.js 전역이 없기 때문에 발생합니다. 이 문제는 주로 Jest에서 발생하는데, 의도적으로 Node.js 전역 변수를 빼앗고 다시 추가하지 않기 때문입니다. 결과적으로 사용자가 직접 명시적으로 추가해야 합니다.

이 문제를 해결하기 위해서는

Create a jest.polyfills.js file next to your jest.config.js with the following content:

즉, 다운그레이드를 할 수 있도록 도와주는 폴리필 파일을 만들고 jest.config.js 파일에 추가해줘야 했어요!

모듈 번들러는 웹팩을 사용할 것이 권장되었지만, 테스트 프레임워크에 대한 제한은 없었으니 더 문제가 생기면 vitest로 가도 괜찮을 것 같아요!

리뷰 요구사항 (선택)

hwinkr added 3 commits July 18, 2024 18:12
@hwinkr
chore: 스토리북 사용을 위한 설정
5a4f509 
- package.json 의존성 추가
- .storybook 초기화 파일 추가
- 스토리북 관련 린트 규칙 추가
- 버튼 스토리북 생성 후 로컬 서버에서 동작 확인
@hwinkr
chore: RTL 사용을 위한 설정
1598cad 
- package.json에 의존성 추가
- jest.config.js 파일 설정
- 타입스크립트 환경에서 jest를 사용할 수 있도록 tsconfig.json 파일 설정 변경
@hwinkr
chore: msw 사용을 위한 설정
b6f4b2e 
- package.json 의존성 추가
- msw 버젼 업데이트 마이그레이션 과정에서 발생하는 문제를 해결하기 위한 폴리필 설정 파일 추가
- typescript 및 jest 환경에서 msw를 사용하기 위한 설정 추가
@hwinkr hwinkr added 🐈 프론트엔드 프론트엔드 관련 이슈에요 :) ⚙️ 환경설정 환경을 설정해요 :) labels Jul 18, 2024
@hwinkr hwinkr added this to the 2차 데모데이 milestone Jul 18, 2024
Largopie
Largopie approved these changes Jul 19, 2024
View reviewed changes
Copy link
Contributor

@Largopie Largopie left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

같이 설정했으니까 바로 머지 드리겠습니다! 👍

Yoonkyoungme
Yoonkyoungme approved these changes Jul 19, 2024
View reviewed changes
Copy link
Contributor

@Yoonkyoungme Yoonkyoungme left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

같이 작업했습니다👍

@hwinkr hwinkr merged commit 8708bbe into develop Jul 19, 2024
@hwinkr hwinkr deleted the chore/26-setting-etc branch July 19, 2024 06:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Yoonkyoungme Yoonkyoungme Yoonkyoungme approved these changes

@Largopie Largopie Largopie approved these changes

Assignees

@hwinkr hwinkr

@Yoonkyoungme Yoonkyoungme

@Largopie Largopie

Labels
⚙️ 환경설정 환경을 설정해요 :) 🐈 프론트엔드 프론트엔드 관련 이슈에요 :)
Projects
2024-momo
Status: Done
Milestone
2차 데모데이
Development

Successfully merging this pull request may close these issues.

[FE] 스토리북, RTL, msw 사용을 위한 환경설정을 해요 :)
3 participants
@hwinkr @Yoonkyoungme @Largopie