카
카카오엔터테인먼트FE
March 17, 20221회
MSW 모킹 코드 재사용하기 feat. Storybook, Jest
간단 소개
Storybook과 Jest에서 MSW 모킹 코드 중복을 Custom Render와 Tagged Template Literal을 사용하여 해결하고 재사용성을 높이는 방법을 제시합니다.
AI Summary
- Storybook과 Jest에서 MSW 모킹 중복 문제
- Storybook에서 msw-storybook-addon을 사용하여 API 모킹을 수행하고 시각적 테스트를 진행.
- Jest에서 @storybook/testing-react를 통해 Storybook 컴포넌트를 재사용하지만, MSW 모킹 코드는 여전히 중복 정의됨.
- 해결 방안: Custom Render 활용
- @testing-library/react의
render함수를 래핑하여 Custom Render를 구현, Storybook의 MSW 모킹을 Jest 테스트에서 재사용. - 테스트 코드 내
server.use()호출 없이 Storybook에 정의된 모킹을 활용하여 코드 가독성을 향상시키고 중복을 제거.
- @testing-library/react의
- Node.js 환경에서 MSW 절대 경로 문제 해결
- Node.js에서 MSW 사용 시 절대 경로를 사용해야 하는 제약 극복.
- Tagged Template Literal을 활용하여 Node.js 환경에서만 호스트를 prefix로 추가, 애플리케이션 코드와 테스트 코드에서 상대 경로를 유지.
Next Feeds
Webpack → Vite: 번들러 마이그레이션 이야기
AB180의 Webpack에서 Vite로의 번들러 마이그레이션 경험 공유: 빌드 속도 개선, 개발 경험 향상, 그리고 얻게 된 교훈.
WebpackVite번들러마이그레이션빌드 속도
2022. 3. 15.
AB180
DynamoDB를 사용하는 Go 서비스의 응답 시간 최적화 #1 AWS Credential Token
Go DynamoDB 서비스 응답 시간 최적화 과정: AWS SDK 토큰 발급 로직 개선을 통해 간헐적 응답 시간 증가 문제 해결.
DynamoDBGoAWS SDKCredential Token응답 시간 최적화
2022. 3. 15.
버즈빌
뱅크샐러드 채용 여정 함께하기
뱅크샐러드 채용 프로세스를 소개하고, 각 전형별 합격 팁과 조직 문화, 비전을 공유하여 지원자에게 유용한 정보를 제공합니다.
채용뱅크샐러드인터뷰조직문화핵심가치
2022. 3. 15.
뱅크샐러드
카카오페이지는 BFF(Backend For Frontend)를 어떻게 적용했을까?
카카오페이지는 BFF를 통해 프론트엔드의 복잡성을 줄이고 효율적인 데이터 관리를 구현했습니다. GraphQL과 Urql을 활용한 구조를 소개합니다.
BFFGraphQLApollo ClientUrqlMSA
2022. 3. 10.
카카오엔터테인먼트FE
카카오페이지는 BFF(Backend For Frontend)를 어떻게 적용했을까?
카카오페이지는 BFF를 통해 프론트엔드의 복잡성을 줄이고 생산성을 높였습니다. Urql과 Redux를 함께 사용하여 데이터 관리 효율성을 개선했습니다.
BFFGraphQLApollo ClientUrqlRedux
2022. 3. 10.
카카오엔터테인먼트FE
HTTP connection pool in Go explained
Go HTTP 커넥션 풀 관리 방법, 파라미터 설정, httptrace.ClientTrace를 활용한 성능 분석 및 최적화 기법을 설명합니다.
HTTPconnection poolGohttp.Transporthttptrace
2022. 3. 7.
버즈빌