코딩병원

Frontend/Jest

[Jest] MSW로 비동기 이벤트 테스트하기

MSW(Mock Service Worker)는 Node.js나 브라우저에서 모두 사용할 수 있는 모킹 라이브러리로, 브라우저에서는 서비스 워커를 활용해 실제 네트워크 요청을 가로채는 방식으로 모킹을 구현합니다. 즉, fetch로 예를 들자면, 브라우저에서는 fetch 요청을 하는 것과 동일하게 네트워크 요청을 수행하고, 이 요청을 중간에 MSW가 감지하고 미리 준비한 모킹 데이터를 제공하는 방식입니다. 이러한 방식은 fetch의 모든 기능을 그대로 사용하면서도 응답에 대해서만 모킹할 수 있으므로 fetch를 모킹하는 것이 훨씬 수월해집니다. MSW를 활용해 fetch 응답을 모킹한 테스트 코드를 다음과 같이 작성해 봤습니다.import { fireEvent, render, screen } from '@t..

2024. 5. 6.

Frontend/Jest

[Jest] 이벤트 핸들러 테스트하기 (fireEvent vs userEvent)

이번 글에서는 HTML 요소를 정적 컴포넌트, 동적 컴포넌트에서는 어떻게 확인할 수 있는지 간단한 예제를 통해 글을 작성해보겠습니다. 먼저, 테스트 코드를 잘 다루고 어떻게 동작하는지 알기 위해서는, React Testing Library가 뭔지 알아야 합니다. React Testing Library란? DOM Testing Library를 기반으로 만들어진 테스팅 라이브러리로, 리액트를 기반으로 한 테스트를 수행하기 위해 만들어졌습니다. React Testing Library를 이해하려면 먼저 React Testing Library가 기반으로 하는 DOM Testing Library에 대해 먼저 알아둬야 합니다. DOM Testing Library는 jsdom을 기반으로 하고 있습니다. jsdom이란 ..

2024. 4. 13.

Frontend/Jest

[Jest] Jest를 사용하는 이유

현대 웹 개발에서 코드의 안정성과 신뢰성은 점점 더 중요해지고 있습니다. 이런 상황에서 코드의 품질을 보장하고 버그를 최소화하기 위해선 강력한 테스트 프레임워크가 필수적입니다. 그중에서도 Jest는 자바스크립트 개발자들에게 널리 사용되는 강력한 도구 중 하나입니다. 이번 글에서는 Jest에 대해 알아보도록 하겠습니다.  테스트의 종류1. Unit Test (단위 테스트)개별 컴포넌트, 함수, 또는 모듈 등 코드의 작은 부분들을 테스트 하는 것 2. Integration Test (통합 테스트)여러 컴포넌트 간의 상호 작용을 테스트하는 것 3. E2E Test (End-To-End 테스트)유저 입장에서 유저의 모든 상황에 대해 시작부터 끝까지 테스트하는 것  Jest란?Jest는 페이스북에서 개발한, 자바..

2023. 12. 17.