اذهب إلى المحتوى
  • 0

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

Adam Ebrahim

السؤال

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

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

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

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

Recommended Posts

  • 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

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

  • 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)),
    );
  });
});

 

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

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...