잘알자

MSW 란?더보기-  MSW 란?서비스 워커(Service Worker) 기술을 활용하여 네트워크 레벨에서 API 요청을 가로채고 모킹(mocking)할 수 있는 라이브러리이다.주로 프론트엔드 개발에서, 외부 API와의 통신을 테스트하거나 개발 중에 실제 API 호출을 대체하기 위해 사용된다.실제 서버와의 상호작용 없이 API 요청을 모킹할 수 있어, 네트워크 요청을 테스트하거나 개발 환경에서 서버에 의존하지 않고 작업할 수 있다는 장점을 가지고 있다.MSW 설치더보기- MSW 설치yarn add -D msw - public 폴더에 Service Worker 등록yarn msw init public/ --save - 전체 폴더 및 파일 구조 - handler.js 생성Mocking할 API를 핸들링할..

React Testing Library란?더보기- 사용자 중심 테스트 지향RTL은 컴포넌트의 구현 방식보다는 UI 요소를 렌더링하고, 사용자가 상호작용하는 방식에 중점을 둬서 테스트를 진행한다.즉, 버튼 클릭, 텍스트 입력, 요소의 표시 여부 등을 테스트할 때 사용한다. - DOM 상호작용 테스트RTL은 querySelector와 같은 DOM 메서드를 사용하여 컴포넌트 내의 요소를 선택하고 상호작용할 수 있게 해준다.예를 들어, getByText, getByRole, getByLabelText 등 다양한 쿼리 메서드를 제공하여, 실제 화면에서 표시되는 텍스트나 역할 기반으로 요소를 찾을 수 있다. - 어울리는 기술 스택RTL은 React 컴포넌트의 사용자 상호작용을 테스트하는 도구이고, Jest는 테스..

BDD (Behavior-Driven Development) 란?더보기- BDD 란?구현에 중점을 두기보다는 동작에 중점을 두는 테스트 개발 방식이다.사용자가 원하는 결과를 정확히 표현하는것이 목적이다.테스트는 개발자와 비즈니스 이해 관계자 모두가 읽을 수 있게 작성한다.React 테스트는 주로 BDD 방식으로 진행한다.React + Vite + TypeScript 프로젝트 생성더보기- Vite 프로젝트 생성yarn create vite - 프로젝트 이름 입력 - React 선택 - TypeScript + SWC 선택SWC (Speedy Web Compiler) : JavaScript 코드 중 ES6 이상으로 작성된 최신 문법을 ES5로 트랜스파일 하거나, TypeScript 코드를 JavaScript ..

Jest-extended란?더보기- Jest-extended란?jest-extended는 Jest에서 사용할 수 있는 추가적인 matcher들을 제공하는 확장 라이브러리입니다.Jest에서 기본적으로 제공하는 matcher(toBe, toEqual, toContain 등) 외에도 다양한 상황에서 유용한 matcher들을 추가로 사용할 수 있게 해줍니다.jest-extended를 사용하면 테스트의 가독성과 표현력을 높일 수 있습니다.Jest-extended 설치 (TypeScript 사용)더보기- jest-extended 설치yarn add -D jest-extended - global.d.ts 파일 생성 - global.d.ts 파일 설정import 'jest-extended'; - tsconfig.jso..

Jest 란?더보기- Jest 란?Jest는 Facebook에서 개발한 JavaScript 테스트 프레임워크로, React를 포함한 다양한 JavaScript 애플리케이션의 유닛 테스트와 통합 테스트를 쉽게 작성하고 실행할 수 있도록 도와줍니다.Jest 설치더보기- Jest 설치yarn add -D jest테스트 코드가 들어갈 파일명 작성 하는법더보기- test 또는 spec을 중간에 넣어서 파일명 작성 - test, spec이 아닌 다른 파일명으로 작성하고 싶은 경우jest.config.init 파일에서 textRegex 속성 변경default value : (/__tests__/.*|(\\.|/)(test|spec))\\.[jt]sx?$새로운 값 추가 : (/__tests__/.*|(\\.|/)(te..