0Pricing
Frontend Academy · Aula

@testing-library/vue: montagem de componentes

Monte componentes Vue com @testing-library/vue, forneça props e plugins globais, simule eventos do usuário e faça asserções sobre o template renderizado.

@testing-library/vue: montagem de componentes é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

Testing Library para Vue

@testing-library/vue fornece a mesma abordagem de testes centrada no usuário para componentes do Vue 3. A API espelha a versão para React: render(), consultas de screen, userEvent e verificadores do jest-dom.

Instalação

Instale os pacotes do 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 um componente do Vue. Use o objeto de opções para passar propriedades, plugins globais e opções de configuração.

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();
});

Passando propriedades

Passe propriedades no objeto de opções. O TypeScript verificará os tipos das propriedades se você usar defineProps().

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

Fornecendo plugins globais

Passe a configuração global (plugins, componentes e valores fornecidos) na opção global.

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

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

Auxiliar reutilizável renderWithPlugins

Crie um invólucro de renderização personalizado que inclua todos os plugins necessários para os testes, evitando repetir a configuração em cada teste.

// 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
  });
}

Testando eventos

Use userEvent para interagir com o componente e, em seguida, faça asserções sobre o que o usuário vê ou sobre a ocorrência de 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' }]);
});

Testando slots

Passe o conteúdo do slot como uma string ou um componente nas opções de renderização.

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

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

Testando o comportamento de v-model

Preencha os campos de entrada com userEvent e verifique se os eventos emitidos ou o resultado exibido correspondem ao estado atualizado esperado.

Testando repositórios do Pinia

Crie uma nova instância do Pinia para cada teste. Modifique diretamente o estado do repositório durante a configuração e, em seguida, faça asserções sobre o 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();

Encontrando elementos após atualizações assíncronas

O Vue atualiza o DOM de forma assíncrona. Use await nextTick() ou consultas findBy* depois de acionar um evento que provoque alterações assíncronas no estado.

import { nextTick } from 'vue';

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

Verificação rápida

Como você passa o Pinia ou o Vue Router a um componente que está sendo testado com @testing-library/vue?

Recapitulação: @testing-library/vue

render(Component, options) monta componentes do Vue. Passe propriedades em options.props. Forneça plugins em global.plugins. Use emitted() para verificar eventos personalizados. Passe slots em options.slots. Use await nextTick() para atualizações assíncronas do Vue. Crie um invólucro renderWithSetup() personalizado para a configuração compartilhada de plugins.

Perguntas Frequentes

A aula “@testing-library/vue: montagem de componentes” é grátis?

Sim — o texto completo de “@testing-library/vue: montagem de componentes” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “@testing-library/vue: montagem de componentes”?

Monte componentes Vue com @testing-library/vue, forneça props e plugins globais, simule eventos do usuário e faça asserções sobre o template renderizado. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “@testing-library/vue: montagem de componentes”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Configuração do Jest e testes básicos
  2. @testing-library/react: render userEvent
  3. @testing-library/vue: montagem de componentes
  4. Simulação de módulos e chamadas de API
← Voltar para Frontend Academy