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