가수면

설치 및 구성Next의 경우npm init playwright# oryarn create playwright# orpnpm create playwright기타https://playwright.dev/docs/intro#installation Installation | PlaywrightIntroductionplaywright.dev테스트 실행테스트를 실행하는 방법에는 여러가지가 있다.1. Playwright Test for VSCode 확장 프로그램 설치설치하면 좌측에 탭 목록에 '테스트' 탭이 생긴다. 해당 탭에서 테스트 실행.2. 명령어 입력// 헤드리스 모드에서 실행되며, 테스트 결과와 테스트 로그가 터미널에 표시npx playwright test// 테..

https://mswjs.io/docs/ Introduction What is Mock Service Worker? mswjs.io 실제 요청을 가로채는 API 목킹 라이브러리 npm install msw --save-dev 기본 세팅 handlers 설정 요청할 api들을 모아 놓은 곳. 원하는 결과를 설정해 넣으면 테스트 시 설정한 대로 요청이 간다. // src\mocks\handlers.ts import { rest } from "msw"; export const handlers = [ rest.get("http://localhost:3030/scoops", (req, res, ctx) => { return res( ctx.json([ { name: "Chocolate", imagePath: "/..

Warning: An update to Options inside a test was not wrapped in act .... Warning: Can't perform a React state update on an unmounted component. 위 두 가지 오류의 대부분의 경우는 테스트가 끝난 뒤에 컴포넌트가 바뀌기 때문에 발생하는 오류이다. 예를 들어 초기 화면에 0이 잘 렌더링 되는지를 테스트하는 함수를 작성했다고 해보자. 테스트 함수는 잘 작성되었고 성공적으로 통과되어 언마운트까지 한 상황이다. 그러나 만약 해당 컴포넌트 안에 fetch 등의 비동기 로직이 있는 경우 문제가 발생할 수 있다. 테스트가 종료되어 이미 언마운트가 일어났음에도 불구하고 비동기 작업이 반환되어 컴포넌트를 렌더링 ..

waitFor 비동기에 대한 요청이 전부 처리될 때까지 기다리도록 하는 메소드 function waitFor( callback: () => T | Promise, options?: { container?: HTMLElement timeout?: number interval?: number onTimeout?: (error: Error) => Error mutationObserverOptions?: MutationObserverInit }, ): Promise 예시) 2개의 요청 결과를 기다려야 함 test("스쿱 및 토핑 라우트를 핸들링", async () => { server.resetHandlers( rest.get("http://localhost:3030/scoops", (req, res, ctx)..

fireEvent도 좋지만 공식 문서에서는 user-event를 더 추천. npm install @testing-library/user-event@^14 fireEvent vs user-event fireEvent DOM 이벤트를 디스패치 (컴퓨터 이벤트) user-event 모든 상호작용을 시뮬레이션 (사용자 상호 작용 이벤트) 기본 형태 import 시 구조 분해하지 않고, async / await를 사용해야 한다. import userEvent from '@testing-library/user-event' // inlining test('trigger some awesome feature when clicking the button', async () => { const user = userEven..

screen 쿼리 목록 https://testing-library.com/docs/queries/about/#priority About Queries | Testing Library Overview testing-library.com getByRole의 역할 목록 https://www.w3.org/TR/wai-aria/#role_definitions Accessible Rich Internet Applications (WAI-ARIA) 1.2 A section of a page that consists of a composition that forms an independent part of a document, page, or site. An article is not a navigational lan..

@testing-library/jest-dom을 설치하고 @testing-library/react를 버전 업하길 추천 (이건 필수) npm test 리액트 테스팅 라이브러리과 Jest RTL 테스트를 위한 가상 DOM을 제공 가상 DOM이 원하는 대로 작동하는지 확인할 수 있는 도구를 제공 Jest 테스트 러너. RTL로 작성된 테스트 파일을 찾고 실행하여 테스트를 수행 cra에 포함되어 기본으로 제공 setupTests.js 파일을 사용해 각 테스트 전에 jest-dom을 가져옴 (모든 테스트에서 jest-dom 매처를 사용할 수 있음) Watch mode - 마지막 커밋 이후 변경된 파일과 연관된 테스트만 실행 (모든 테스트 실행도 가능) 실패 조건 - 테스트 함수 실행 시 에러 발생할 때, 단언의 ..