كيفية إعداد 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

# عند استخدام TypeScript
npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths
# عند استخدام JavaScript
npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom

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

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [tsconfigPaths(), 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 '../app/page'

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 '../app/page'

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

معلومة مفيدة: يستخدم المثال أعلاه اصطلاح __tests__ الشائع، ولكن يمكن أيضًا وضع ملفات الاختبار داخل مسار app.

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

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

Terminal

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

موارد إضافية

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

كيفية إعداد Vitest مع Next.js

البدء السريع

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

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

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

موارد إضافية

On this page