Vue Academy · Pelajaran

Mocking Composable, Store, dan API

vi.mock(), melakukan mocking pada useFetch, store Pinia, serta router dalam test.

Pelajaran 4 dari 413 langkah

Mocking Composable, Store, dan API adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 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 Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Mengapa Menggunakan Tiruan?

Pengujian unit harus mengisolasi komponen yang sedang diuji. Panggilan jaringan nyata, store nyata, dan komposabel yang berat membuat pengujian lambat serta tidak stabil. Pembuatan tiruan mengganti dependensi tersebut dengan tiruan yang dapat dikendalikan.

vi.fn: Fungsi Tiruan

vi.fn() membuat fungsi yang pelacakannya tersedia. Anda dapat memeriksa cara fungsi tersebut dipanggil dan mengendalikan nilai yang dikembalikannya. Fungsi ini merupakan dasar dari semua pembuatan tiruan.

import { vi } from "vitest"

const onSave = vi.fn()
onSave("draft")
expect(onSave).toHaveBeenCalledWith("draft")
expect(onSave).toHaveBeenCalledTimes(1)

Menetapkan Nilai Kembalian

Kendalikan keluaran tiruan dengan mockReturnValue (sinkron) atau mockResolvedValue (janji yang diselesaikan) untuk kode asinkron.

const getId = vi.fn().mockReturnValue(42)
expect(getId()).toBe(42)

const fetchUser = vi.fn().mockResolvedValue({ name: "Ada" })
// await fetchUser() => { name: "Ada" }

Membuat Tiruan Modul Komposabel

vi.mock(path) mengganti seluruh modul. Sediakan fungsi pembuat yang mengembalikan ekspor tiruan. Gunakan ini untuk mengganti komposabel dengan pengganti sementara agar komponen menerima data yang dapat diprediksi.

import { vi } from "vitest"

vi.mock("@/composables/useUser", () => ({
  useUser: () => ({
    user: { value: { name: "Ada" } },
    isLoading: { value: false },
  }),
}))

Pengangkatan vi.mock

Panggilan vi.mock diangkat ke bagian atas berkas sebelum impor dijalankan. Karena itu, fungsi pembuat tidak dapat merujuk variabel luar yang didefinisikan kemudian — deklarasikan helper apa pun di dalam fungsi pembuat atau melalui vi.hoisted.

// This runs before imports regardless of position.
vi.mock("@/api", () => ({ getPosts: vi.fn() }))

import { getPosts } from "@/api" // already the mock

Menguji Store Pinia

Komponen yang menggunakan store Pinia memerlukan store dalam pengujian. @pinia/testing menyediakan createTestingPinia, yang memberi Anda store dengan tindakan yang secara bawaan dibuat menjadi tiruan.

// terminal: npm install -D @pinia/testing
import { createTestingPinia } from "@pinia/testing"

Memasang Pinia Pengujian

Teruskan Pinia pengujian melalui opsi global plugins saat melakukan pemasangan. Anda juga dapat mengisi keadaan awal.

import { mount } from "@vue/test-utils"
import { createTestingPinia } from "@pinia/testing"

const wrapper = mount(Profile, {
  global: {
    plugins: [createTestingPinia({
      initialState: { user: { name: "Ada" } },
    })],
  },
})

Memverifikasi Tindakan Store

Secara bawaan, tindakan diganti dengan pengganti sementara (tidak dijalankan), sehingga Anda dapat memverifikasi bahwa tindakan tersebut dikirim. Ambil store dan periksa spy.

import { useUserStore } from "@/stores/user"

const store = useUserStore()
await wrapper.get("button.logout").trigger("click")
expect(store.logout).toHaveBeenCalled()

Menggunakan spy pada Pengambilan Data

Alih-alih mengganti seluruh modul, Anda dapat menggunakan spy pada objek global. vi.spyOn(global, "fetch") membungkus fetch yang sebenarnya sehingga Anda dapat mengganti perilakunya dan memeriksanya.

const spy = vi.spyOn(global, "fetch").mockResolvedValue({
  ok: true,
  json: async () => ({ items: [1, 2, 3] }),
})

Pengujian Pengambilan Data Lengkap

Buat tiruan untuk pengambilan data, picu tindakan, selesaikan semua promise, lalu verifikasi data yang ditampilkan dan bahwa fetch dipanggil dengan URL yang benar.

it("loads items", async () => {
  vi.spyOn(global, "fetch").mockResolvedValue({
    ok: true,
    json: async () => ({ items: ["a", "b"] }),
  })
  const wrapper = mount(List)
  await flushPromises()
  expect(global.fetch).toHaveBeenCalledWith("/api/items")
  expect(wrapper.findAll("li")).toHaveLength(2)
})

Mengatur Ulang Tiruan di Antara Pengujian

Tiruan yang digunakan bersama mengakumulasi riwayat pemanggilan. Atur ulang tiruan tersebut dalam beforeEach (atau aktifkan clearMocks dalam konfigurasi) agar satu pengujian tidak memengaruhi pengujian lainnya.

import { beforeEach, vi } from "vitest"

beforeEach(() => {
  vi.clearAllMocks()
})

Pemeriksaan Singkat

Periksa pemahaman Anda tentang pembuatan tiruan.

Jawab di pelajaran interaktif

Rangkuman

Anda telah mempelajari cara membuat tiruan dependensi dalam pengujian:

vi.fn() membuat fungsi yang pelacakannya tersedia; kendalikan keluaran dengan mockReturnValue / mockResolvedValue.
vi.mock(path, factory) mengganti sebuah modul, misalnya komposabel; pemanggilannya diangkat ke atas impor.
createTestingPinia dari @pinia/testing menyediakan store dengan tindakan yang diganti pengganti sementara dan dapat Anda verifikasi.
vi.spyOn(global, "fetch").mockResolvedValue(...) memalsukan panggilan jaringan.
Atur ulang tiruan di antara pengujian dengan vi.clearAllMocks().

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 42
Pelajaran: 156

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mocking Composable, Store, dan API” gratis?

Ya — teks lengkap “Mocking Composable, Store, dan API” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mocking Composable, Store, dan API”?

vi.mock(), melakukan mocking pada useFetch, store Pinia, serta router dalam test. Kamu berlatih Vue 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 Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue 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 4 dari 4.

Berapa lama pelajaran “Mocking Composable, Store, dan API” 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 Vue Academy ini?

Ya. Setiap pelajaran Vue 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

← Kembali ke Vue Academy