كيفية عمل إختبارات jest على Axios في React؟

Adam Ebrahim · 29 مارس 2021

لدي الدالة التالية:

export function getPosts() {
    const response = axios.get(`${my_URL}`);
    return {
        type: GET_POSTS,
        payload: response
    }
}

كيف أقوم بعمل إختبار لمثل هذه الدالة؟ قرأت أن Jest يمكنه أن يقوم بعمل إختبار للدوال من نوع asynchronous من خلال إستخدام بيانات وهمية، لكن لا أعرف كيف أقوم بتمرير هذه البيانات الوهمية.

Abdullah Muhammad · 29 مارس 2021

بكل بساطة في ملف ال test الخاص بهذه الدالة يمكنك أن تفعل التالي

// الخطوة 1

import { getPosts } from "./path"; 
jest.mock("axios");

describe("getPosts", () => { // الخطوة 2
  it("fetches posts successfully", async () => {
    const response = { // الخطوة 3
      data: {
        posts: [
          {
            postId: "1",
            postTitle: "Title Title"
          },
          {
            postId: "2",
            postTitle: "Title2 Title2"
          }
        ]
      }
    };

    // الخطوة 4
    axios.get.mockImplementationOnce(() => Promise.resolve(response));

    await expect(getPosts(`${my_URL}`)).resolves.toEqual(response);
  });

  it("fetching posts failed", async () => {
    const errorMessage = "Network Error";

    axios.get.mockImplementationOnce(() =>
      Promise.reject(new Error(errorMessage))
    );

    await expect(getPosts(`${my_URL}`)).rejects.toThrow(errorMessage);
  });
});

ففي

الخطوة رقم 1 : تقوم بإستيراد الدالة التي تريد عمل لها test في الملف الخاص ب ال test كما نقوم بإعلام jest اننا نقوم بعملية إختبار لدالة asynchronous تستخدم axios

الخطوة رقم 2 : تبدأ بتعريف ماتقوم بعمل إختبار له "test"

الخطوة رقم 3 : تقوم بكتابة شكل الرد المنتظر في حالة نجاح عملية جلب ال posts وهنا تسمى ب "mock response data" وهي أيضا البيانات الوهمية التي تسئل عنها.

الخطوة رقم 4 : تقوم بمدج axios مع هذا الإختبار وكتابة النتيجه المتوقعه من هذا الإختبار

الخطوات السابقه تمت في حالة نجاح عملية جلب المقالات ومابعدها يحاكي عملية الفشل.