Vue Academy · Ders

Composable'ları, Store'ları ve API'leri Taklit Etme

vi.mock(), useFetch'i taklit etme, Pinia store'larını taklit etme ve testlerde router'ı taklit etme.

Composable'ları, Store'ları ve API'leri Taklit Etme, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 4. 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, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Neden sahte nesne kullanılır?

Birim sınamaları, sınanan bileşeni yalıtmalıdır. Gerçek ağ çağrıları, gerçek store'lar ve ağır bileştirilebilir işlevler sınamaları yavaş ve kararsız hâle getirir. Sahte nesne kullanımı, bu bağımlılıkları denetlenebilir sahte nesnelerle değiştirir.

vi.fn: Bir sahte işlev

vi.fn(), izlenen bir işlev oluşturur. Nasıl çağrıldığını inceleyebilir ve ne döndüreceğini denetleyebilirsiniz. Tüm sahte nesne kullanımının temel yapı taşıdır.

import { vi } from "vitest"

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

Dönüş değerlerini ayarlama

Bir sahte nesnenin çıktısını eşzamanlı kod için mockReturnValue ile, eşzamansız kod içinse mockResolvedValue (çözümlenmiş bir vaat) ile denetleyin.

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

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

Bileştirilebilir bir modülü sahteleme

vi.mock(path), bir modülün tamamını değiştirir. Sahte dışa aktarımlar döndüren bir fabrika işlevi sağlayın. Bir bileştirilebilir işlevi, bileşenin öngörülebilir veriler alacağı şekilde taklit etmek için bunu kullanın.

import { vi } from "vitest"

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

vi.mock ifadelerini üst düzeye taşıma

vi.mock çağrıları, içe aktarmalar çalıştırılmadan önce dosyanın en üstüne taşınır. Bu nedenle fabrika işlevi daha sonra tanımlanan dış değişkenlere başvuramaz; yardımcıları fabrikanın içinde veya vi.hoisted aracılığıyla bildirin.

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

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

Pinia store'larını sınama

Pinia store kullanan bileşenlerin sınamalarda bir store'a ihtiyacı vardır. @pinia/testing, eylemleri varsayılan olarak sahteleştirilmiş bir store sağlayan createTestingPinia işlevini sunar.

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

Sınama Pinia'sını yükleme

Bağlama sırasında sınama Pinia'sını genel plugins seçeneğiyle geçirin. Başlangıç durumunu da önceden ayarlayabilirsiniz.

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

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

Store eylemlerini doğrulama

Varsayılan olarak eylemler yer tutucularla değiştirilir ve çalıştırılmaz; böylece gönderilip gönderilmediklerini doğrulayabilirsiniz. Store'u alın ve spy'ı denetleyin.

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

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

fetch işlevini izleme

Tüm bir modülü değiştirmek yerine genel bir işlevi izleyebilirsiniz. vi.spyOn(global, "fetch"), gerçek fetch işlevini sarar; böylece onu geçersiz kılabilir ve inceleyebilirsiniz.

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

Tam bir ağ isteği sınaması

Ağ isteğini sahteleyin, eylemi tetikleyin, vaatlerin tamamlanmasını bekleyin; oluşturulan verileri ve ağ isteğinin doğru adresle çağrıldığını doğrulayın.

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

Sınamalar arasında sahte nesneleri sıfırlama

Paylaşılan sahte nesneler çağrı geçmişini biriktirir. Bir sınamanın diğerine sızmaması için bunları beforeEach içinde sıfırlayın (veya yapılandırmada clearMocks seçeneğini etkinleştirin).

import { beforeEach, vi } from "vitest"

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

Hızlı kontrol

Sahte nesne kullanımı konusundaki anlayışınızı kontrol edin.

Özet

Sınamalarda bağımlılıkları sahtelemeyi öğrendiniz:

vi.fn(), izlenen işlevler oluşturur; çıktıyı mockReturnValue / mockResolvedValue ile denetleyin.
vi.mock(path, factory), bir modülü (örneğin bir bileştirilebilir işlevi) değiştirir; içe aktarmaların üstüne taşınır.
@pinia/testing içindeki createTestingPinia, eylemleri sahteleştirilmiş ve doğrulayabileceğiniz bir store sağlar.
vi.spyOn(global, "fetch").mockResolvedValue(...), ağ çağrılarını sahtelemeyi sağlar.
Sınamalar arasında sahte nesneleri vi.clearAllMocks() ile sıfırlayın.

Sıkça Sorulan Sorular

“Composable'ları, Store'ları ve API'leri Taklit Etme” dersi ücretsiz mi?

Evet — “Composable'ları, Store'ları ve API'leri Taklit Etme” 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 Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Composable'ları, Store'ları ve API'leri Taklit Etme” dersinde ne öğreneceğim?

vi.mock(), useFetch'i taklit etme, Pinia store'larını taklit etme ve testlerde router'ı taklit etme. Vue 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.

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

Önceden deneyim gerekmez. CoddyKit'te Vue 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 4. dersidir.

“Composable'ları, Store'ları ve API'leri Taklit Etme” 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 Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue 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

Vue Projeleri için Vitest Kurulumu
Bileşenleri Bağlama ve Sorgulama
Kullanıcı Etkileşimlerini ve Olayları Test Etme
Composable'ları, Store'ları ve API'leri Taklit Etme

← Vue Academy Sayfasına Dön