วิธีสร้าง Mocking API Calls ด้วย Jest: บทแนะนำฉบับสมบูรณ์

เมื่อเขียนการทดสอบสำหรับโค้ดที่เรียก API นั้น สิ่งสำคัญคือต้องจำลองการเรียกเหล่านั้น เพื่อให้แน่ใจว่าการทดสอบของคุณมีความน่าเชื่อถือ รวดเร็ว และไม่ขึ้นอยู่กับบริการภายนอก Jest ซึ่งเป็นเฟรมเวิร์กการทดสอบ JavaScript ยอดนิยม มีหลายวิธีในการจำลองการเรียก API ในการทดสอบของคุณได้อย่างง่ายดาย มาเจาะลึกวิธีการต่างๆ ที่คุณสามารถใช้ได้

การใช้ jest.mock()

วิธีหนึ่งในการจำลองการเรียก API ใน Jest คือการใช้ฟังก์ชัน jest.mock() เพื่อจำลองโมดูลทั้งหมดที่ทำการร้องขอ API นี่คือตัวอย่าง:

// api.js
import axios from 'axios';

export const getUsers = () => {
  return axios.get('/users');
};

// api.test.js
import axios from 'axios';
import { getUsers } from './api';

jest.mock('axios');

test('getUsers returns data from API', async () => {
  const users = [{ id: 1, name: 'John' }];
  axios.get.mockResolvedValueOnce({ data: users });
  
  const result = await getUsers();
  
  expect(axios.get).toHaveBeenCalledWith('/users');
  expect(result.data).toEqual(users);
});

ในตัวอย่างนี้ เราใช้ jest.mock('axios') เพื่อจำลองโมดูล axios ทั้งหมดโดยอัตโนมัติ จากนั้นเราใช้ axios.get.mockResolvedValueOnce() เพื่อจำลองการตอบสนองสำหรับการเรียก axios.get ครั้งถัดไป การทดสอบของเราสามารถตรวจสอบได้ว่า API ถูกเรียกอย่างถูกต้องและส่งคืนข้อมูลที่จำลอง 1

การใช้ Manual Mocks

อีกวิธีหนึ่งคือการจำลองโมดูลที่ทำการเรียก API ด้วยตนเองโดยการสร้างโฟลเดอร์ __mocks__ และใส่ไฟล์การใช้งานจำลองไว้ข้างใน:

// __mocks__/axios.js
export default {
  get: jest.fn(() => Promise.resolve({ data: {} })),
  post: jest.fn(() => Promise.resolve({ data: {} })),
  // ...
};

ตอนนี้ในการทดสอบของคุณ คุณสามารถจำลองการตอบสนองที่แตกต่างกันสำหรับการทดสอบแต่ละครั้ง:

// api.test.js
import axios from 'axios';
import { getUsers } from './api';

jest.mock('axios');

test('getUsers returns data from API', async () => {
  const users = [{ id: 1, name: 'John' }];
  axios.get.mockResolvedValueOnce({ data: users });
  
  const result = await getUsers();
  
  expect(axios.get).toHaveBeenCalledWith('/users');
  expect(result.data).toEqual(users);
});

ด้วยการจำลองด้วยตนเองนี้ คุณสามารถควบคุมได้อย่างเต็มที่ในการจำลองวิธีการ Axios ที่แตกต่างกัน เช่น get, post เป็นต้น ด้วยการใช้งานของคุณเอง 2

การใช้ Axios-mock-adapter

คุณสามารถใช้ไลบรารีเพื่อจำลองคำขอ Axios ได้อย่างละเอียดมากขึ้น ก่อนอื่น ให้ติดตั้ง:

npm install axios-mock-adapter --save-dev

จากนั้นในการทดสอบของคุณ:

// api.test.js
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { getUsers } from './api';

describe('getUsers', () => {
  let mock;
  
  beforeAll(() => {
    mock = new MockAdapter(axios);
  });
  
  afterEach(() => {  
    mock.reset();
  });
  
  test('returns users data', async () => {
    const users = [{ id: 1, name: 'John' }];
    mock.onGet('/users').reply(200, users);
    
    const result = await getUsers();
    
    expect(result.data).toEqual(users);  
  });
});

ด้วย axios-mock-adapter คุณสามารถจำลองคำขอตาม URL, พารามิเตอร์, ส่วนหัว และอื่นๆ ได้ คุณยังสามารถจำลองข้อผิดพลาดและการหมดเวลาได้

การฉีดอินสแตนซ์ Axios ที่จำลอง

หากโค้ดของคุณใช้ axios โดยตรง อีกทางเลือกหนึ่งคือการฉีดอินสแตนซ์ axios ที่จำลองลงในโค้ดของคุณในระหว่างการทดสอบ:

// api.js
import axios from 'axios';

export const getUsers = () => {
  return axios.get('/users');
};

// api.test.js
import axios from 'axios';
import { getUsers } from './api';

jest.mock('axios', () => ({
  get: jest.fn(),
}));

test('getUsers returns data from API', async () => {
  const users = [{ id: 1, name: 'John' }];
  axios.get.mockResolvedValueOnce({ data: users });
  
  const result = await getUsers();
  
  expect(axios.get).toHaveBeenCalledWith('/users');
  expect(result.data).toEqual(users);
});

ที่นี่เราจำลอง axios เอง ไม่ใช่ทั้งโมดูล และจัดเตรียมฟังก์ชัน get ที่จำลองของเราเอง

เคล็ดลับสำหรับการจำลองการเรียก API

นี่คือเคล็ดลับบางประการที่ควรคำนึงถึงเมื่อจำลองการเรียก API ใน Jest:

• รีเซ็ตการจำลองของคุณระหว่างการทดสอบเพื่อให้แน่ใจว่ามีการทดสอบที่เป็นอิสระโดยใช้ beforeEach และ afterEach
• อย่าจำลองมากเกินไป - จำลองเฉพาะฟังก์ชันและโมดูลที่โค้ดของคุณใช้งานจริง
• ทดสอบกรณีความล้มเหลวด้วย โดยการจำลองข้อผิดพลาดและการตอบสนองที่ไม่คาดคิด
• พิจารณาสร้างการติดตั้งค่าจำลองที่นำกลับมาใช้ใหม่ได้สำหรับการตอบสนอง API ทั่วไป

จำลอง API ด้วย Apidog

หากคุณต้องการลองประสบการณ์การพัฒนา API ที่แตกต่างกัน คุณสามารถพิจารณาใช้ Apidog ได้!

Apidog เป็นแพลตฟอร์ม API แบบ low-code ที่ช่วยให้นักพัฒนาได้รับอินเทอร์เฟซผู้ใช้ที่เรียบง่ายและใช้งานง่ายสำหรับการพัฒนา API ด้วย Apidog คุณสามารถสร้าง ทดสอบ จำลอง และจัดทำเอกสาร API มาดู Apidog ให้ละเอียดยิ่งขึ้น!

Apidog Smart Mock

ให้ Apidog สร้างข้อมูลจำลองที่สมจริงโดยอัตโนมัติโดยไม่ต้องมีการกำหนดค่าด้วยตนเอง หากคุณไม่มีกฎการจำลองที่แน่นอน

Apidog Advanced Mock

แก้ไขการตอบสนอง API ด้วยสคริปต์แบบกำหนดเองเพื่อจำลองการโต้ตอบในชีวิตจริงระหว่างฝั่งไคลเอนต์และเซิร์ฟเวอร์

Apidog Cloud Mock

ทำงานร่วมกับทีมของคุณด้วยคุณสมบัติ cloud mock ผ่านที่อยู่คงที่ ซึ่งสามารถเข้าถึงได้บนเซิร์ฟเวอร์ cloud mock

บทสรุป

การจำลองเป็นทักษะพื้นฐานสำหรับการเขียนการทดสอบที่ดี โดยเฉพาะอย่างยิ่งเมื่อต้องรับมือกับ dependencies ภายนอก เช่น การเรียก API Jest มีหลายวิธีในการจำลองการเรียก API ในการทดสอบของคุณ ตั้งแต่การจำลองโมดูลทั้งหมดด้วย jest.mock() ไปจนถึงการจำลองโมดูลด้วยตนเอง ไปจนถึงการใช้ไลบรารีเช่น axios-mock-adapter สำหรับกรณีขั้นสูงมากขึ้น สิ่งสำคัญคือการเลือกแนวทางที่เหมาะสมกับความต้องการของคุณ ในขณะที่ทำให้การทดสอบของคุณเป็นอิสระและเน้นที่โค้ดที่กำลังทดสอบ ไม่ใช่รายละเอียดการใช้งานของ API ด้วยเทคนิคการจำลองเหล่านี้ในชุดเครื่องมือของคุณ คุณสามารถเขียนการทดสอบที่ยืดหยุ่นสำหรับโค้ดที่ขึ้นอยู่กับ API ได้