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