728x90 반응형 RTL4 [React] Jest에서 호출되는 함수 mocking 하기 안녕하세요. J4J입니다. 이번 포스팅은 jest에서 호출되는 함수 mocking 하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Jest에서 Mocking이 필요한 이유 mock이란 번역을 했을 때 확인할 수 있는 것처럼 모조품, 가짜라는 의미를 가지고 있습니다. 그래서 mocking이라는 것은 mock 데이터를 활용하는 것으로 해석해볼 수 있으며 주로 테스트 케이스를 작성할 때 mock 데이터를 활용하여 테스트 코드를 작성하는 것을 의미합니다. jest에서 mock 데이터가 필요한 이유는 간단합니다. jest에 의해 테스트될 수 있는 다양한 모듈 및 컴포넌트들에는 다양한 함수들이 존재할 수 있고 한 가지의 함수가 올바르게 동작되는지 테스트할 때 함수에 의존된 여러 가지 함수들이 실행될 수도 있습.. 2024. 1. 20. [Next] Jest 사용 환경 설정하기 안녕하세요. J4J입니다. 이번 포스팅은 jest 사용 환경 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Jest 사용 환경 설정 방법 환경 설정을 하기 전 현재 개발하고 있는 프로젝트 환경이 어떻게 구성되어 있느냐에 따라 저와 같이 수행하더라도 정상 동작이 되지 않을 수 있습니다. 이번 설정에서 구성되는 기본적인 프로젝트 환경은 next cli를 이용하여 typescript 환경을 구축한 것을 기반으로 할 예정이기에 글을 보실 때 참고해 주시면 될 것 같습니다. 또한 일반적으로 next에서 jest를 사용하시는 경우 컴포넌트에 대한 테스트도 함께 수행하실 것이기 때문에 jest를 설정하면서 testing-library도 함께 설정하도록 하겠습니다. [ 1. 패키지 설치 ] $ npm ins.. 2024. 1. 4. [React] Vite 타입 스크립트 프로젝트에 Jest 사용 환경 설정 안녕하세요. J4J입니다. 이번 포스팅은 Vite 타입 스크립트 프로젝트에 Jest 사용 환경 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 관련 글 [React] Vite 사용하기 Jest 사용 환경 설정 Jest를 이용하여 테스트 케이스를 작성하는 경우는 여러 가지 존재합니다. Jest 내부에서만 작성되어 테스트하는 경우, 정의해 둔 모듈을 로드하여 테스트하는 경우, HTML element까지 접근하여 테스트하는 경우 등이 있습니다. 내부에서만 작성하는 경우부터 HTML element까지 접근하는 경우까지 점점 갈수록 더 많은 설정들이 필요한데, 일반적으로 React에서 Jest를 활용하는 경우 HTML element까지 접근하여 사용하기 때문에 이번 글에서는 한 번에 모든 설정을 해보겠습.. 2023. 10. 6. [React] Jest로 테스트할 때 비동기 처리하기 안녕하세요. J4J입니다. 이번 포스팅은 Jest로 테스트할 때 비동기 처리하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 비동기 처리하는 경우 Jest에서 비동기 처리하는 경우는 빈번하게 발생됩니다. 단순한 예시를 들면, 하나의 페이지에서 화면에 보이고 싶은 데이터를 가져오기 위해 API 요청을 하게 되고 전달받은 데이터들이 화면에 올바르게 보이고 있는지 확인해 볼 때 비동기 처리가 필요합니다. 예시를 기반으로 간단하게 소스를 작성해보면 다음과 같습니다. import axios from 'axios'; import { useEffect, useState } from 'react'; interface Person { name: string; position: string; } export defau.. 2023. 10. 5. 이전 1 다음 728x90 반응형
