wam
w__am 개발노트
wam
  • 분류 전체보기 (165)
    • CS 지식 (10)
      • 자료구조 (0)
      • 알고리즘 (0)
      • 컴퓨터 구조 (0)
      • 운영체제 (0)
      • 네트워크 (7)
      • 데이터베이스 (0)
      • 디자인 패턴 (3)
    • Frontend (131)
      • Three.js (64)
      • NPM (1)
      • Nest.js (19)
      • React (10)
      • Apollo (7)
      • TypeScript (2)
      • JavaScript (12)
      • HTML, CSS (1)
      • Jest (3)
      • E2E (5)
      • Cypress (7)
    • Database (12)
      • TypeORM (12)
    • IT 지식 (8)
      • 클라우드 서비스 (3)
      • 네트워크 (1)
      • 데이터 포맷 (2)
      • 기타 (2)
    • IT Book (2)
    • 유용한 사이트 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • 🐱 Github

인기 글

태그

  • 함수의 범위
  • getdelta()
  • e.preventdefault()
  • isabstract
  • gridhelper
  • 삼각함수
  • 데이터 포맷
  • 오프-프레미스(off-premise) 방식
  • reactive variables
  • 함수 선언문
  • math.sin()
  • mapped types
  • 디자인 패턴
  • getelapsedtime()
  • axeshelper
  • 스코프
  • threejs 개발 할 때 도움을 줄 수 있는 유틸리티
  • API
  • Decorators
  • 함수 표현식
  • 초기 환경설정
  • joi 에러
  • 렌더링 성능 최적화
  • Interface
  • react 성능 최적화
  • 원형적인 움직임
  • 함수 리터럴
  • three.js 구성 요소
  • math.cos()
  • type-graphql

최근 글

관리자

글쓰기 / 스킨편집 / 관리자페이지
hELLO · Designed By 정상우.
wam

w__am 개발노트

Cypress testing libray 설치
Frontend/Cypress

Cypress testing libray 설치

2024. 11. 14. 22:13

 

Cypress testing libray 설치

https://testing-library.com/docs/cypress-testing-library/intro

npm install --save-dev cypress @testing-library/cypress

 

 

설치 후 Element 사용 가능

  • react testing Libray에서 사용했던 getByText와 같은 걸 사용해 element를 가져 올 수 있다.
  • getByText, getByRow, getByContainer를 사용할 수 있게 된다.

 

 

types에 추가하기

// cypress/tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": "../node_modules",
    "types": ["cypress", "@testing-library/cypress"],
    "outDir": "#"
  },
  "include": ["./**/*.*"]
}

 

 

명령어 확장하기

https://testing-library.com/docs/cypress-testing-library/intro#usage

cypress/support/commands.js:

...

import '@testing-library/cypress/add-commands'

testing libray가 제공하는 findByPlaceholderText, findByRole 등을 사용할 수 있다.

참고, 명령어 확장이 되지 않을 경우 vscode를 재시작 해보기

 

 

저작자표시 변경금지 (새창열림)

'Frontend > Cypress' 카테고리의 다른 글

Custom Commands  (0) 2024.12.02
Intercept() : cypress를 이용해 request를 가로채는 법  (0) 2024.11.29
Cypress, 브라우저의 localStorage에 저장된 값을 검증하는 코드 테스트  (0) 2024.11.25
Cypress, React Testing Library에서 제공하는 비동기 쿼리 메서드 체인 안되는 부분 해결 방법  (0) 2024.11.25
Cypress, 실제 사용 환경에 가까운 테스트  (0) 2024.11.14
    'Frontend/Cypress' 카테고리의 다른 글
    • Intercept() : cypress를 이용해 request를 가로채는 법
    • Cypress, 브라우저의 localStorage에 저장된 값을 검증하는 코드 테스트
    • Cypress, React Testing Library에서 제공하는 비동기 쿼리 메서드 체인 안되는 부분 해결 방법
    • Cypress, 실제 사용 환경에 가까운 테스트
    wam
    wam

    티스토리툴바