cypress에서 HTTP request mocking

mocking이란?

테스트코드가 실제 서버에 HTTP통신을 하는것은 비효율적이므로, 가짜 request를 보내는것처럼 보이게하는것

cypress에서 테스트케이스를 작성하다보니 로그인 등은 실제 서버로 HTTP통신이 이뤄졌다.
이건 테스트코드이기때문에 실제 통신이 이뤄지는것은 비효율적이다.
따라서 가짜 requerst를 보내서 통신을 주고받은것처럼 가짜로! 보여지게 만들어야한다. 이렇게 가짜 request를 보내는것을 mocking(모조,가짜)이라고한다.

jest에서는 nock패키지를 따로 설치해주어 HTTP mocking을 진행했었다.
그럼 cypress에서는 어떻게 mocking할까?

cypress에서의 mocking

cypress는 intercept를 사용하면 별도의 패키지없이 가짜 request처리가 가능하다.
intercept는 말그대로 가로채다 인데, 서버에 통신하지않게 도중에 가로챈다라는 의미이다.

//기본구조 
cy.intercept(
      {
        method: "POST",
        url: "/user/login",
      }
);

필요하다면 response body나 alias도 설정이 가능하다.

cy.intercept(
  {
    method: "POST",
    url: "/user/login",
  },
  { token: "Authorization" }
).as("login");

response body의 데이터를 가져온경우 예시

// http-mocking
  it("사용자는 음식 종류를 선택할 수 있다", () => {
    cy.visit("/food-type");

    cy.intercept(
      {
        method: "GET",
        url: "/restaurant/food-type",
      },
      [
        {
          id: 1,
          name: "피자",
          icon: "https://kr.object.ncloudstorage.com/icons/ic-pizza.png",
        },
        {
          id: 2,
          name: "동남아",
          icon: "https://kr.object.ncloudstorage.com/icons/ic-asian.png",
        },
        {
          id: 3,
          name: "햄버거",
          icon: "https://kr.object.ncloudstorage.com/icons/ic-burger.png",
        },
        {
          id: 4,
          name: "디저트",
          icon: "https://kr.object.ncloudstorage.com/icons/ic-cake.png",
        },
        {
          id: 5,
          name: "치킨",
          icon: "https://kr.object.ncloudstorage.com/icons/ic-chicken.png",
        },
        {
          id: 6,
          name: "탕,찌개",
          icon: "https://kr.object.ncloudstorage.com/icons/ic-hotpot.png",
        },
        {
          id: 7,
          name: "고기",
          icon: "https://kr.object.ncloudstorage.com/icons/ic-meat.png",
        },
        {
          id: 8,
          name: "중식",
          icon: "https://kr.object.ncloudstorage.com/icons/ic-noodle.png",
        },
        {
          id: 9,
          name: "샐러드",
          icon: "https://kr.object.ncloudstorage.com/icons/ic-salad.png",
        },
      ]
    );

    cy.get("[data-cy=1]").should("be.visible").as("pizzaBtn");
    cy.get("@pizzaBtn").click();

    cy.url().should("include", "/food-type/1");