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"); }..
성공 케이스 작성이전 게시글에서 회원가입 시 비밀번호와 비밀번호 확인의 값이 달라 실패하는 케이스를 작성했다.이번에는 비밀번호와 비밀번호 확인의 값이 같을 때 회원가입 버튼이 활성화되는 케이스를 작성해보자. 이전 게시글의 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를 사용하는..
