프론트엔드 테스트 비용과 효용 사이에서
프론트엔드 테스트의 비용과 효용을 배송 정보 렌더링 사례로 살펴본 글입니다. 테스트 기준 시각 고정, 공통화, 순서 검증으로 커버리지를 높인 과정을 정리했습니다.
#test#refactoring#Jest
18800
태그
Jest 기술 블로그 글
Jest 태그가 달린 국내 IT 기업 기술 블로그 글을 최신순으로 모았습니다.
전체 16개최신 16개 표시
관련 태그
최신 게시글
16개 표시
테스트 코드 작성 가이드(근데 이제 Jest를 곁들인)
테스트 코드의 기본 개념부터 TDD, BDD, 테스트 대역, Jest 활용까지 입문 관점에서 정리했습니다. 유지보수와 코드 냄새까지 함께 다뤄 실무 적용 기준도 제시했습니다.
#Jest#test#TDD
500
테스트 코드 작성 가이드(근데 이제 Jest를 곁들인)
테스트 코드의 기본 개념과 단위·통합·E2E 테스트의 차이를 정리했습니다. TDD와 BDD, 테스트 과잉과 과잉 명세까지 함께 살펴볼 수 있습니다.
#Jest#test#TDD
7100
테스트 코드 작성 가이드(근데 이제 Jest를 곁들인)
개발 속도와 품질 높이는 테스트 코드 도입 후기
프론트엔드 어드민 프로젝트에 테스트 코드를 소규모로 도입한 과정을 공유했습니다. 리팩토링 안정성과 개발 속도, 품질 보증 측면의 효과도 함께 정리했습니다.
#test#Jest#React
5000
Jest 활용 경험: 테스팅에 대한 고민과 통찰
Jest를 선택한 배경과 실제 활용 경험을 바탕으로 테스트 작성과 구조화 방법을 정리했습니다. 코드 품질 향상 효과와 함께 일부 성능 이슈도 함께 살펴보았습니다.
#Jest#test#JavaScript
2800
MSW - 더 나이스한 목킹을 위한 고민
MSW를 활용해 브라우저와 Node 환경에서 API 목킹을 통합하는 방법을 정리했습니다. 개발 속도 차이와 테스트용 목업 중복 문제를 줄인 사례를 소개했습니다.
#MSW#React#Jest
2900
나만의 Jest Matchers 만들기
Jest Custom Matcher로 여러 CSS class 포함 여부를 한 번에 검증하는 방법을 설명했습니다. 설정 파일 등록, 타입 검증, TypeScript 타입 확장 과정을 함께 다뤘습니다.
#Jest#TypeScript#test
000
나만의 Jest Matchers 만들기
Jest Custom Matcher를 만들어 반복적인 class 검증 테스트를 줄이는 방법을 소개했습니다. setup 파일 등록과 TypeScript 타입 선언까지 함께 다뤘습니다.
#Jest#test#TypeScript
1400
나만의 Jest Matchers 만들기
MSW를 활용하는 Front-End 통합테스트
MSW로 API 요청을 가로채는 React·Jest 기반 통합 테스트 구성을 소개했습니다. 정상·조건부·엣지·네트워크 오류 응답을 동적으로 검증할 수 있습니다.
#React#TypeScript#Jest
000
MSW를 활용하는 Front-End 통합테스트
MSW를 통해 FE 통합테스트에서 API 모킹과 응답 제어를 쉽게 하는 방법을 소개했습니다. 검색 페이지 예시로 정상 응답, 엣지 케이스, 에러 처리까지 검증하는 흐름을 설명했습니다.
#MSW#통합테스트#Jest
3400
MSW를 활용하는 Front-End 통합테스트
MSW 사용하여 테스트 코드 작성하기 with GraphQL, react-query
MSW로 GraphQL·react-query 요청을 네트워크 수준에서 모킹하는 Jest 테스트 구성을 소개했습니다. 공통 렌더러와 핸들러로 응답별 UI를 검증하는 방법을 설명합니다.
#MSW#GraphQL#React
3200
MSW 모킹 코드 재사용하기 feat. Storybook, Jest
Storybook 스토리의 MSW 핸들러를 Custom Render로 Jest 테스트에서 재사용했습니다. 테스트 간 핸들러 초기화와 Node.js 절대 경로 문제 해결 방법도 소개합니다.
#MSW#Storybook#Jest
000
MSW 모킹 코드 재사용하기 feat. Storybook, Jest
Storybook 스토리에 선언한 MSW 핸들러를 Custom Render로 Jest 테스트에서 재사용했습니다. 테스트 후 핸들러 초기화와 Node.js 절대 URL 처리 방법도 소개합니다.
#MSW#Storybook#Jest
2600
MSW 모킹 코드 재사용하기 feat. Storybook, Jest
프론트엔드 테스트 팁
유닛·통합·E2E 테스트의 역할과 비즈레버 프론트엔드 적용 사례를 설명했습니다. Cypress의 실행 성능 문제와 React Testing Library·Jest 활용 팁을 공유합니다.
#React#Cypress#Jest
3000
댓글 모듈 레거시 걷어내기 with TDD
JavaScript와 jQuery 기반의 댓글 모듈을 Vue와 TypeScript로 재구성했습니다. TDD와 컴포넌트 분리를 통해 SPA에 맞는 사내 라이브러리로 배포했습니다.
#JavaScript#Vue.js#TypeScript
800
댓글 모듈 레거시 걷어내기 with TDD
JEST를 이용한 SW Test 활용해보기
Jest와 Docker DB, Fixture·Snapshot·Rollback을 활용한 결제·쿠폰 모듈 테스트 방식을 소개했습니다.\nHusky pre-push 검증으로 회귀 오류를 막고 협업 안정성을 높인 경험을 공유합니다.
#Jest#Docker#DB
2100
