Configurando vitest, react testing library y jest-dom en tu proyecto con Vite

Vamos a ver de forma rápida y concisa como configurar vite con todo lo necesario para hacer testing en react

Creando un proyecto con vite

vamos a crear un proyecto para este ejemplo (si tú tienes un proyecto creado puedes saltarte este paso)

npm create vite@latest

Luego de ejecutar este comando, seleccionaremos react dentro de las opciones que nos brinda el CLI, luego agregaremos un nombre al proyecto (puedes elegir cualquier nombre, e.j. testing-vite)

una vez creado el proyecto

Vamos a instalar Vitest

npm install --save-dev vitest

también necesitaremos simular el DOM de nuestra aplicación front end (nosotros usaremos happy-dom) (vitest doc)

npm i -D happy-dom
# o bien
npm i -D jsdom

Una vez instalado vamos a configurar nuestro entorno de test dentro del vite.config

/** Si estas usando TS no olvides agregar esta linea */
/// <reference types="vitest" /> 
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    include: ['src/**/*.{test,spec}.{js,ts,jsx,tsx}'],
    environment: 'happy-dom'
  }
});

• Nota: a diferencia de JEST con VITEST no tenemos activado los globals por defecto, esto significa que necesitaremos importar dentro de nuestros test las funcionalidades tales como: describe, test, expect, etc.

import { describe, test, expect } from 'vitest';

pero si tú prefieres activar los globals para que la experiencia sea lo más similar a Jest puedes configurarlo de esta manera:

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    include: ['src/**/*.{test,spec}.{js,ts,jsx,tsx}'],
    globals: true,
    environment: 'happy-dom'
  }
});

si estás utilizando typescript en tu proyecto vas a tener que realizar este paso, agregando vitest/globals al compilerOptions dentro del archivo tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "types": ["vitest/globals"]
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

y para finalizar la configuración de vitest vamos a agregar el comando que nos permitirá ejecutar nuestros test dentro del runner

{
    "scripts": {
        "dev": "vite",
        "build": "tsc && vite build",
        "preview": "vite preview",
        "test": "vitest"
  },
}

Instalar React Testing Library

Testing library nos brindará un montón de utilidades que nos permitirán hacer nuestros test de una forma más rápida y sencilla.

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

Instalar jest-dom

jest-dom nos brinda una serie de custom matchers para probar los estados en el DOM los cuales extienden a JEST

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

luego para utilizarlo en nuestros test solamente debemos importarlo dentro de nuestros test

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

pero si al igual que los globals queremos mejorar nuestra experiencia de desarrollo, podemos agregar un archivo de configuración para utilizar jest-dom de forma global

agreguemos un nuevo archivo:

// setup.ts/js
// este archivo puede ser creado dentro de la carpeta tests 
// o bien dentro de src
import { expect } from 'vitest';
import matchers from '@testing-library/jest-dom/matchers';

expect.extend(matchers);

luego indicaremos a vitest que tome la configuración de este archivo

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    include: ['src/**/*.{test,spec}.{js,ts,jsx,tsx}'],
    globals: true,
    environment: 'happy-dom',
    setupFiles: './src/tests/setup.ts'
  }
});

de esta manera no necesitaremos importar de forma manual jest-dom dentro de cada test.

ahora sí estamos listos para iniciar a hacer nuestros test 🥳

puedes agregar un archivo de test para probar si todo está funcionando correctamente

// App.test.tsx/jsx
import { it, expect } from 'vitest';
import { fireEvent, render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import App from './App';

it('feature tour', async () => {
  render(<App />);

  screen.getByRole('heading', {
    name: /vite \+ react/i
  });

  const counterButton = screen.getByRole('button', {
    name: /count is 0/i
  });

  expect(counterButton).toBeInTheDocument();
  expect(counterButton).toHaveTextContent('count is 0');

  fireEvent.click(counterButton);
  screen.getByText('count is 1');
});

luego ejecutamos el comando

npm run test

Espero que este post haya sido de ayuda 🙂