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

توفر 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

الأمر بسيط يمكنك اتباع الخطوات في الأسفل فهي تبين العملية بدقة أولا نبدأ بالشيفرة الحاوية لل 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)),
    );
  });
});