Jest (5) 썸네일형 리스트형 [Jest] Provider 렌더 로직 함수로 추출하기 개요Jest + TypeScript 환경에서 RouterProvider 또는 ThemeProvider를 테스트 하려고 한다.실제 컴포넌트에서는 주로 Entry인 App 컴포넌트에 위 Provider를 호출한다.만약 테스트 코드를 작성할 때 Provider 없이 테스트 하려는 컴포넌트만 렌더링하게되면 실제 컴포넌트와 테스트 환경이 불일치하여 에러가 발생한다.이를 해결하기 위해 helper 함수로 RouterProvider와 ThemeProvider를 함께 렌더링하는 로직을 함수로 추출해보자.코드// renderWithMemoryRouter.tsximport { render } from '@testing-library/react';import { ReactNode } from 'react';import { .. [Jest] "TypeError: window.matchMedia is not a function" 에러 해결 개요Jest + TypeScript 환경에서 usehooks-ts 라이브러리의 useDarkMode 함수를 테스트 하고 있었다.useDarkMode는 로컬스토리지에 사용자가 라이트모드인지, 다크모드인지 값을 저장하고 수정할 수 있는 함수를 제공한다.useDarkMode 함수가 window.matchMedia를 사용하는데, window.matchMedia가 undefined이므로 해당 에러를 발생한다.해결// src/setupTests.tsObject.defineProperty(window, 'matchMedia', { writable: true, value: jest.fn().mockImplementation((query) => ({ matches: false, media: query, .. [Jest] "Jest worker encountered 4 child process exceptions, exceeding retry limit" 에러 해결 개요Jest + TypeScript 환경에서 테스트 코드를 작성하다가 갑자기 위 에러가 발생했다.위 에러는 비동기 테스트 코드에 대해 async/await 처리를 해주지 않아서 발생하는 에러였다.해결// ReceiptList.tsximport useFetchOrder from '../../../hooks/useFetchOrder';import convertKRW from '../../../utils/convertKRW';type ReceiptListProps = { orderId:string}function ReceiptList({ orderId }:ReceiptListProps) { const order = useFetchOrder(orderId); if (!order) { return nu.. [Jest] 외부 라이브러리 함수 mock 테스트 하기 개요Jest + React-Testing-Library 를 사용하여 컴포넌트 테스트 코드를 작성하고 있었다.테스트 하려는 컴포넌트에서 react-router의 useNavigate 함수를 호출하는 로직을 포함하고 있었고 버튼을 클릭했을 때 해당 useNavigate 이벤트가 발생했는지 테스트하고 싶었다.react-router 테스트 코드import { fireEvent, render, screen } from '@testing-library/react';import Intro from '.';const mockedUsedNavigate = jest.fn();jest.mock('react-router', () => ({ ...(jest.requireActual('react-router')), useNa.. [Jest] React-Testing-Library로 unmount 테스트 하기 개요unmount 시 어떤 함수를 실행해주는지 React-Testing-Library와 Jest로 테스트해보려고 한다.접근기본적으로 React-Testing-Library의 render 함수는 해당 컴포넌트를 렌더링한다.그럼 unmount 테스트를 위해서는 render 함수를 반환하는 함수를 호출해주면 된다.코드// Receipt.tstimport { useEffect } from 'react';import useCartStore from '../../hook/useCartStore';import convertKRW from '../../utils/convertKRW';import getTotalPrice from '../../utils/getTotalPrice';type ReceiptProps = { .. 이전 1 다음