לפני כמה חודשים העברתי כאן וובינר על ויט, כלי שורת פקודה לבניית פרויקטי ווב. לויט יש תפריטים יפים כדי ליצור פרויקטים מכל מיני סוגים (ריאקט, ויו, סבלט), אבל הוא גם תומך בספריות אחרות באמצעות קונפיגורציה למשל סוליד.

כשהעברתי את הוובינר vitest היה עדיין בתחילת הדרך ולא היתה דרך סטנדרטית לכתוב בדיקות לפרויקטי ויט. זה השתנה לאחרונה ו vitest מספק אינטגרציה טובה עם ויט, תחביר כמעט זהה למה שאנחנו מכירים מ jest ועוד כמה פיצ'רים מעניינים כמו הרצת בדיקות במקביל או כתיבת בדיקות בגוף הקוד.

במדריך זה אני אצור אתכם פרויקט react עם vite, אתקין את vitest ואכתוב את הבדיקה הראשונה לפרויקט. מוכנים? הנה זה בא.

1. יצירת פרויקט ריאקט עם vite

שלב ראשון הוא יצירת פרויקט ריאקט חדש עם ויט. אני מריץ משורת הפקודה:

$ npm create vite@latest my-react-app

בוחר בתפריט את האפשרות react ואחרי זה שוב react ומפעיל את שלושת הפקודות שמופיעות על המסך כדי לוודא שהפרויקט נבנה:

$ cd my-react-app
$ npm install
$ npm run dev

ויט ירים שרת שמאזין לפורט 3000 ויציג לוגו מסתובב של ריאקט יחד עם כפתור מונה לחיצות. כל לחיצה על הכפתור מעלה את המספר ב-1.

2. הוספת vitest

בשביל לכתוב בדיקות לפרויקט אני מוסיף את ויטסט באמצעות הרצת:

$ npm install -D vitest jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event

בנוסף ל vitest התקנתי גם את jsdom כדי שאוכל לבדוק דברים שקשורים לדפדפן (הבדיקות רצות ב node.js), ואת כל החבילה של react-testing-library ו jest-dom. את ג'סט עצמו אני לא צריך להתקין כי אני לא אשתמש בו. ויטסט משתמש ב chai, אבל מסתבר ש jest-dom יכול להתחבר ל chai והכל יעבוד.

אחרי ההתקנה אני ממשיך לעדכון ההגדרות. בקובץ vite.config.js אני מוסיף בלוק test עם התוכן הבא:

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    environment: "jsdom",
    globals: true,
    setupFiles: 'src/setupTests.js',
  },
})

ביקשתי להריץ את הבדיקות בתוך jsdom ולפני הרצת הבדיקות להריץ קובץ בשם src/setupTests.js. אני יוצר גם את הקובץ הזה וכותב בתוכו:

import '@testing-library/jest-dom'

בשביל לטעון את jest-dom לפני שמריצים את הבדיקות. כמו כן, jest-dom מצפה למצוא את expect בתור משתנה גלובאלי שכבר מוגדר בעמוד ובגלל זה הוספתי את globals: true להגדרות הבדיקות (שיעבוד כמה שיותר דומה למה שאני רגיל מ jest).

שינוי הגדרות אחרון הוא בקובץ package.json שם אני מוסיף סקריפט שמריץ את הבדיקות:

  "scripts": {
    "test": "vitest",
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

3. כתיבת בדיקה ראשונה

זה הכל לגבי ההתקנות ועכשיו אפשר ליצור קובץ App.test.jsx עם הבדיקות הראשונות:

import { screen, render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import App from './App';

describe('App', () => {
  it('shows Hello text', () => {
    render(<App />);
    expect(screen.getByText('Hello Vite + React!')).toBeInTheDocument();
  });

  it('increases the value when button is pressed', async () => {
    render(<App />);
    const btn = screen.getByRole('button', { name: /count is/ });
    await userEvent.click(btn);
    expect(btn).toHaveTextContent('count is: 1');
  });
});

וכמו עם ג'סט בשביל להריץ את הבדיקות מספיק להפעיל:

$ npm run test

באופן אוטומטי vitest יעלה ויתחיל להריץ את הבדיקות וימשיך להריץ מחדש את הבדיקות הרלוונטיות כל פעם שתעדכנו את הקוד.