Testing Unitario con Vite y React

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

¿Cuál es el comando correcto para instalar las dependencias necesarias para las pruebas unitarias?

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

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

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

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

¿Qué opción se debe incluir en el archivo vite.config.js para establecer el entorno de prueba?

environment: 'node'

environment: 'jsdom' (correct)

environment: 'react'

environment: 'dom'

¿Qué archivo opcional se debe crear para la configuración de pruebas?

src/testConfig.js

src/configTests.js

src/initTests.js

src/setupTests.js (correct)

¿Qué biblioteca se utiliza para realizar las aserciones en las pruebas?

@testing-library/jest-dom Signup and view all the answers

¿Dónde se recomienda crear la carpeta para las pruebas unitarias?

Cerca del componente que se quiere probar Signup and view all the answers

¿Cuál de las siguientes opciones no es un comando válido para ejecutar pruebas con Vitest?

npm run vitest Signup and view all the answers

¿Qué debe asegurarse al importar componentes en las pruebas?

Que la ruta de importación sea correcta Signup and view all the answers

¿Qué línea de código es necesaria para renderizar un componente dentro de una prueba?

render(<HelloWorld />) Signup and view all the answers

¿Por qué es necesario envolver el componente Navbar con BrowserRouter?

Porque NavLink requiere un contexto de enrutamiento. Signup and view all the answers

¿Qué función cumple 'describe' en los tests?

Agrupar varias pruebas relacionadas. Signup and view all the answers

¿Qué comproba el segundo test sobre los enlaces de navegación?

Que cada enlace muestra el texto correcto. Signup and view all the answers

¿Cuál es el propósito de 'screen.getByLabelText' en los tests?

Obtener elementos que tienen un atributo aria-label especificado. Signup and view all the answers

¿Cómo se verifica que un elemento está presente en el DOM?

Usando expect(...).toBeInTheDocument() Signup and view all the answers

¿Qué clase se espera que no tenga el enlace de 'Home' cuando no está activo?

text-primary-foreground Signup and view all the answers

¿Qué verificación se realiza en el tercer test?

Que el enlace activo aplica la clase de estilo correcta. Signup and view all the answers

¿Qué se espera verificar con el uso de 'expect(...).not.toHaveClass()'?

Que un elemento no contenga una clase específica. Signup and view all the answers

Study Notes

Instalación de dependencias para pruebas

Instalar herramientas necesarias con npm:
- npm install --save-dev vitest @testing-library/react @testing-library/jest-dom
- npm install -D jsdom

Configuración de Vite

Modificar el archivo vite.config.js para incluir configuraciones de pruebas:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { configDefaults } from 'vitest/config'

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.js',  // Archivo de configuración opcional
    exclude: [...configDefaults.exclude, 'e2e/*'],
  },
})

Inicialización opcional

Crear un archivo de inicialización src/setupTests.js e importar:
- import '@testing-library/jest-dom'

Estructura de pruebas

Crear una carpeta __tests__ o un archivo de pruebas junto al componente:

Ejemplo básico de prueba para HelloWorld:

import { render, screen } from '@testing-library/react'
import HelloWorld from './HelloWorld'

test('renders HelloWorld component', () => {
  render(<HelloWorld />)
  const linkElement = screen.getByText(/hello world/i)
  expect(linkElement).toBeInTheDocument()
})

Scripts de ejecución

Agregar scripts en package.json para facilitar la ejecución de pruebas:
```
"scripts": {
  "test": "vitest",
  "test:watch": "vitest --watch"
}
```

Importación de dependencias

Asegurarse de que las rutas de importación son correctas para componentes:

Importación necesaria:

import React from 'react'
import { render, screen } from '@testing-library/react'
import { BrowserRouter } from 'react-router-dom'
import Navbar from './Navbar'

Usar describe para agrupar pruebas relacionadas:

describe('Navbar', () => {
  it('renders all navigation links', () => {
    render(
      <BrowserRouter>
        <Navbar />
      </BrowserRouter>
    );

    expect(screen.getByLabelText(/Home/i)).toBeInTheDocument();
    expect(screen.getByLabelText(/Account/i)).toBeInTheDocument();
    expect(screen.getByLabelText(/Chatbot/i)).toBeInTheDocument();
  });
});

Explicación de pruebas

render: Renderiza el componente Navbar dentro de BrowserRouter.
screen.getByLabelText: Busca elementos en el DOM usando atributos aria-label.
expect(...).toBeInTheDocument(): Verifica que los elementos esperados estén presentes en el DOM.

Segundo test - Texto de enlaces

Prueba para verificar el texto correcto en cada enlace:

it('displays the correct text for each link', () => {
  render(
    <BrowserRouter>
      <Navbar />
    </BrowserRouter>
  );

  expect(screen.getByText(/Home/i)).toBeInTheDocument();
  expect(screen.getByText(/Account/i)).toBeInTheDocument();
  expect(screen.getByText(/Chatbot/i)).toBeInTheDocument();
});

Tercer test - Estilos de enlace activo

Verifica si el enlace "Home" aplica el estilo correcto:

it('applies the correct styles when a link is active', () => {
  render(
    <BrowserRouter>
      <Navbar />
    </BrowserRouter>
  );

  const homeLink = screen.getByLabelText(/Home/i);
  expect(homeLink).not.toHaveClass('text-primary-foreground');
});

Resumen de pruebas

Primer test: Asegura que todos los enlaces de navegación se renderizan.
Segundo test: Verifica que el texto en cada enlace sea el esperado.
Tercer test: Comprueba que el enlace activo tenga la clase de estilo correcta.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

Este cuestionario cubre los conceptos básicos necesarios para realizar pruebas unitarias en aplicaciones de Vite y React. Aprenderás sobre la instalación de las bibliotecas requeridas y la configuración del archivo vite.config.js para utilizar Vitest. Ideal para desarrolladores que buscan mejorar sus habilidades en pruebas de software.