Menguasai Panggilan Mock API dengan Jest: Tutorial Komprehensif

Mengejek panggilan API dengan Jest adalah penting untuk menulis ujian yang cekap, pantas dan boleh dipercayai. Tutorial ini akan membimbing anda melalui teknik penting untuk mengawal respons yang dipermainkan menggunakan perpustakaan dan penyesuai Jest yang luas untuk senario lanjutan.

Apabila menulis ujian untuk kod yang membuat panggilan API, adalah penting untuk mengejek panggilan tersebut. Strategi ini memastikan ujian anda boleh dipercayai, pantas dan bebas daripada perkhidmatan luaran. Jest, rangka kerja ujian JavaScript yang popular, menawarkan beberapa kaedah untuk mengejek panggilan API dengan mudah. Mari terokai pelbagai pendekatan yang boleh anda gunakan.

Menggunakan jest.mock()

Satu cara mudah untuk mengejek panggilan API dalam Jest ialah menggunakan fungsi jest.mock() untuk mengejek keseluruhan modul yang membuat permintaan API. Berikut ialah contoh:

// 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);
});

Dalam contoh ini, kami menggunakan jest.mock('axios') untuk mengejek keseluruhan modul axios secara automatik. Kami kemudian menggunakan axios.get.mockResolvedValueOnce() untuk mengejek respons bagi panggilan axios.get seterusnya. Ujian kami mengesahkan bahawa API telah dipanggil dengan betul dan mengembalikan data yang dipermainkan.

Menggunakan Olok-olok Manual

Pendekatan lain ialah dengan mengejek modul yang membuat panggilan API secara manual dengan mencipta folder __mocks__ dan meletakkan fail pelaksanaan olok-olok di dalam:

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

Kini dalam ujian anda, anda boleh mengejek respons yang berbeza untuk setiap ujian:

// 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);
});

Dengan mock manual ini, anda mempunyai kawalan penuh dan boleh mengejek kaedah Axios yang berbeza, seperti get dan post, dengan pelaksanaan anda sendiri.

Menggunakan axios-mock-adapter

Untuk mengejek permintaan Axios yang lebih maju, anda boleh menggunakan pustaka penyesuai axios-mock-adapter. Mula-mula, pasang:

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

Kemudian dalam ujian anda:

// 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);  
  });
});

Dengan axios-mock-adapter, anda boleh mengejek permintaan berdasarkan URL, parameter, pengepala dan banyak lagi. Anda juga boleh mensimulasikan ralat dan tamat masa.

Menyuntik Instance Axios yang Diejek

Jika kod anda menggunakan axios secara langsung, pilihan lain ialah menyuntik tika axios yang dipermainkan ke dalam kod anda semasa ujian:

// 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);
});

Di sini, kami mengejek axios itu sendiri, bukan keseluruhan modul, dan menyediakan fungsi mendapatkan olok-olok kami sendiri.

Petua untuk Mengejek Panggilan API

Berikut ialah beberapa petua yang perlu diingat apabila mengejek panggilan API dalam Jest:

1. Tetapkan Semula Olok-olok Antara Ujian: Gunakan beforeEach dan afterEach untuk memastikan ujian adalah bebas.
2. Fungsi yang Diperlukan Mengejek Sahaja: Elakkan mengejek terlalu banyak. Fokus pada fungsi dan modul yang sebenarnya digunakan oleh kod anda.
3. Kes Kegagalan Ujian: Ralat olok-olok dan respons yang tidak dijangka untuk menguji cara kod anda mengendalikan kegagalan.
4. Lekapan Mock Boleh Digunakan Semula: Cipta lekapan olok-olok boleh diguna semula untuk respons API biasa.

Olok-olok API dengan EchoAPI

EchoAPI ialah alat yang sangat baik untuk reka bentuk antara muka API, penyahpepijatan dan ujian. Ia memudahkan proses pembangunan dengan menyediakan persekitaran bersepadu di mana pembangun boleh mencipta, menguji dan mengesahkan API dengan cekap. Satu ciri utama EchoAPI ialah sokongannya untuk perkhidmatan olok-olok, membolehkan pembangun mensimulasikan respons API untuk ujian yang berkesan. Begini cara untuk menyediakan API palsu dalam EchoAPI:

1. Buat Permintaan HTTP Baharu

Tentukan URL sebagai /echoapi/login.

2. Sediakan Respons yang Dijangka

Pergi ke bahagian reka bentuk dan konfigurasikan respons yang dijangkakan.

Untuk respons yang berjaya, konfigurasikan JSON seperti berikut:

// 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);
});

Untuk respons kegagalan, konfigurasikan JSON seperti berikut:

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

3. Konfigurasikan Syarat Pencetus Olok-olok

Dalam bahagian Mock, tetapkan syarat pencetus untuk badan permintaan. Jika "e-mel"="test@echoapi.com" dan "kata laluan"="123456", pilih jawapan yang dijangkakan sebagai Kejayaan. Untuk semua syarat lain, pilih Kegagalan sebagai respons yang dijangkakan.

4. Aktifkan Mod Olok-olok

Dayakan perkhidmatan olok-olok dan tukar kepada persekitaran olok-olok sebelum menghantar permintaan API ini.

Pembangunan Frontend

Menggunakan API palsu dalam pembangunan bahagian hadapan membolehkan anda mengusahakan ciri dengan segera, tanpa menunggu bahagian belakang siap. Pendekatan pembangunan selari ini mempercepatkan proses keseluruhan.

Ujian Automatik

API olok-olok memberikan respons yang konsisten untuk ujian automatik, menjadikannya lebih mudah untuk menulis ujian yang boleh dipercayai. Alat seperti Jest dan Cypress boleh disepadukan dengan API olok-olok untuk menguji pelbagai komponen dan aliran.

Prototaip

Apabila mencipta prototaip atau bukti konsep, API olok-olok mendayakan persediaan pantas interaksi bahagian belakang yang diperlukan tanpa perlu membina perkhidmatan bahagian belakang yang sebenar.

Kesimpulan

Panggilan API mengejek ialah kemahiran asas untuk menulis ujian yang boleh dipercayai dan pantas, terutamanya apabila berurusan dengan kebergantungan luaran. Jest menawarkan pelbagai cara untuk mengejek panggilan API, daripada mengejek keseluruhan modul dengan jest.mock(), modul mengejek secara manual, kepada menggunakan perpustakaan seperti axios-mock-adapter untuk kes yang lebih lanjut. Perkara utama ialah memilih pendekatan yang betul berdasarkan keperluan anda, sambil memastikan ujian anda bebas dan fokus pada kod yang sedang diuji.

Selain itu, EchoAPI menyediakan alatan yang mantap untuk API mengejek, mempertingkatkan aliran kerja pembangunan dan ujian anda. Dengan menguasai teknik ini, anda boleh menulis ujian yang berdaya tahan dan mengekalkan interaksi API yang cekap dan berkesan.

Jadi kenapa tunggu? Mula menggunakan teknik dan alatan mengejek ini seperti EchoAPI untuk meningkatkan aliran kerja pembangunan anda hari ini!

Atas ialah kandungan terperinci Menguasai Panggilan Mock API dengan Jest: Tutorial Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!