Testing10 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. Jest: Only와 Skip 사용해보기 Only해당 테스트만 실행시키고 싶을 경우에 사용한다. 해당 테스트가 실패했을 경우 외부의 요인에 의한 것인지, 테스트 자체 실행에서 문제가 있었던 것인지를 판별할 때 사용한다. describe("숫자 확인 예제", () => { test.only("2+2는 2보다 크다.", () => { expect(2+2).toBeGreaterThan(2); }); test("5는 5보다 크거나 같다.", () => { expect(5).toBeGreaterThanOrEqual(5); }); test("3는 8보다 작다.", () => { expect(3).toBeLessThan(8); });}) 테스트 중에 only가 붙은 테스트만 시행되고 나머지는 skipped로 된 것을 볼 수 있다... 2024. 9. 18. Jest : Matcher에 대해서 Jest는 Matcher를 통해서 다양한 방식으로 값을 테스트할 수 있다. Matcher에 대한 내용은 Jest 공식 홈페이지 API를 참조하면 된다. 동등 비교Matcher설명toBe(값)기본 값을 비교하거나 객체 인스턴스의 참조 ID를 확인한다.toEqual(값)객체 인스턴스의 모든 속성을 비교한다. 즉 객체의 주소값이 아닌 깊은 값을 전부 비교한다.toStrictEqual(값) .toEqual과 비슷하지만, .toStrictEqual의 경우 객체의 키 값이나 배열의 값이 undefined일 경우에도 비교를 하며 해당 데이터의 타입도 비교한다. // fn.jsconst fn = { funcA: (a) => a + 10, funcB: (a, b) => ([a, b, undefined]), .. 2024. 9. 18. 이전 1 2 다음