Cypress로 공통 컴포넌트 테스트 하기 주문을 테스트 하려고 한다.이 때 사용자는 배달/주문 중 원하는 유형을 하나 선택할 수 있다./ 페이지에 오면 배달 버튼과 포장 버튼이 보인다.배달 버튼을 클릭하면 /food-type으로 이동하면서 여러 음식 종류가 노출되어야 한다. describe('주문을 테스트 한다', () => { it('사용자는 배달/주문 중 원하는 유형을 선택할 수 있다', () => { cy.visit('/'); cy.get('[data-cy=deliveryBtn]').should('be.visible').as('deliveryBtn'); cy.get('[data-cy=pickupBtn]').should('be.visible').as('pickupBtn'); ..
Cypress Testing Frameworks for Javascript | Write, Run, Debug | CypressSimplify front-end testing with Cypress' open-source app. Explore our versatile testing frameworks for browser-based applications and components.www.cypress.io 최신 웹 애플리케이션에 대한 E2E 테스트를 쉽게 생성하고, 시각적으로 디버그하고, 지속적 통합 빌드를 통해 자동으로 실행할 수 있는 테스트 도구 Cypress 설치 및 환경 설정npm install --save-dev cypress // package.json"cypress": "npx cypre..
로직이메일로 로그인을 하는 기능을 구현하려고 한다.회원가입과 유사한데 이메일 + 비밀번호 입력 후 로그인을 시도했을 때 로그인이 실패하면 에러 메세지가 나오게 해야 한다.하지만 실제로 HTTP 요청을 보낸다는 점에서 회원가입과 차이가 있다. 예제에서 사용하는 LoginPage에서는 useMutation이라는 훅을 사용하고 있다.비동기로 로그인 요청을 처리하고 요청이 실패할 경우 에러를 던지는 코드다.const useLogin = () => useMutation( ["login"], async (loginInfo: LoginProps) => postLogin(loginInfo), { onError() { throw Error("login failed"); }..
패키지 매니저란?소프트웨어 개발 과정에서 라이브러리나 프레임워크와 같은 외부 패키지 관리를 용이하게 해주는 도구로, 이를 통해 패키지의 설치, 업데이트, 삭제 등을 쉽고 효율적으로 관리할 수 있다. Node.js 환경에서 가장 널리 사용되는 패키지 매니저는 Node.js의 기본 패키지 매니저인 npm(node package manager) 이외에도 yarn, pnpm과 같은 다양한 패키지 매니저가 사용되고 있다. npm, yarn, pnpm 비교하기이들 모두 Node.js 환경에서 사용되는 패키지 매니저지만 각 패키지 매니저는 독자적인 설계 철학과 목표를 가지고 개발되었기 때문에 내부 동작 방식과 제공하는 기능에서 차이가 있다. npm가장 널리 사용되는 패키지 매니저로 커뮤니티와 패키지 수가 아주 많다...
발견한 에러questrip에서 맛집을 추천하는 페이지인 Recommend 페이지를 개발하고 있다.이 페이지에서는 서버로부터 10개 이상의 추천 데이터를 받아오지만 유저에게는 1개씩만 데이터를 보여준다.유저가 이 맛집을 선호하는지, 비선호하는지, 관심 없는지 무조건 1개 이상의 상태를 취해야만 계속 추천 데이터를 볼 수 있다. 즉 선호(Accepted), 비선호(Denied), 관심 없음(Kept) 3가지 중 1개의 상태를 취하면 그 상태를 post 해 서버에 현황을 보내주고, 추천 데이터는 1개가 줄어든 상태로 다시 받아와야 한다.const response = await axiosInstance.post( `/api/v1/recommend`, { placeId: placeId, ..
성공 케이스 작성이전 게시글에서 회원가입 시 비밀번호와 비밀번호 확인의 값이 달라 실패하는 케이스를 작성했다.이번에는 비밀번호와 비밀번호 확인의 값이 같을 때 회원가입 버튼이 활성화되는 케이스를 작성해보자. 이전 게시글의 given(회원가입 페이지가 그려진다)는 동일하고, when과 then만 수정해주면 된다.when은 비밀번호와 비밀번호 확인의 값이 일치할 때로, then은 회원가입 버튼이 활성화되는 것으로! 이 때 beforeEach를 사용하면 더 간단해진다.beforeEach는 각 describe의 it 또는 test가 동작하기 전에 동작하는 함수였다.given을 beforeEach로 감싸주고 각 test만 진행하면 된다.describe("회원가입 테스트", () => { beforeEach(()..
Jest 설치 및 환경 설정npm install --save-dev jest @types/jest ts-jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom 터미널에 위와 같은 명령어를 입력해 Jest를 설치해준다.정확히 어떤 것들인지 잘 몰라서 하나하나 서치해서 정리해봤다. 먼저 강의에서는 TS를 사용하기 때문에 Jest의 타입을 정의해줄 @types/jest와 ts-jest도 설치해줬다. jest-environment-jsdom은 Jest 테스트 환경을 JSDOM으로 설정하는 패키지다.JSDOM은 Node.js 환경에서 브라우저 환경을 시뮬레이션 해서 DOM API를 사용할 수 있..
Intro디프만 15기에 합류하게 되면서 스터디에도 욕심을 내봤다. 솔직히 프로젝트를 위해서 글을 쓰는 오늘 시점부터 배울 것이 너무나 많아져서 내가 너무 황새 따라가려다 다리가 찢어지는 거 아닐까 약간! 아주 약간! 🥲 걱정이 되긴 하지만, 간단하게라도 혼자가 아니라 사람들과 공유하면서 배워가는 경험을 얻고 싶었다. 그러나 좀처럼 프론트엔드 직무에 적합한 스터디 공고가 올라오지 않고 있었는데, 다행히 같은 팀인 HM님이 테스트 코드 관련 강의 스터디 공고를 올리셔서 이번 스터디는 프론트엔드의 테스트 코드를 간단하게 알아보는 것으로 진행하게 되었다. 아주 예전에 React 강의에 묶음으로 있었던 Jest로 테스트 코드가 무엇이고 왜 쓰는 것인지는 한 번 찍먹을 해봤지만, 당시에는 React를 사용하는..
발견한 에러NextJS로 작업을 하는데 자꾸 콘솔에 이런 에러 메세지가 떴다. (사실 에러보단 경고 메세지?)Warning: Extra attributes from the server: cz-shortcut-listen 해결구글링이 최고시다 🥹 This is usually caused by an extension passing these extra attributes with your code when it is executed on the browser trying to interact with the UI, this creates a mismatch between what was rendered on the server and what is rendered on the client.Extension..
