Frontend/Cypress

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

wam 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해주지 않고 경로만 제대로 작성해주면 된다.