Crear pruebas e2e de servicios REST con Axios y Vitest en React

Tiempo de lectura: 2 minutos

Vitests nos permite realizar pruebas sobre Axios y nuestras llamadas remotas REST. Hoy vamos a aprender a crear pruebas e2e con React.

Supongamos que tenemos un servicio que gestiona la creación, obtención y eliminación de artículos (ArticleService).

1. Preparación del Proyecto

Instalación de Dependencias

Primero, instala las dependencias necesarias si aún no lo has hecho:

npm install vitest axios axios-mock-adapter

2. Definición del Servicio

Crear el archivo services/articleService.ts

Define un servicio para manejar los artículos:

// services/articleService.ts

import { AxiosInstance, AxiosResponse } from 'axios';

interface Article {
  id: string;
  title: string;
  content: string;
}

export default class ArticleService {
  private axiosInstance: AxiosInstance;

  constructor(axiosInstance: AxiosInstance) {
    this.axiosInstance = axiosInstance;
  }

  // Obtener todos los artículos
  public async getArticles(): Promise<AxiosResponse<Article[]>> {
    try {
      const response: AxiosResponse<Article[]> = await this.axiosInstance.get('/articles');
      return response;
    } catch (error: any) {
      throw new Error(error.message);
    }
  }

  // Crear un nuevo artículo
  public async createArticle(article: Article): Promise<AxiosResponse<Article>> {
    try {
      const response: AxiosResponse<Article> = await this.axiosInstance.post('/articles', article);
      return response;
    } catch (error: any) {
      throw new Error(error.message);
    }
  }

  // Eliminar un artículo
  public async deleteArticle(articleId: string): Promise<AxiosResponse<void>> {
    try {
      const response: AxiosResponse<void> = await this.axiosInstance.delete(`/articles/${articleId}`);
      return response;
    } catch (error: any) {
      throw new Error(error.message);
    }
  }
}

3. Creación de Pruebas E2E

Crear el archivo de prueba ArticleService.test.ts

Ahora, crea un archivo de prueba para ArticleService:

// tests/ArticleService.test.ts

import { describe, it, expect, beforeEach } from 'vitest';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import ArticleService from '../services/articleService';

describe('ArticleService E2E tests', () => {
  let mock: MockAdapter;
  let articleService: ArticleService;

  beforeEach(() => {
    mock = new MockAdapter(axios);
    articleService = new ArticleService(axios);
  });

  it('should fetch articles correctly', async () => {
    const mockResponse = [
      { id: '1', title: 'Article 1', content: 'Content of article 1' },
      { id: '2', title: 'Article 2', content: 'Content of article 2' },
    ];

    mock.onGet('/articles').reply(200, mockResponse);

    const response = await articleService.getArticles();

    expect(response.status).toBe(200);
    expect(response.data).toEqual(mockResponse);
  });

  it('should create an article correctly', async () => {
    const newArticle = { id: '3', title: 'Article 3', content: 'Content of article 3' };

    mock.onPost('/articles').reply(201, newArticle);

    const response = await articleService.createArticle(newArticle);

    expect(response.status).toBe(201);
    expect(response.data).toEqual(newArticle);
  });

  it('should delete an article correctly', async () => {
    const articleId = '1';

    mock.onDelete(`/articles/${articleId}`).reply(204);

    const response = await articleService.deleteArticle(articleId);

    expect(response.status).toBe(204);
  });
});

4. Ejecutar las Pruebas

Ejecuta tus pruebas utilizando el comando de Vitest:

npx vitest run

Explicación del Código

• Configuración Inicial:
• MockAdapter se utiliza para interceptar y simular respuestas HTTP.
• beforeEach asegura que cada prueba tenga una configuración limpia.
• articleService se instancia con axios.
• Pruebas Individuales:
• getArticles: Simula una respuesta de la API con una lista de artículos y verifica que el método getArticles maneje correctamente la respuesta.
• createArticle: Simula la creación de un artículo y verifica que el método createArticle maneje correctamente la respuesta.
• deleteArticle: Simula la eliminación de un artículo y verifica que el método deleteArticle maneje correctamente la respuesta.