React/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 Warning: wrapped in act(...).

경고 메세지 Warning: An update to Overlay inside a test was not wrapped in act(...). act(...)로 코드를 감싸라는 권고사항으로서 테스트에는 성공하지만 현재 해당 프로젝트 코드에서는 act로 감싸면 안되는 경우에 있다. 해당 경고가 발생한다면 마운트 되지 않은 컴포넌트에서 React 상태 업데이트를 수행할 수 없다는 형제 경고를 동반한다. When testing, code that causes React state updates should be wrapped into act(...): 이유 거의 대부분 해당 오류가 나는 이유는 테스트가 끝난 뒤 컴포넌트가 바뀌기 때문이다. 일부 비동기 상태 업데이트가 완료되기 전에 테스트 함수가 종료된다. 프..

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 ..

JEST Mock Service Worker 테스트 내부 사용

https://arkhyeon.tistory.com/25 JEST Mock Service Worker 설정 및 기본 사용 Mock Service Worker Service Worker API를 사용하여 실제 요청을 가로채는 API Mocking 라이브러리입니다. 서버에 대한 호출을 막고 사용자가 작성한 응답을 전송 응답을 보내줄 핸들러 작성 핸들러를 이용해 arkhyeon.tistory.com MSW 테스트 내용 기존의 성공한 핸들러를 서버 오류가 발생하도록 재정의하여 2개의 비동기 함수 오류 발생 시 알림창이 2개가 화면에 나오는지 테스트 진행 기존 설정된 MSW 핸들러 import { rest } from "msw"; export const handlers = [ rest.get("", (req, r..

JEST Mock Service Worker 설정 및 기본 사용

Mock Service Worker Service Worker API를 사용하여 실제 요청을 가로채는 API Mocking 라이브러리입니다. 서버에 대한 호출을 막고 사용자가 작성한 응답을 전송 응답을 보내줄 핸들러 작성 핸들러를 이용해 응답을 보낼 서버 작성 테스트 전 서버가 요청을 MSW로 라우팅, 핸들러 재설정, 서버 종료에 대한 테스트 서버 설정 npm i -D msw Jest를 이용해 axios를 모킹하면 안 되나요? 간단한 앱에서는 모킹이 가능하지만 더 복잡한 앱에서는 MSW로 다양한 도구를 이용할 수 있다 axios 모킹에 MSW를 사용하는 이유는 여러 가지입니다. 동시 요청에 대한 Mocking 반환값은 관리하기 어렵고 불안정하다. 페이지를 재정렬 시 모의 화면에서 반환값의 순서가 잘못되어..

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에서 찾는 요소가 ..