프론트엔드/테스트

React 테스트 방법

백엔드 서버 요청 처리 (MSW 활용) 실제로 서버에 요청하는 E2E 테스트를 할 수도 있지만, 백엔드보다 프론트엔드가 먼저 개발이 들어가거나 하는 경우나, 프론트만 분리해서 테스트 하고 싶은 경우에는 MSW를 활용할 수 있다. 서버 요청시 MSW가 가로채고 모의 응답을 보내준다. MSW 초기 설정 테스트에서 요청들을 mock server가 가로채도록 설정해준다. // src/mocks/server.js import { setupServer } from 'msw/node' import { handlers } from './handlers' // This configures a Service Worker with the given request handlers. export c..

TDD

TDD란? Test Driven Development 테스트 코드 작성 후 그 테스트 코드를 Pass 할 수 있는 실제 코드를 작성 장점 많은 기능 테스트하기에 소스 코드에 안정감 디버깅 시간 줄어들고 실제 개발 시간 줄어듬 깨끗한 코드 방법 기능 하나에 대한 테스트 코드 작성 해당 테스트 코드 통과하도록 코드 작성 1~2 반복 예시 기능 하나에 대한 테스트 코드 작성 it('counter starts at 0', () => { render() const counter = screen.getByTestId('counter') // 임시로 testid 사용, getByRole을 되도록이면 쓰자 expect(counter).toHaveTextContent('0') }) 해당 테스트 코드 통과하도록 코드 작성..

React 테스트 기초 (사용 툴, 환경 설정)

인프런의 "따라하며 배우는 리액트 테스트"를 듣고 정리해 봤다. 테스트를 하는 이유 더 안정적인 어플리케이션을 만들기 위해 디버깅 시간 단축 - 테스팅 환경이 구축되어 있다면 자동화된 유닛 테스팅으로 특정 버그를 쉽게 찾아 낼 수 있다. 재설계 시간 단축, 추가 구현 용이 사용 툴 React Testing Library React 컴포넌트 테스트용 라이브러리 - 사용자 입장의 테스트, 행위 주도 테스트 (click, type 등) DOM Testing Library 위에 구축 주요 API render DOM에 컴포넌트 렌더링, 인자로 렌더링할 컴포넌트 리턴 값으로 RTL에서 제공하는 쿼리 함수, 기타 유틸 함수를 담고 있는 개체를 리턴 해당 쿼리, 유틸 함수는 소스 코드가 복잡할 경우 비추천, 대신 sc..