Vue BDD - Cypress Mock Api

📌 목차

• Introduction
• Cypress api mock 하기
• Conclusion
• Reference

📌 Introduction

안녕하세요. BDD마지막 시간으로 이제 Cypress에서 api call를 mock 하는 방법에 대해 알아보겠습니다. 해당 코드는 여기에서 확인하실 수 있습니다. 해당 예제는 jsonplaceholder에서 todo를 하나 반환하는 예제 입니다.

📌 Cypress api mock 하기

API를 mock 하기전에 먼저 행동을 정의해보겠습니다.

• Todo의 제목은 'hello'라고 쓰여있어야 합니다.

Feature: Todo
  Background: 
    Given I am on the main page

  Scenario: Todo display
    Then I can see Todo with text:
    |title|hello|

이렇게 쓴 Gherkin으로 cypress는 이렇게 코딩할 수 있습니다.

const { visit, the } = cy;

Given("I am on the main page", () => {
  cy.server();
  cy.route("https://jsonplaceholder.typicode.com/posts/1", {
    title: "hello",
  });
  visit("/");
});

Then("I can see Todo with text:", (rawData) => {
  const stats = rawData.rowsHash();
  const title = stats["title"];
  cy.log(stats);
  the("todo").contains(title);
});

Given("I am on the main page", ...)부분을 보면 cypress server를 먼저 띄워줍니다. 그리고 route를 통해 받는 것을 상세하게 적어줍니다. 이렇게 적어주면

import * as axios from "axios";

export const fetchTodos = () => {
  return axios.get("https://jsonplaceholder.typicode.com/posts/1");
};

fetchTodos의 response는 { title: "hello" }가 됩니다.

📌 Conclusion

Cypress에서 api를 mock 하는 부분은 그렇게 어렵지 않습니다. 다만 어떻게 사용하지는 매우 어렵습니다. 모든 api를 mock해주는 것은 integration test의 명목에 많이 벗어납니다. 그러므로 애초에 Gherkin을 잘 적어줄 필요가 있습니다. 상세한 부분들마다 testing을 진행하면 좋겠지만 그런 부분은 이미 tdd에서 unit test에서 많이 걸러졌을거라 생각합니다. 최대한 묶어서 전체적인 흐름으로써의 integration을 진행하는 것이 중요합니다. 그럼 다음 포스팅에서 만나요~~ 😎

📌 Reference

• cypress document