Testing/Vitest4 Vitest: Fire Event와 User Event 라이브러리에 대해 알아보자 Fire Eventtesting-library/react에 DOM요소에서 이벤트를 시뮬레이션하여 테스트할 수 있게 해주는 fireEvent가 있다. fireEvent의 경우에는 클릭, 입력, 포커스 등의 간단한 이벤트를 발생시켜 컴포넌트 동작을 테스트할 수 있다. 하지만 fireEvent의 경우 복잡한 상호작용을 시행하는 데에는 제한이 있어 User Event 라이브러리를 사용한다. Fire Event 사용하기(1) @testing-library/react에서 fireEvent를 받아온다. import { fireEvent } from '@testing-library/react'; (2) fireEvent.이벤트(이벤트를 시행할 대상)으로 이벤트를 발생시킨다. // 버튼 클릭 이벤트 발생 .. 2024. 9. 23. Vitest : testing-library/jest-dom에 대해서 GitHub - testing-library/jest-dom: :owl: Custom jest matchers to test the state of the DOM GitHub - testing-library/jest-dom: :owl: Custom jest matchers to test the state of the DOM:owl: Custom jest matchers to test the state of the DOM - testing-library/jest-domgithub.com jest-dom 라이브러리는 custom jest matchers를 제공하는 라이브러리로 더 명확한 테스트 코드를 작성하는데 도움이 된다. matchers에 대한 자세한 설명과 예제는 위의 사이트에 들어가면 확인할 수 있다.. 2024. 9. 23. Vitest : Query function (쿼리함수)에 대해서 About Queries | Testing Library (testing-library.com) About Queries | Testing LibraryOverviewtesting-library.com 쿼리함수란 React Testing Library 패키지에서 제공하는 기능으로 페이지에서 요소를 찾을 수 있도록 도와주는 함수이다. 위의 사이트에서 쿼리 함수에 대해 정보를 얻을 수 있다. 쿼리 함수 종류는 크게 get, query, find로 나뉜다. getBy쿼리에 해당하는 하나의 요소를 반환, 요소를 찾지 못하면 에러 발생queryBy 쿼리에 해당하는 하나의 요소를 반환, 요소를 찾지 못하면 null을 반환함. 존재하지 않는 요소 검증 시 유용findBy쿼리 시행 후 Promise를 반환, 요소를 찾.. 2024. 9. 22. Vitest 사용하기 Vitest의 경우에는 Vite를 기반으로 작동하는 테스트 프레임워크로 Jest와 호환되는 API를 제공하고 있다. Vitest의 경우 개발 환경을 설정해 놓으면 vite.config.js에 남아있어, 이후에도 계속 동일한 환경에서 테스트를 진행할 수 있다. Vitest 시작하기 Vitest의 경우 Vite v5.0이상 그리고 Node.js v18.0.0이상이 필요하다.// npmnpm install -D vitest//yarnyarn add -D vitest//pnpmpnpm add -D vitest//bunbun add -D vitest 이렇게 간단하게 설치가 가능하지만 Vitest를 리액트에서 사용하기 위해서는 vitest와 React Testing Library를 이용하여 패키지를 설치해야 한다.. 2024. 9. 22. 이전 1 다음