ค้นหาเว็บไซต์

reactjs - การใช้ Storybook และ Vitest การจำลองโมดูลทำให้เกิดข้อยกเว้น


ฉันมีการตั้งค่า Storybook โดยใช้ vitest และฉันต้องการจำลองโมดูลในสตอรี่โดยวิธีของ vitest ดังนั้นฉันจึงเพิ่มสิ่งต่อไปนี้ไว้ที่ด้านบนของไฟล์สตอรี่ของฉัน:

// my-nice-function.stories.tsx
import { vi } from "vitest";

vi.mock("../some-module", () => ({
  someFunction: vi.fn(),
}));

// the actual stories below here...

แต่เมื่อฉันรันเรื่องราวนี้ ข้อผิดพลาดต่อไปนี้จะเกิดขึ้น:

ไม่สามารถอ่านคุณสมบัติของ undefined (กำลังอ่าน 'customEqualityTesters')

ตอนนี้ สแต็กเทรซแสดงว่าข้อผิดพลาดถูกโยนใน http://localhost:6006/node_modules/.cache/storybook/ea2884736a0b9e4a130cf856017239193d1095a3a808f644c6f79a05cc61ea0f/sb-vite/deps/vitest.js?v=6cfb0e39 แต่เมื่อฉันดูที่บรรทัดนี้ ฉันเห็นดังต่อไปนี้ (ที่บรรทัด 10869):

function getCustomEqualityTesters() {
  return globalThis[JEST_MATCHERS_OBJECT].customEqualityTesters;
}

เมื่อตรวจสอบ globalThis จะพบว่าไม่มีรายการสำหรับ JEST_MATCHER_OBJECT (ประกาศในบรรทัดที่ 10773 เป็น var JEST_MATCHERS_OBJECT=Symbol.for("$$jest-matchers-object");):

ฉันไม่แน่ใจทั้งหมดว่า vitest ใช้ jest มากแค่ไหน แต่ฉันขาดการพึ่งพาอะไรบางอย่างที่ฉีดคุณสมบัติ jest-match-object เข้าไปใน globalThis หรือเปล่า?

คำตอบ #1

ฉันประสบปัญหานี้และพบว่าสาเหตุเกิดจากการนำเข้า vitest ในไฟล์ .stories การลบ vitest ออกจากการเป็น dependencies ที่นำเข้าได้แก้ปัญหาแล้ว