0Pricing
Frontend Academy · Ders

@testing-library/vue: bileşenleri bağlama

Vue bileşenlerini @testing-library/vue ile bağlayın, props'ları ve genel eklentileri sağlayın, kullanıcı olaylarını benzetin ve oluşturulan template'i doğrulayın.

@testing-library/vue: bileşenleri bağlama, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Vue için Testing Library

@testing-library/vue, Vue 3 bileşenleri için kullanıcı odaklı aynı test yaklaşımını sağlar. API, React sürümünü yansıtır: render(), screen sorguları, userEvent ve jest-dom eşleştiricileri.

Kurulum

Vue için test kitaplığı paketlerini kurun.

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

Vue için render()

render(Component, options), bir Vue bileşenini bağlar. Özellikleri, global eklentileri ve kurulum seçeneklerini geçirmek için options nesnesini kullanı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();
});

Özellikleri Geçirme

Özellikleri options nesnesinde geçirin. defineProps<T>() kullanırsanız TypeScript, özellik türlerini denetler.

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

Global Eklentileri Sağlama

Global yapılandırmayı (eklentiler, bileşenler ve sağlanan değerler) global seçeneğinde geçirin.

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

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

Yeniden Kullanılabilir renderWithPlugins Yardımcısı

Her testte kurulumu tekrarlamamak için test için gereken tüm eklentileri içeren özel bir oluşturma sarmalayıcısı oluşturun.

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

Olayları Test Etme

Bileşenle etkileşim kurmak için userEvent kullanın, ardından kullanıcının gördüklerini veya yayılan olayların gerçekleştiğini doğrulayın.

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' }]);
});

Slotları Test Etme

Slot içeriğini render seçeneklerinde dize veya bileşen olarak geçirin.

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

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

v-model Davranışını Test Etme

Girdileri userEvent ile doldurun ve yayılan olayların veya görüntülenen çıktının beklenen güncellenmiş durumla eşleştiğini doğrulayın.

Pinia Depolarını Test Etme

Her test için yeni bir Pinia örneği oluşturun. Kurulum için depo durumunu doğrudan değiştirin, ardından oluşturulan çıktıyı doğrulayın.

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

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

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

Eş Zamanlı Güncellemelerden Sonra Öğeleri Bulma

Vue, DOM'u eş zamanlı olarak günceller. Eş zamanlı durum değişikliklerine neden olan bir olayı tetikledikten sonra await nextTick() veya findBy* sorgularını kullanın.

import { nextTick } from 'vue';

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

Hızlı Kontrol

@testing-library/vue ile test edilen bir bileşene Pinia'yı veya Vue Router'ı nasıl geçirirsiniz?

Özet: @testing-library/vue

render(Component, options), Vue bileşenlerini bağlar. Özellikleri options.props içinde geçirin. Eklentileri global.plugins içinde sağlayın. Özel olayları denetlemek için emitted() kullanın. Slotları options.slots içinde geçirin. Vue'nun eş zamanlı güncellemeleri için await nextTick() kullanın. Paylaşılan eklenti kurulumu için özel bir renderWithSetup() sarmalayıcısı oluşturun.

Sıkça Sorulan Sorular

“@testing-library/vue: bileşenleri bağlama” dersi ücretsiz mi?

Evet — “@testing-library/vue: bileşenleri bağlama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“@testing-library/vue: bileşenleri bağlama” dersinde ne öğreneceğim?

Vue bileşenlerini @testing-library/vue ile bağlayın, props'ları ve genel eklentileri sağlayın, kullanıcı olaylarını benzetin ve oluşturulan template'i doğrulayın. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“@testing-library/vue: bileşenleri bağlama” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Jest Kurulumu ve Temel Testler
  2. @testing-library/react: render userEvent
  3. @testing-library/vue: bileşenleri bağlama
  4. Modülleri ve API Çağrılarını Taklit Etme
← Frontend Academy Sayfasına Dön