إعداد Vitest مع Next.js

يتم استخدام Vite و React Testing Library معًا بشكل متكرر لـ اختبار الوحدات (Unit Testing). سيُظهر لك هذا الدليل كيفية إعداد Vitest مع Next.js وكتابة أول اختباراتك.

معلومة مفيدة: نظرًا لأن مكونات الخادم (Server Components) غير المتزامنة (async) جديدة في نظام React البيئي، فإن Vitest لا يدعمها حاليًا. بينما يمكنك仍然 تشغيل اختبارات الوحدات لمكونات الخادم والعميل المتزامنة، نوصي باستخدام اختبارات E2E للمكونات غير المتزامنة (async).

البدء السريع

يمكنك استخدام create-next-app مع مثال Next.js with-vitest للبدء بسرعة:

Terminal

npx create-next-app@latest --example with-vitest with-vitest-app

الإعداد اليدوي

لإعداد Vitest يدويًا، قم بتثبيت vitest والحزم التالية كتبعيات تطوير:

Terminal

npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react
# أو
yarn add -D vitest @vitejs/plugin-react jsdom @testing-library/react
# أو
pnpm install -D vitest @vitejs/plugin-react jsdom @testing-library/react
# أو
bun add -D vitest @vitejs/plugin-react jsdom @testing-library/react

قم بإنشاء ملف vitest.config.ts|js في جذر مشروعك، وأضف الخيارات التالية:

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
  },
})

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
  },
})

لمزيد من المعلومات حول تكوين Vitest، يرجى الرجوع إلى وثائق تكوين Vitest.

ثم، أضف سكريبت test إلى ملف package.json الخاص بك:

package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "vitest"
  }
}

عند تشغيل npm run test، سيقوم Vitest بمراقبة التغييرات في مشروعك افتراضيًا.

إنشاء أول اختبار وحدة باستخدام Vitest

تحقق من أن كل شيء يعمل بشكل صحيح عن طريق إنشاء اختبار للتحقق مما إذا كان مكون <Page /> يعرض عنوانًا بنجاح:

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/about">About</Link>
    </div>
  )
}

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/about">About</Link>
    </div>
  )
}

import { expect, test } from 'vitest'
import { render, screen } from '@testing-library/react'
import Page from '../pages/index'

test('Page', () => {
  render(<Page />)
  expect(screen.getByRole('heading', { level: 1, name: 'Home' })).toBeDefined()
})

import { expect, test } from 'vitest'
import { render, screen } from '@testing-library/react'
import Page from '../pages/index'

test('Page', () => {
  render(<Page />)
  expect(screen.getByRole('heading', { level: 1, name: 'Home' })).toBeDefined()
})

تشغيل الاختبارات

ثم، قم بتشغيل الأمر التالي لتشغيل اختباراتك:

Terminal

npm run test
# أو
yarn test
# أو
pnpm test
# أو
bun test

موارد إضافية

قد تجد هذه الموارد مفيدة:

البدء السريع

الإعداد اليدوي

إنشاء أول اختبار وحدة باستخدام Vitest

تشغيل الاختبارات

موارد إضافية

On this page