Vitest มีตัวเลือก environment เพื่อให้รันโค้ดภายในสภาพแวดล้อมเฉพาะ คุณสามารถปรับแต่งพฤติกรรมของสภาพแวดล้อมด้วยตัวเลือก environmentOptions

โดยค่าเริ่มต้น คุณสามารถใช้สภาพแวดล้อมเหล่านี้:

• node เป็นสภาพแวดล้อมเริ่มต้น
• jsdom จำลองสภาพแวดล้อมเบราว์เซอร์โดยให้ Browser API ใช้แพ็คเกจ jsdom
• happy-dom จำลองสภาพแวดล้อมเบราว์เซอร์โดยให้ Browser API และเร็วกว่า jsdom แต่ขาด API บางตัว ใช้แพ็คเกจ happy-dom
• edge-runtime จำลอง edge-runtime ของ Vercel ใช้แพ็คเกจ @edge-runtime/vm

INFO

เมื่อใช้สภาพแวดล้อม jsdom หรือ happy-dom, Vitest จะทำตามกฎเดียวกับที่ Vite ใช้เมื่อนำเข้า CSS และสินทรัพย์ หากการนำเข้าจากภายนอกล้มเหลวด้วยข้อผิดพลาด unknown extension .css คุณต้อง inline การนำเข้าทั้งหมดด้วยตนเองโดยเพิ่มแพ็คเกจทั้งหมดให้กับ server.deps.external ตัวอย่างเช่น หากข้อผิดพลาดเกิดขึ้นใน package-3 ในการนำเข้า: ซอร์สโค้ด -> package-1 -> package-2 -> package-3 คุณต้องเพิ่มแพ็คเกจทั้งสามไปยัง server.deps.external

การเรียกใช้ CSS และสินทรัพย์ภายในการพึ่งพาภายนอกจะถูกแก้ไขโดยอัตโนมัติ

WARNING

"สภาพแวดล้อม" มีอยู่เฉพาะเมื่อรันการทดสอบใน Node.js เท่านั้น

browser ไม่ถือเป็นสภาพแวดล้อมใน Vitest หากคุณต้องการรันการทดสอบบางส่วนโดยใช้โหมดเบราว์เซอร์ คุณสามารถสร้างโปรเจคทดสอบได้

สภาพแวดล้อมสำหรับไฟล์เฉพาะ

เมื่อตั้งค่าตัวเลือก environment ในการกำหนดค่าของคุณ มันจะใช้กับไฟล์ทดสอบทั้งหมดในโปรเจคของคุณ เพื่อควบคุมอย่างละเอียดมากขึ้น คุณสามารถใช้คอมเมนต์ควบคุมเพื่อระบุสภาพแวดล้อมสำหรับไฟล์เฉพาะ คอมเมนต์ควบคุมคือคอมเมนต์ที่เริ่มต้นด้วย @vitest-environment และตามด้วยชื่อสภาพแวดล้อม:

test.spec.ts

// @vitest-environment jsdom

import { expect, test } from "vitest";

test("test", () => {
  expect(typeof window).not.toBe("undefined");
});

หรือคุณยังสามารถตั้งค่าตัวเลือก environmentMatchGlobs โดยระบุสภาพแวดล้อมตามรูปแบบ glob

สภาพแวดล้อมที่กำหนดเอง

คุณสามารถสร้างแพ็คเกจของคุณเองเพื่อขยายสภาพแวดล้อม Vitest ได้ ในการทำเช่นนี้ ให้สร้างแพ็คเกจด้วยชื่อ vitest-environment-${name} หรือระบุเส้นทางไปยังไฟล์ JS/TS ที่ถูกต้อง แพ็คเกจนั้นควรส่งออกอ็อบเจกต์ที่มีรูปร่างของ Environment:

custom-environment.ts

import type { Environment } from "vitest/environments";

export default <Environment> {
  name: "custom",
  transformMode: "ssr",
  // ตัวเลือก - เฉพาะเมื่อคุณรองรับพูล "experimental-vm"
  async setupVM() {
    const vm = await import("node:vm");
    const context = vm.createContext();
    return {
      getVmContext() {
        return context;
      },
      teardown() {
        // เรียกหลังจากการทดสอบทั้งหมดกับสภาพแวดล้อมนี้ได้ถูกรัน
      },
    };
  },
  setup() {
    // การตั้งค่าที่กำหนดเอง
    return {
      teardown() {
        // เรียกหลังจากการทดสอบทั้งหมดกับสภาพแวดล้อมนี้ได้ถูกรัน
      },
    };
  },
};