reactjs - การตั้งค่า Vitest ไม่สามารถตรวจจับสภาพแวดล้อม jsdom

ฉันอยู่ในแอปพลิเคชัน Vite/React/TypeScript และกำลังกำหนดค่าการทดสอบครั้งแรกของฉันด้วย Vitest

เมื่อฉันรันการทดสอบปุ่มของฉัน (yarn vitest) ฉันได้รับข้อผิดพลาดนี้:

packages/frontend/src/components/Generic/Button/Button.test.tsx > Button > should render the button
ReferenceError: document is not defined

ฉันเข้าใจว่า Vitest ไม่ทำงานกับ JSDom ฉันได้ลองหลายวิธีแล้ว:

• KO: การระบุในไฟล์ vite.config.ts เพื่อใช้ JSDom
• ตกลง: กำลังเพิ่มไฟล์ vitest.config.ts โดยระบุให้ใช้ JSDom
• ตกลง: การเพิ่มคำอธิบายประกอบ (@vitest-environment jsdom) ที่ด้านบนของไฟล์ทดสอบ

ฉันขอใช้ตัวเลือกแรก (ใช้ vite.config.ts) เพื่อแชร์การตั้งค่าเพียงชุดเดียว มันเป็นไปได้ไหม?

หมายเหตุ 1: JSdom ที่ฉันติดตั้งไปแล้วมี "devDependencies". หมายเหตุ 2: เพื่อใช้ vitest.config.ts ฉันควรอัปเดตสคริปต์ใน package.json แบบนี้: "test": "vitest --config ./packages/frontend/vitest.config.ts"

นี่คือไฟล์ของฉัน:

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import viteTsConfigPaths from 'vite-tsconfig-paths'
import tailwindcss from 'tailwindcss'

export default defineConfig({
  server: {
    port: 4200,
    host: 'localhost',
  },

  rollupOption: {
    external: ['@internals/components/index']
  },

  define: {
    global: {},
  },

  plugins: [
    react(),
    tailwindcss(),
    viteTsConfigPaths({
      root: '../../',
    }),
  ],
  resolve: {
    alias: {
      // runtimeConfig is a special alias that is used to import the correct config file
      './runtimeConfig': './runtimeConfig.browser',

      // public alias
      '@publics': `${__dirname}/public`,

      // only internals (private) aliases are allowed here
      '@internals/components': `${__dirname}/src/components`,
      '@internals/features': `${__dirname}/src/features`,
      '@internals/hooks': `${__dirname}/src/hooks`,
      '@internals/models': `${__dirname}/src/models`,
      '@internals/utils': `${__dirname}/src/utils`,
      '@internals/types': `${__dirname}/src/types`,
      '@internals/styles': `${__dirname}/src/styles`,
      '@internals/assets': `${__dirname}/src/assets`,
      '@internals/store': `${__dirname}/src/store`,
      '@internals/config': `${__dirname}/src/config`,
      '@internals/services': `${__dirname}/src/services`,
    },
  },

  test: {
    globals: true,
    cache: {
      dir: '../../node_modules/.vitest',
    },
    environment: 'jsdom',
    include: ['*.tsx', '*.ts', '*.jsx', '*.js'],
  },
})

ฉันพยายามเพิ่มแบบนี้ใน vitest.config.ts :

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    include: ['*.ts', '*.tsx'], // FIXME
    environment: 'jsdom',
  },
})

คำตอบ #1

Vitest ทำงานในสภาพแวดล้อม NodeJS ตามค่าเริ่มต้น อย่างไรก็ตาม มันมีการสนับสนุนสภาพแวดล้อมเบราว์เซอร์ (ทดลองในตอนนี้)

ถ้าคุณพยายามเข้าถึงเอกสารในสภาพแวดล้อม Node คุณจะได้รับ:

เกิดข้อผิดพลาด ReferenceError: document ไม่ถูกกำหนด

โปรดดูเอกสารเพื่อการตั้งค่าสภาพแวดล้อมเบราว์เซอร์หากคุณต้องการเข้าถึงเอกสาร:

https://vitest.dev/config/#browser

https://vitest.dev/guide/browser/

เพื่อเปิดใช้งาน JSDom:

• ติดตั้ง (เป็น dev deps) @testing-library/jest-dom (รวมถึง @types/testing-library__jest-dom หากใช้ Typescript) และ jsdom

• สร้างไฟล์ setup-tests.ts โดยมี:

    import '@testing-library/jest-dom'

• หากมันไม่ฉีดฟังก์ชันของ jest-dom ให้บังคับเพิ่มมันเข้าไปที่ setup-tests.ts:

    import { expect } from 'vitest'
    import * as matchers from '@testing-library/jest-dom/matchers'
    
    expect.extend(matchers)

• ใน vitest.config.ts:

    export default defineConfig({
                test: {
                  setupFiles: ['./setup-tests.ts'],
                  globals: true,
                  environment: 'jsdom',
                },
    })

• [เฉพาะ Typescript] ในไฟล์ tsconfig.json ของคุณ compilerOptions, เพิ่ม

    "types": ["vitest/globals","@testing-library/jest-dom"]

อ้างอิง: https://vitaneri.com/posts/setting-up-vitest-testing-library-and-jest-dom-in-your-vite-project

คำตอบ #2

ฉันทำให้มันทำงานได้โดยการเพิ่ม คอมเมนต์ Docblock ที่ด้านบนของหน้า

เอกสารอ้างอิงการตั้งค่า Vitest - สภาพแวดล้อม

/**
 * @vitest-environment jsdom
 */
import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'

describe('this function', () => {
  // ...
})

describe('that function', () => {
  // ...
})