Vue Academy · บทเรียน

การจำลองคอมโพสิเบิล สโตร์ และ API

vi.mock() การจำลอง useFetch การจำลองสโตร์ Pinia และการจำลองเราเตอร์ในการทดสอบ

การจำลองคอมโพสิเบิล สโตร์ และ API เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงต้องสร้างตัวจำลอง

การทดสอบหน่วยควรแยกส่วนประกอบที่กำลังทดสอบออกจากส่วนอื่น การเรียกเครือข่ายจริง, store จริง และคอมโพสเซเบิลที่มีภาระมากทำให้การทดสอบช้าและไม่เสถียร การสร้างตัวจำลอง จะแทนที่การพึ่งพาเหล่านั้นด้วยตัวจำลองที่ควบคุมได้

vi.fn: ฟังก์ชันตัวจำลอง

vi.fn() สร้างฟังก์ชันที่ติดตามการเรียกใช้ คุณสามารถตรวจสอบว่าฟังก์ชันถูกเรียกอย่างไรและควบคุมค่าที่ส่งกลับได้ ฟังก์ชันนี้เป็นองค์ประกอบพื้นฐานของการสร้างตัวจำลองทั้งหมด

import { vi } from "vitest"

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

การกำหนดค่าผลลัพธ์

ควบคุมผลลัพธ์ของตัวจำลองด้วย mockReturnValue (แบบทำงานพร้อมกัน) หรือ mockResolvedValue (พรอมิสที่เสร็จสมบูรณ์) สำหรับโค้ดแบบอะซิงโครนัส

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

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

การสร้างตัวจำลองให้โมดูลคอมโพสเซเบิล

vi.mock(path) จะแทนที่ทั้งโมดูล ให้ฟังก์ชันโรงงานที่ส่งออกจำลองกลับมา ใช้สิ่งนี้เพื่อทำคอมโพสเซเบิลให้เป็นตัวจำลอง เพื่อให้ส่วนประกอบได้รับข้อมูลที่คาดเดาได้

import { vi } from "vitest"

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

การยก vi.mock ขึ้นก่อน

การเรียก vi.mock จะถูกยกขึ้นไปไว้ด้านบนสุดของไฟล์ก่อนที่การนำเข้าจะทำงาน นั่นเป็นเหตุผลที่ฟังก์ชันโรงงานไม่สามารถอ้างอิงตัวแปรภายนอกที่ประกาศไว้ภายหลังได้ — ให้ประกาศตัวช่วยไว้ภายในฟังก์ชันโรงงานหรือผ่านทาง vi.hoisted

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

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

การทดสอบ store ของ Pinia

ส่วนประกอบที่ใช้ store ของ Pinia จำเป็นต้องมี store ในการทดสอบ @pinia/testing มี createTestingPinia ซึ่งมอบ store ที่แอ็กชันถูกสร้างเป็นตัวจำลองไว้เป็นค่าเริ่มต้น

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

การติดตั้ง Pinia สำหรับการทดสอบ

ส่ง Pinia สำหรับการทดสอบผ่านตัวเลือกส่วนกลาง plugins ขณะเมานต์ คุณยังสามารถกำหนดสถานะเริ่มต้นได้ด้วย

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

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

การตรวจสอบแอ็กชันของ store

โดยค่าเริ่มต้น แอ็กชันจะถูกสร้างเป็นตัวจำลอง (ไม่ทำงาน) เพื่อให้คุณตรวจสอบได้ว่ามีการส่งแอ็กชันเหล่านั้นออกไป ให้ดึง store มาแล้วตรวจสอบ spy

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

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

การสอดส่องการเรียกข้อมูล

แทนที่จะเปลี่ยนทั้งโมดูล คุณสามารถสอดส่องตัวแปรส่วนกลางได้ vi.spyOn(global, "fetch") จะครอบการเรียกข้อมูลจริงไว้ เพื่อให้คุณเปลี่ยนพฤติกรรมและตรวจสอบการเรียกใช้ได้

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

การทดสอบการเรียกข้อมูลแบบครบถ้วน

สร้างตัวจำลองให้การเรียกข้อมูล เรียกใช้แอ็กชัน รอให้พรอมิสเสร็จสิ้น ตรวจสอบข้อมูลที่แสดงผล และตรวจสอบว่าการเรียกข้อมูลถูกเรียกด้วย URL ที่ถูกต้อง

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

การรีเซ็ตตัวจำลองระหว่างการทดสอบ

ตัวจำลองที่ใช้ร่วมกันจะสะสมประวัติการเรียกใช้ ให้รีเซ็ตตัวจำลองเหล่านั้นใน beforeEach (หรือเปิดใช้ clearMocks ในการตั้งค่า) เพื่อไม่ให้การทดสอบหนึ่งส่งผลต่ออีกการทดสอบหนึ่ง

import { beforeEach, vi } from "vitest"

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

ตรวจสอบความเข้าใจ

ตรวจสอบความเข้าใจของคุณเกี่ยวกับการสร้างตัวจำลอง

สรุปทบทวน

คุณได้เรียนรู้การสร้างตัวจำลองให้การพึ่งพาในการทดสอบ:

vi.fn() สร้างฟังก์ชันที่ติดตามการเรียกใช้ คุณสามารถควบคุมผลลัพธ์ด้วย mockReturnValue / mockResolvedValue
vi.mock(path, factory) แทนที่โมดูล (เช่น คอมโพสเซเบิล) และจะถูกยกขึ้นไปไว้ก่อนการนำเข้า
createTestingPinia จาก @pinia/testing มอบ store ที่มีแอ็กชันเป็นตัวจำลอง ซึ่งคุณสามารถตรวจสอบได้
vi.spyOn(global, "fetch").mockResolvedValue(...) จำลองการเรียกเครือข่าย
รีเซ็ตตัวจำลองระหว่างการทดสอบด้วย vi.clearAllMocks()

คำถามที่พบบ่อย

บทเรียน “การจำลองคอมโพสิเบิล สโตร์ และ API” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การจำลองคอมโพสิเบิล สโตร์ และ API” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การจำลองคอมโพสิเบิล สโตร์ และ API”

vi.mock() การจำลอง useFetch การจำลองสโตร์ Pinia และการจำลองเราเตอร์ในการทดสอบ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การจำลองคอมโพสิเบิล สโตร์ และ API” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Vue Academy