Implementar Vitest en un entorno de React con Vite para realizar test unitarios

Tiempo de lectura: 2 minutos

Hoy vamos a aprender cómo podemos instalar Vitest en un entorno de React con Vite.

Lo primero que haremos es instalar Vitest:

npm install -D vitest 

Después instalaremos las librerías necesarias:

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

Ahora vamos a crear la estructura de carpetas para los tests, fuera de nuestra carpeta src:

tests
-----unit
---------components

Y dentro de componentes vamos a crear un componente de ejemplo para testear que llamaremos Button.tsx:

import React, { ReactNode, MouseEventHandler } from 'react';

interface ButtonProps {
  onClick: MouseEventHandler<HTMLButtonElement>;
  children: ReactNode;
}

function Button({ onClick, children }: ButtonProps) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

export default Button;

Ahora vamos a crear la prueba asociada, dentro de tests/components/ creamos

Boton.test.tsx

import { test, expect } from 'vitest';
import React from 'react';
import Button from './Button';

test('Button renders correctly', () => {
  const button = <Button onClick={() => {}}>Click me</Button>;
  expect(button).not.toBeNull();
});

test('Button onClick event works', () => {
  let clicked = false;
  const onClickMock = () => { clicked = true; };
  const button = <Button onClick={onClickMock}>Click me</Button>;
  button.props.onClick(); // Simulate click event
  expect(clicked).toBe(true);
});

Y ahora para ejecutar los tests vamos a añadir dentro de package.json el siguiente script:

    "test": "vitest run --coverage"

Si lo queremos sin que genere el coverage tendremos que poner solo:

    "test": "vitest run"

Para implementar test que comprueben que nuestro componente se está renderizando dentro del document, tenemos que instalar lo siguiente:

La librería de testing-library de react.

 npm install --save-dev @testing-library/react  

Configuración para Vitest

 npm install --save-dev @vitest/config  

Ahora creamos un archivo llamado vitest.config.ts o vitest.config.js (si no usamos TypeScript)

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    environment: 'jsdom', // Set the test environment to jsdom
  },
});

Ahora debemos importar al principio de nuestros archivos:

import '@testing-library/jest-dom/vitest';

Y ahora el codigo quedaria asi:

import '@testing-library/jest-dom/vitest';
import { expect, test,afterEach  } from 'vitest';
import React from 'react';
import Button from './Button';
import { render,cleanup } from '@testing-library/react';

// Limpia los componentes después de cada prueba
afterEach(cleanup);

test('Button renders correctly', () => {
  const button = <Button onClick={() => {}}>Click me</Button>;
  expect(button).not.toBeNull();
});

test('Button renders 2 correctly', () => {
  const { getByText } = render(<Button onClick={() => {}}>Click me</Button>);
  const buttonElement = getByText('Click me');
  expect(buttonElement).toBeInTheDocument();
});

test('Button onClick event works', () => {
  let clicked = false;
  const onClickMock = () => { clicked = true; };
  const button = <Button onClick={onClickMock}>Click me</Button>;
  button.props.onClick(); // Simulate click event
  expect(clicked).toBe(true);
});

Extra, añadir coverage a sonarqube.

Para establecer el coverage tenemos que crear el formato lcov.info.

Para ello tneemos que ir a vitest.config.ts

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    environment: 'jsdom', // Set the test environment to jsdom
    coverage: {
      reporter: ['text', 'lcov']
    }
  },
});

Y ahora generará el archivo correspondiente cuando ejecutemos los tests:

npm test

Dentro de coverage estará este archivo:

Y ahora dentro de sonar-project.properties

sonar.javascript.lcov.reportPaths=coverage/lcov.info