Vue Academy · Pelajaran

Mengejek Komposabel, Stor dan API

vi.mock(), mengejek useFetch, mengejek stor Pinia, mengejek penghala dalam test.

Pelajaran 4 daripada 413 langkah

Mengejek Komposabel, Stor dan API ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Mengapa Menggunakan Tiruan?

Ujian unit harus mengasingkan komponen yang sedang diuji. Panggilan rangkaian sebenar, store sebenar dan komposabel yang berat menjadikan ujian lambat serta tidak stabil. Peniruan menggantikan kebergantungan tersebut dengan objek tiruan yang boleh dikawal.

vi.fn: Fungsi Tiruan

vi.fn() mencipta fungsi yang dijejaki. Anda boleh memeriksa cara fungsi itu dipanggil dan mengawal nilai yang dikembalikannya. Fungsi ini ialah asas bagi semua peniruan.

import { vi } from "vitest"

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

Menetapkan Nilai Pulangan

Kawal output tiruan dengan mockReturnValue (segerak) atau mockResolvedValue (janji yang diselesaikan) untuk kod tak segerak.

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

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

Meniru Modul Komposabel

vi.mock(path) menggantikan keseluruhan modul. Sediakan kilang yang mengembalikan eksport tiruan. Gunakannya untuk menggantikan komposabel supaya komponen menerima data yang boleh diramal.

import { vi } from "vitest"

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

Pengangkatan vi.mock

Panggilan vi.mock diangkat ke bahagian atas fail sebelum import dijalankan. Oleh itu, kilang tersebut tidak boleh merujuk pemboleh ubah luar yang ditakrifkan kemudian — isytiharkan sebarang pembantu di dalam kilang 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 ujian. @pinia/testing menyediakan createTestingPinia, yang memberikan anda store dengan tindakan yang ditiru secara lalai.

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

Memasang Pinia untuk Ujian

Hantar Pinia ujian melalui pilihan global plugins semasa melakukan pelekap. Anda juga boleh 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" } },
    })],
  },
})

Membuat Tegasan terhadap Tindakan Store

Secara lalai, tindakan digantikan dengan stub (tidak dijalankan), supaya anda boleh membuat tegasan bahawa tindakan tersebut telah dihantar. Dapatkan store dan periksa spy itu.

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

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

Memerhati fetch

Daripada menggantikan keseluruhan modul, anda boleh memerhati global. vi.spyOn(global, "fetch") membalut fetch sebenar supaya anda boleh mengatasinya dan memeriksanya.

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

Ujian fetch Lengkap

Tiru fetch, cetuskan tindakan, kosongkan janji, buat tegasan terhadap data yang dipaparkan dan pastikan fetch dipanggil dengan URL yang betul.

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

Menetapkan Semula Tiruan antara Ujian

Tiruan yang dikongsi mengumpulkan sejarah panggilan. Tetapkan semula tiruan tersebut dalam beforeEach (atau dayakan clearMocks dalam konfigurasi) supaya satu ujian tidak mempengaruhi ujian yang lain.

import { beforeEach, vi } from "vitest"

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

Semakan Pantas

Semak pemahaman anda tentang peniruan.

Jawab dalam pelajaran interaktif

Rumusan

Anda telah belajar meniru kebergantungan dalam ujian:

vi.fn() mencipta fungsi yang dijejaki; kawal output dengan mockReturnValue / mockResolvedValue.
vi.mock(path, factory) menggantikan modul (contohnya komposabel); panggilan ini diangkat ke atas import.
createTestingPinia daripada @pinia/testing menyediakan store dengan tindakan yang digantikan dengan stub dan boleh dibuat tegasan.
vi.spyOn(global, "fetch").mockResolvedValue(...) meniru panggilan rangkaian.
Tetapkan semula tiruan antara ujian dengan vi.clearAllMocks().

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 42
Pelajaran: 156

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Mengejek Komposabel, Stor dan API” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Mengejek Komposabel, Stor dan API”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Mengejek Komposabel, Stor dan API”?

vi.mock(), mengejek useFetch, mengejek stor Pinia, mengejek penghala dalam test. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Mengejek Komposabel, Stor dan API” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Persediaan Vitest untuk Projek Vue
Memasang dan Membuat Pertanyaan kepada Komponen
Menguji Interaksi Pengguna dan Peristiwa
Mengejek Komposabel, Stor dan API

← Kembali ke Vue Academy