4.3 Testing de Code Apps con Vitest y React Testing Library

Uno de los aspectos más potentes del stack de Code Apps es que al ser React + TypeScript, tienes acceso completo al ecosistema de testing de JavaScript. Puedes escribir tests unitarios reales que verifiquen la lógica de tus componentes y servicios. Aquí vemos cómo hacerlo.

Objetivos de aprendizaje

• Configurar Vitest para tests en proyectos de Code Apps
• Escribir tests unitarios para componentes React
• Mockear el SDK de Dataverse en los tests
• Integrar los tests en el workflow de CI/CD

Por qué el testing es diferente aquí

Uno de los problemas históricos de las Canvas Apps es que no tienen una forma estándar de hacer testing automatizado. Puedes usar herramientas como Test Studio, pero tiene limitaciones significativas y no es lo mismo que el testing de software tradicional.

Con Code Apps, estás en territorio familiar: React + TypeScript + Vite. Puedes usar Vitest (el framework de tests de Vite), React Testing Library y Jest. Cualquier desarrollador de React ya conoce estas herramientas.

Configuración de Vitest

Primero, añadimos las dependencias de testing:

npm install --save-dev vitest @testing-library/react @testing-library/jest-dom jsdom

Luego, actualizamos vite.config.ts para configurar Vitest:

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./src/test/setup.ts'],
  },
});

Y creamos el archivo de setup:

// src/test/setup.ts
import '@testing-library/jest-dom';

Mockeando el SDK de Dataverse

Para los tests, no queremos hacer llamadas reales a Dataverse. Usamos el sistema de mocking de Vitest:

// src/components/__tests__/IncidenciasList.test.tsx
import { render, screen, waitFor } from '@testing-library/react';
import { vi } from 'vitest';
import { IncidenciasList } from '../IncidenciasList';
import { CrEstado } from '../../generated/enums/CrEstado';
import { CrPrioridad } from '../../generated/enums/CrPrioridad';

// Mock del servicio de Dataverse
vi.mock('../../generated', () => ({
  CrIncidenciaService: {
    getAll: vi.fn(),
  },
}));

import { CrIncidenciaService } from '../../generated';

describe('IncidenciasList', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('muestra el listado de incidencias correctamente', async () => {
    // Configuramos el mock para devolver datos de prueba
    vi.mocked(CrIncidenciaService.getAll).mockResolvedValue([
      {
        cr_incidenciaid: '1',
        cr_titulo: 'El servidor no responde',
        cr_estado: CrEstado.Abierta,
        cr_prioridad: CrPrioridad.Alta,
        cr_solicitante: 'Juan García',
      },
    ]);

    render(
      <IncidenciasList
        onNewIncidencia={vi.fn()}
        onSelectIncidencia={vi.fn()}
      />
    );

    // Durante la carga, mostramos el spinner
    expect(screen.getByText('Cargando incidencias...')).toBeInTheDocument();

    // Esperamos a que los datos se carguen
    await waitFor(() => {
      expect(screen.getByText('El servidor no responde')).toBeInTheDocument();
    });

    expect(screen.getByText('Juan García')).toBeInTheDocument();
    expect(screen.getByText('Abierta')).toBeInTheDocument();
  });

  it('muestra un mensaje de error si la carga falla', async () => {
    vi.mocked(CrIncidenciaService.getAll).mockRejectedValue(new Error('API Error'));

    render(
      <IncidenciasList
        onNewIncidencia={vi.fn()}
        onSelectIncidencia={vi.fn()}
      />
    );

    await waitFor(() => {
      expect(screen.getByText(/No se pudieron cargar/)).toBeInTheDocument();
    });
  });
});

Ejecutar los tests

# Ejecutar tests una vez
npx vitest run

# Ejecutar tests en modo watch (se re-ejecutan al cambiar código)
npx vitest

# Ejecutar tests con cobertura de código
npx vitest run --coverage

Puntos clave

• Las Code Apps permiten usar el ecosistema completo de testing de JavaScript (Vitest, React Testing Library)
• El SDK de Dataverse se mockea con vi.mock() de Vitest para tests sin dependencias externas
• Siempre prueba los estados de carga y error, no solo el happy path
• Los tests deben ejecutarse en cada pull request como parte del pipeline de CI/CD