건빵

Cypress로 React Unit Test 하는 방법과 간단한 회고를 기록합니다. Step. 0 :: 회고 Cypress를 사용하지 않고 Selenium을 이용해서 E2E Test를 진행할 수 있지만 FE 중점으로 특화된 테스트 방법을 도입하는 것이 더 좋지 않을까 생각하게 되었습니다. Cypress로 React기반 프로젝트를 테스트해야 할 때, Cypress + Storybook 형태로 진행할지, 아니면 Cypress + React 형태로 진행할지 고민을 하게 되었습니다. 이번 포스트에서는 Cypress + React 방식은 어떻게 진행하는지 이야기해보려고 합니다. 더 나은 방법, 더 나은 코드가 있다면 언제든지 댓글로 알려주세요. (저도 배우는 입장이라...) React 프로젝트를 Cypress로 ..

Cypress에서 사용하는 CLI 명령어에 대해 소개합니다. cypress info : Cypress와 관련된 정보를 출력합니다. 정보는 다음과 같은 항목을 포함합니다. 1. Cypress에서 감지한 브라우저 목록 2. Proxy 제어를 위한 환경변수 3. CYPRESS으로 시작한 모든 환경변수 4. Runtime 데이터가 저장되는 위치 5. Binary Caches 6. 운영체제 정보 7. 시스템 메모리 cypress verify : Cypress가 올바르게 설치되어있는지, 실행 가능한지 확인합니다. cypress version : Cypress 버전을 표시합니다. cypress cache : Cypress 설치된 정보를 가져오거나 Cypress를 제거합니다. 여기에서 더 자세히 다룹니다. cypres..

cypress cache 명령어의 옵션에 대해 정리하겠습니다. path cypress cache path Cypress를 설치한 경로를 가져옵니다. 여기의 가이드에 따라 변경하여 설치할 수 있습니다. list cypress cache list Cypress의 설치 목록을 가져옵니다. clear cypress cache clear Cypress를 제거합니다. 이 명령어는 cache에 설치된 Cypress를 모두 제거합니다. 단, 그렇다고 프로젝트에 npm install로 설치한 Cypress가 삭제되는 것이 아닙니다. npm uninstall cypress를 하기 전에 먼저 선행되어야하는 명령어입니다. 만약 cypress cache clear이후에 다시 사용하고자 할 경우에는 cypress install ..

Cypress로테스트를 진행하는 cypress run 명령어의 옵션에 대해 정리하겠습니다. --help, -h cypress run --help cypress run -h 명령어 정보를 출력합니다. --browser, -b cypress run --browser /usr/bin/chromium cypress run -b /usr/bin/chromium 테스트를 진행할 브라우저를 지정합니다. 브라우저 이름이나 경로를 입력합니다. 브라우저 이름을 입력했을 경우에는 chrome, chromium, edge, electron, firefox를 인식하며 Cypress가 시스템에서 찾아 테스트를 진행합니다. 경로의 경우에는 해당 경로의 브라우저를 실행하여 진행합니다. --config, -c cypress run -..

설치하려는 프로젝트에 아래 명령어를 입력합니다. npm install cypress --save-dev