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

인기 글

태그

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

최근 글

관리자

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

w__am 개발노트

fixture, 테스트에 사용될 미리 정의된 정적 데이터 파일
Frontend/Cypress

fixture, 테스트에 사용될 미리 정의된 정적 데이터 파일

2024. 12. 2. 21:17

 

Fixture란?

  • Fixture는 테스트에 사용될 미리 정의된 정적 데이터 파일이다.
  • 일반적으로 JSON 파일 형식으로 작성되며, cypress/fixtures 디렉토리에 저장된다.
  • fixtures/example.json : 기본 예제 파일 삭제해도 됨

 

 

[Fixture 만들기] create-account

// cypress\e2e\integration\create-account.cy.ts

it("계정을 생성하고 로그인해야 합니다.", () => {
  // cypress를 이용해 request를 가로채기 (localhost:4000/graphql을 Intercept 하기)
  user.intercept("<http://localhost:4000/graphql>", (req) => {
    const { operationName } = req.body;
    if (operationName && operationName === "createAccount") {
      req.reply((res) => {
        res.send({
          data: {
            createAccount: {
              ok: true,
              error: null,
              __typename: "CreateAccountOutput"
            }
          }
        });
      });
    } 
  });

  // 계정 생성
  user.visit("/create-account");
  user.findByPlaceholderText("이메일").type("testClient16@mail.com");
  user.findByPlaceholderText("비밀번호").type("123123");
  user.findByRole("button").click();

  // 만든 계정으로 로그인
  user.wait(2000);
  user.login("client@mail.com", "123123");
});

 

 

// fixtures/auth/create-account.json

{
  "data": {
    "createAccount": {
      "ok": true,
      "error": null,
      "__typename": "CreateAccountOutput"
    }
  }
}

기본적으로 integration 테스트와 동일한 폴더 구조를 만들기

 

 

 

// cypress\e2e\integration\create-account.cy.ts

it("계정을 생성하고 로그인해야 합니다.", () => {
  // cypress를 이용해 request를 가로채기 (localhost:4000/graphql을 Intercept 하기)
  user.intercept("<http://localhost:4000/graphql>", (req) => {
    const { operationName } = req.body;
    if (operationName && operationName === "createAccount") {
      req.reply((res) => {
        res.send({ fixture: "auth/create-account.json" }); // fixture 경로 작성
      });
    } 
  });

  // 계정 생성
  user.visit("/create-account");
  user.findByPlaceholderText("이메일").type("testClient16@mail.com");
  user.findByPlaceholderText("비밀번호").type("123123");
  user.findByRole("button").click();

  // 만든 계정으로 로그인
  user.wait(2000);
  user.login("client@mail.com", "123123");
});
  • import해주지 않고 경로만 제대로 작성해주면 된다.

 

 

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

'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 testing libray 설치  (0) 2024.11.14
    'Frontend/Cypress' 카테고리의 다른 글
    • Custom Commands
    • Intercept() : cypress를 이용해 request를 가로채는 법
    • Cypress, 브라우저의 localStorage에 저장된 값을 검증하는 코드 테스트
    • Cypress, React Testing Library에서 제공하는 비동기 쿼리 메서드 체인 안되는 부분 해결 방법
    wam
    wam

    티스토리툴바