728x90 Jest5 Jest & testing-library/react로 React Test 코드 구성하기 [fireEvent 배워보기] 간략 설명 fireEvent : 사용자 이벤트를 시뮬레이션합니다 fireEvent @testing-library/react`에서 제공하는 이벤트 시뮬레이션 함수로, 사용자의 실제 상호작용을 테스트에 반영할 수 있습니다. 여기에는 클릭, 입력 값 변경, 키보드 이벤트 등 다양한 유형의 이벤트가 포함됩니다. import { render, screen } from '@testing-library/react'; import MyComponent from './MyComponent'; render(); fireEvent의 다양한 유형 1.Mouse Events: 마우스 이벤트는 마우스 동작을 모방합니다. 클릭, 더블클릭, 마우스 버튼 누름/떼기, 마우스가 요소 안으로 들어옴/나감 등의 동작을 포함합니다. 2.Ke.. 2023. 4. 21. Jest & testing-library/react로 React Test 코드 구성하기 -1 [render(), screen 배워보기] 간략 설명 render() 함수를 호출하면 내부적으로 가상 DOM에 컴포넌트가 렌더링되고, 이후에 screen 객체를 사용하여 렌더링된 요소를 쿼리할 수 있습니다. render() render() 함수를 사용하여 컴포넌트를 가상 DOM에 렌더링하고 결과를 반환합니다. 이 함수는 렌더링된 컴포넌트의 상태와 이벤트를 테스트하는 데 사용할 수 있는 유틸리티를 반환합니다. 이 과정에서 render()가 반환한 가상 DOM에 렌더링된 컴포넌트를 명시적으로 표시할 필요는 없습니다. import { render, screen } from '@testing-library/react'; import MyComponent from './MyComponent'; render(); screen screen 객체는 렌더링된 요.. 2023. 4. 21. Jest vscode Snippet 만들기 vscode 스니펫 추가 F1 키 또는 ⌘ + ⇧ + P (윈도우는 Ctrl + Shift + P) 를 누르고 Snippet 검색 Snippet : Configure User Snippet 클릭. 아래 처럼 어떤 언어에 대한 스니펫을 추가할지 파일이 나옴 원하는 파일형식을 지정 typescirptreact.json 을 선택하고 "/ComponentTest": { "prefix": "/ComponentTest", "body": [ "// 필요한 모듈 임포트", "import React from 'react';", "import { render, screen } from '@testing-library/react';", "import '@testing-library/jest-dom/extend-expect'.. 2023. 4. 21. Jest 컴포넌트 테스트 예제 Jest 설치가 안되어있다면 아래 게시물을 보고 오시길 추천드립니다 Jest import 방법 (With @ 포함 경로 인식) (tistory.com) 테스트용 컴포넌트 // MyComponent.tsx import React from 'react'; // Props 타입 정의 interface Props { title: string; onClick: () => void; } // React.FC를 사용하지 않는 MyComponent 함수형 컴포넌트 export const MyComponent = ({ title, onClick }: Props) => { return ( {/* title prop으로 전달받은 값을 h1 요소에 표시 */} {title} {/* onClick prop으로 전달받은 함수를 .. 2023. 4. 21. 이전 1 2 다음 728x90
