jest

Jest Debugging Tips

👉 console.log() 명령문이 브라우저의 출력을 오염시키는 것처럼 디버그 명령문도 테스트를 오염시킵니다. 실제로 테스트를 디버그하고 싶을 때 명령문을 사용해야 하지만 코드베이스로 푸시해서는 안 됩니다. screen.debug(element) 해당 테스트에서 작성한 element가 화면, DOM에서 어떻게 보일지 테스트 출력 사용 화면 screen.debug(screen.getByText("Grand total: $", { exact: false })); 출력 화면 console.log Grand total: $0.00 at logDOM (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/pretty-dom.js:8..

JEST Custom Render

Render DOM에 컴포넌트를 렌더링 ... render(); ... function render( ui: React.ReactElement, options?: { /* You won't often use this, expand below for docs on options */ }, ): RenderResult Render Option Wrapper provider로 부터 렌더링 하는 것을 래핑해 테스트 중 provider에 액세스 가능하게 한다. EX : router, reduex, context, theme … ... render(, { wrapper: OrderDetailsProvider }); ... Custom Render 동일한 옵션을 가진 Render를 각 테스트마다 정의해서 사용하기 불..

Jest 원하는 테스트만 실행

Watch Mode에서 원하는 테스트만 실행 yarn run test --watch //watch 모드로 실행 Watch 모드로 실행 시 수정 시 마다 테스트를 진행하는데 w 키 입력 시 아래와 같이 원하는 테스트만 진행할 수 있는 메뉴가 있다. a : 모든 테스트 진행 f : 실패한 테스트 진행 p : 파일 이름으로 필터링하여 진행 t : 테스트 이름으로 필터링하여 진행 Watch Usage › Press a to run all tests. › Press f to run only failed tests. › Press p to filter by a filename regex pattern. › Press t to filter by a test name regex pattern. › Press q to ..

React Jest user-event FireEvent

fireEvent / user-event 14버전으로 진행할 예정인데 13버전과 14버전은 상당히 다르기 때문에 유의바랍니다. fireEvent는 DOM 이벤트를 디스패치하고 user-event는 모든 상호 작용을 시뮬레이션합니다. https://ph-fritsche.github.io/blog/post/why-userevent Why you should test with user-event Choosing the right developing tools for your project can be a daunting task. Here's why user-event should be one of them. ph-fritsche.github.io fireEvent는 이벤트를 트리거 하지만 user-event..

Testing React with Jest and React Testing Library - 2

간단한 어플리케이션 테스트 import { fireEvent, render, screen } from "@testing-library/react"; import { logRoles } from "@testing-library/react"; import App from "./App"; import { replaceCamelWithSpaces } from "./App"; test("button has correct initial color and updates when clicked button", () => { const { container } = render(); logRoles(container); // 이름이 'Change to blue'인 버튼 요소 찾기 const colorButton = scr..

Testing React with Jest and React Testing Library - 1

Jest 개요 render 메서드 실행 import { render, screen } from '@testing-library/react'; import App from './App'; test('renders learn react link', () => { render(); const linkElement = screen.getByText(/Learn React/i); expect(linkElement).toBeInTheDocument(); }); render 메서드 인수로 제공하는 JSX에 관한 가상 DOM을 생성 현재 JSX에 관한 인수는 APP입니다 화면에 렌더된 모든 텍스트를 기반으로 DOM에서 요소를 찾는다. i는 정규 표현식으로 대소문자 비교하지 않고 검색 의미한다. APP에서 찾는 요소가 ..

JEST-REACT18-Vite

JEST 개요 Jest는 React 애플리케이션을 테스트하기 위해 일반적으로 사용되는 JavaScript 테스팅 프레임워크입니다. 개발자들은 쉽게 단위 테스트를 작성하고 실행할 수 있습니다. JEST 설정 1. 라이브러리 설치 🔽 npm install -D @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime @testing-library/jest-dom @testing-library/react @testing-library/user-event identity-obj-proxy jest jest-environment-jsdom @babel/preset-env 대상 환경에 필요한 구문 변환(및 선택적으로 브라우저 폴리필)을 관리할 필요..