• 0

إختبار axios بإستخدام jest في React

لدي الكود التالي لعمل طلب GET إلى الخادم وإحضار بعض البيانات:

export function fetchUsers() {
    const request = axios.get(`${SERVER_URL}`);
    return {
        type: FETCH_POSTS,
        payload: request
    }
}

كيف أقوم بإختبار دالة get الموجودة في مكتبة Axios، أعلم أن Jest يمكنه أن يختبر كود من نوع asynchronous من خلال إستخدام دالة وهمية mock function، ووصلت إلى هذا الرابط في التوثيق الرسمي الخاص بـ jest ، لكن لا أعلم كيف أقوم بتطبيق نفس الأمر على مكتبة axios

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

توفر axios دعم ل jest بدون أي مكاتب خارجية:

import * as axios from "axios";

// عمل طلبات وهمية لجميع المستويات,  get, put, delete and post:
jest.mock("axios");

// ... get

test("good response", () => {
  axios.get.mockImplementation(() => Promise.resolve({ data: {...} }));
  // ...
});

test("bad response", () => {
  axios.get.mockImplementation(() => Promise.reject({ ... }));
  // ...
});

وحتى يمكننا تحديد parameters:

axios.get.mockImplementation((url) => {
    if (url === 'www.example.com') {
        return Promise.resolve({ data: {...} });
    } else {
        //...
    }
});

يمكنك القراءة أكثر من التوثيق الذي يحوي التغييرات لآخر إصدار: jestjs/mock-functions

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

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

import { fetchUsers } from './';
 
describe('fetchUsers', () => {
  it('fetches with success data from an API', async () => {
 
  });
 
  it('fetches with error data from an API', async () => {
 
  });
});

الجزء الخاص بالنجاح تخصص في متغير يمثل هيكلة ال data المستقبلة من الطلب وتتحقق

import axios from 'axios';
 
import { fetchUsers } from './';
 
jest.mock('axios');
 
describe('fetchUsers', () => {
  it('fetches with success data from an API', async () => {
    const data = {
    .....
    };
 
    axios.get.mockImplementationOnce(() => Promise.resolve(data));
  });
 
......
});

اما الجزء الخاص بفشل الطلب فكالتالي

import axios from 'axios';
 
import { fetchUsers } from './';
 
jest.mock('axios');
 
describe('fetchUsers', () => {
.......
 
  it('fetches with error data from an API', async () => {
    const errorMessage = 'Network Error';
 
    axios.get.mockImplementationOnce(() =>
      Promise.reject(new Error(errorMessage)),
    );
  });
});

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن