ใน Cypress จะมีฟีเจอร์หนึ่งที่ช่วยในการจัดการแก้ไขหรือปรับแต่งการตอบกลับของ HTTP requests ที่ถูกเรียกในภายนอกบราวเซอร์ได้ นั่น คือ interceptor

โดยเราสามารถใช้ cy.intercept() เพื่อสร้าง interceptor และทำการ stub, modify, หรือ spy กับ HTTP requests. ได้อย่างง่ายดาย

Syntax

cy.intercept(url)
cy.intercept(method, url)
cy.intercept(routeMatcher)

spying only

โดยที่เราสามารถกำหนด url, method, routeMatcher และ staticResponse argument ต่างๆ ได้ โดยในส่วนนี้สามารถเข้าไปอ่านเพิ่มเติมใน Documents ของ Cypress ได้เลย

cy.intercept(url, staticResponse)
cy.intercept(method, url, staticResponse)
cy.intercept(routeMatcher, staticResponse)
cy.intercept(url, routeMatcher, staticResponse)

spying and response stubbing

ตัวอย่าง

ทีนี้เรามาดูตัวอย่างการนำเอา Interception มาใช้ในการทดสอบ โดยสมมติว่า มีหน้า PostLists ที่มีการเรียก getPostLists สำหรับดึงข้อมูลจาก APIs Service และนำแสดงผลรายการ Posts

import { useEffect, useState } from 'react';

import ApiService from './services';

const PostLists = () => {
  const [posts, setPosts] = useState(null);

  const getData = async () => {
    const response = await ApiService.getPostLists();
    setPosts(response);
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <ul>
      {posts &&
        posts.map((data) => (
          <li key={data.id}>
            {`${data.title}: ${data.body}`}
          </li>
        ))}
    </ul>
  );
};

export default PostLists;

มาดูในไฟล์ Service จะมีฟังก์ชั่น getPostLists ที่ทำการเรียก APIs เพื่อมาแสดงผล

import axios from 'axios';

const getPostLists = async () => {
  try {
    const response = await axios.get(`https://jsonplaceholder.typicode.com/posts`);
    return response.data;
  } catch (error) {
    console.error(error);
  }
};

export default {
  getPostLists,
};

Service.tsx

ในส่วนของการทดสอบ เราสามารถ Stub Response ตัว Service โดยการใช้ interceptor ตามโค๊ดตัวอย่างด้านล่าง

import PostLists from './PostLists';

describe('<PostLists />', () => {
  it('renders', () => {
    cy.intercept('GET', 'https://jsonplaceholder.typicode.com/posts', {
      statusCode: 200,
      body: [
        {
          userId: 1,
          id: 10,
          title: 'Test',
          body: 'Stub response',
        },
        {
          userId: 2,
          id: 12,
          title: 'Test 2',
          body: 'Stub response 2',
        }
      ],
    });

    cy.mount(<PostLists />);
  });
});

นี่เป็นตัวอย่างการใช้งาน Interceptor อย่างง่าย เพื่อให้ทุกคนสามารเริ่มต้นทำมันได้โดยไม่งงกัน

Reference: