0Pricing
Frontend Academy · Pelajaran

@testing-library/vue: memasang komponen

Pasang komponen Vue dengan @testing-library/vue, berikan props dan plugin global, simulasikan event pengguna, lalu lakukan assertion terhadap template yang dirender.

@testing-library/vue: memasang komponen adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Testing Library untuk Vue

@testing-library/vue menyediakan pendekatan pengujian yang berpusat pada pengguna untuk komponen Vue 3. API-nya mencerminkan versi React: render(), kueri screen, userEvent, dan pencocok jest-dom.

Memasang

Pasang paket Testing Library untuk 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() untuk Vue

render(Component, options) memasang komponen Vue. Gunakan objek options untuk meneruskan props, plugin global, dan opsi penyiapan.

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

Meneruskan Props

Teruskan props dalam objek options. TypeScript akan memeriksa tipe props jika Anda menggunakan defineProps<T>().

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

Menyediakan Plugin Global

Teruskan konfigurasi global (plugin, komponen, nilai provide) dalam opsi global.

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

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

Helper renderWithPlugins yang Dapat Digunakan Ulang

Buat pembungkus render khusus yang menyertakan semua plugin yang diperlukan untuk pengujian agar Anda tidak perlu mengulangi penyiapan dalam setiap pengujian.

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

Menguji Peristiwa

Gunakan userEvent untuk berinteraksi dengan komponen, lalu verifikasi apa yang dilihat pengguna atau apakah peristiwa yang dipancarkan telah terjadi.

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

Menguji Slot

Teruskan isi slot sebagai string atau komponen dalam opsi render.

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

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

Menguji Perilaku v-model

Isi input dengan userEvent, lalu verifikasi bahwa peristiwa yang dipancarkan atau output yang ditampilkan sesuai dengan status terbaru yang diharapkan.

Menguji Store Pinia

Buat instans Pinia baru untuk setiap pengujian. Ubah status store secara langsung untuk penyiapan, lalu verifikasi output yang dirender.

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

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

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

Menemukan Elemen Setelah Pembaruan Asinkron

Vue memperbarui DOM secara asinkron. Gunakan await nextTick() atau kueri findBy* setelah memicu peristiwa yang menyebabkan perubahan status asinkron.

import { nextTick } from 'vue';

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

Pemeriksaan Singkat

Bagaimana cara meneruskan Pinia atau Vue Router ke komponen yang sedang diuji dengan @testing-library/vue?

Rangkuman: @testing-library/vue

render(Component, options) memasang komponen Vue. Teruskan props dalam options.props. Sediakan plugin dalam global.plugins. Gunakan emitted() untuk memeriksa peristiwa khusus. Teruskan slot dalam options.slots. Gunakan await nextTick() untuk pembaruan asinkron Vue. Buat pembungkus renderWithSetup() khusus untuk penyiapan plugin bersama.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “@testing-library/vue: memasang komponen” gratis?

Ya — teks lengkap “@testing-library/vue: memasang komponen” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “@testing-library/vue: memasang komponen”?

Pasang komponen Vue dengan @testing-library/vue, berikan props dan plugin global, simulasikan event pengguna, lalu lakukan assertion terhadap template yang dirender. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “@testing-library/vue: memasang komponen” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Penyiapan Jest dan Test Dasar
  2. @testing-library/react: render, userEvent
  3. @testing-library/vue: memasang komponen
  4. Mocking Modul dan Pemanggilan API
← Kembali ke Frontend Academy