0Pricing
Frontend Academy · Lección

@testing-library/vue: montar componentes

Monte componentes de Vue con @testing-library/vue, proporcione props y plugins globales, simule eventos del usuario y compruebe el template renderizado.

@testing-library/vue: montar componentes es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

Testing Library para Vue

@testing-library/vue proporciona el mismo enfoque de pruebas centrado en el usuario para componentes de Vue 3. La API refleja la versión para React: render(), consultas de screen, userEvent y matchers de jest-dom.

Instalación

Instale los paquetes de Testing Library para Vue.

npm install -D @testing-library/vue @testing-library/user-event @testing-library/jest-dom
# Also install vitest for a Vite project:
npm install -D vitest jsdom

render() para Vue

render(Component, options) monta un componente de Vue. Utilice el objeto de opciones para pasar props, plugins globales y opciones de configuración.

import { render, screen } from '@testing-library/vue';
import Button from './Button.vue';

test('renders button label', () => {
  render(Button, { props: { label: 'Submit' } });
  expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
});

Pasar props

Pase las props en el objeto de opciones. TypeScript comprobará los tipos de las props si utiliza defineProps<T>().

render(UserCard, {
  props: {
    user: { id: 1, name: 'Alice', email: 'alice@example.com' }
  }
});

Proporcionar plugins globales

Pase la configuración global (plugins, componentes y valores proporcionados) en la opción global.

import { createPinia } from 'pinia';
import router from './router';

render(App, {
  global: {
    plugins: [createPinia(), router],
    provide: { theme: 'dark' }
  }
});

Helper reutilizable renderWithPlugins

Cree un wrapper de renderizado personalizado que incluya todos los plugins necesarios para las pruebas y evite repetir la configuración en cada prueba.

// test-utils.ts
import { render } from '@testing-library/vue';
import { createPinia } from 'pinia';

export function renderWithSetup(component: any, options = {}) {
  return render(component, {
    global: { plugins: [createPinia()] },
    ...options
  });
}

Probar eventos

Utilice userEvent para interactuar con el componente y, después, compruebe lo que ve el usuario o que se hayan producido los eventos emitidos.

import userEvent from '@testing-library/user-event';

test('emits submit on form submit', async () => {
  const user = userEvent.setup();
  const { emitted } = render(LoginForm);

  await user.type(screen.getByLabelText('Email'), 'alice@example.com');
  await user.click(screen.getByRole('button', { name: /login/i }));

  expect(emitted().submit[0]).toEqual([{ email: 'alice@example.com' }]);
});

Probar slots

Pase el contenido del slot como una cadena o un componente en las opciones de render.

render(Card, {
  slots: {
    default: '<p>Card body content</p>',
    header: '<h2>My Card Title</h2>'
  }
});

expect(screen.getByText('Card body content')).toBeInTheDocument();

Probar el comportamiento de v-model

Rellene los inputs con userEvent y compruebe que los eventos emitidos o el resultado mostrado coincidan con el estado actualizado esperado.

Probar stores de Pinia

Cree una instancia nueva de Pinia para cada prueba. Modifique directamente el estado del store durante la preparación y, después, compruebe el resultado renderizado.

const pinia = createPinia();
render(Counter, { global: { plugins: [pinia] } });

const store = useCounterStore();
store.count = 5; // set initial state
await nextTick();

expect(screen.getByText('5')).toBeInTheDocument();

Encontrar elementos después de actualizaciones asíncronas

Vue actualiza el DOM de forma asíncrona. Utilice await nextTick() o consultas findBy* después de activar un evento que provoque cambios de estado asíncronos.

import { nextTick } from 'vue';

await user.click(button);
await nextTick();
expect(screen.getByText('Updated!')).toBeInTheDocument();

Comprobación rápida

¿Cómo se pasan Pinia o Vue Router a un componente que se está probando con @testing-library/vue?

Resumen: @testing-library/vue

render(Component, options) monta componentes de Vue. Pase las props en options.props. Proporcione los plugins en global.plugins. Utilice emitted() para comprobar eventos personalizados. Pase los slots en options.slots. Utilice await nextTick() para las actualizaciones asíncronas de Vue. Cree un wrapper personalizado renderWithSetup() para compartir la configuración de plugins.

Preguntas frecuentes

¿La lección «@testing-library/vue: montar componentes» es gratis?

Sí — el texto completo de «@testing-library/vue: montar componentes» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «@testing-library/vue: montar componentes»?

Monte componentes de Vue con @testing-library/vue, proporcione props y plugins globales, simule eventos del usuario y compruebe el template renderizado. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «@testing-library/vue: montar componentes»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Configuración de Jest y pruebas básicas
  2. @testing-library/react: render userEvent
  3. @testing-library/vue: montar componentes
  4. Simular módulos y llamadas a API
← Volver a Frontend Academy