לא חייבים להשתמש ב create-react-app רק בשביל לקבל תמיכה בבדיקות אוטומטיות ב React, ולמעשה זה די פשוט להתקין את jest ואיתו את התמיכה ב react-testing-library כמעט לכל פרויקט וובפאק. נכון יש כמה מגבלות אבל ברוב המקרים הצעדים בפוסט כאן מספיקים. בואו נצא לדרך.

1. התקנת הכלים

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

אבל בואו לא נקדים את המאוחר ונתחיל בהתקנת ג'סט והחברים שלו:

npm install --save-dev @testing-library/react @testing-library/jest-dom babel-jest jest @babel/preset-env babel-polyfill

התוסף babel-jest הולך לחבר בין jest ל babel וכך jest בעצם יריץ את בייבל במקום וובפאק.

2. קבצי ההגדרות

קובץ ההגדרות המרכזי של jest נקרא jest.config.js ואנחנו רוצים לשמור אותו בתיקיה הראשית של הפרויקט. זה התוכן שעבד אצלי:

module.exports = {
  "verbose": true,
  "globals": {
    "NODE_ENV": "test"
  },
  "moduleFileExtensions": [
    "js",
    "jsx"
  ],
  setupFilesAfterEnv: ['./setUpTests.js'],
  "moduleDirectories": [
    "node_modules",
    "src",
  ]
};

ככל שתרצו לטעון מודולים מיותר תיקיות אולי תרצו לשנות את moduleDirectories.

הקובץ setUpTests.js שמופיע במפתח setupFilesAfterEnv הוא קובץ ש jest יטען אוטומטית לפני הרצת הבדיקות. אני משתמש בו כדי לטעון את המודול extend-expect שמוסיף ל expect את הפונקציות של react-testing-library. זה תוכן הקובץ אצלי על המכונה, שוב בתיקיית הפרויקט הראשית:

import 'babel-polyfill';
import '@testing-library/jest-dom/extend-expect';

אם יהיו לכם ספריות נוספות שתרצו לטעון לפני כל בדיקה תוכלו להוסיף עוד שורות import לכאן.

והנודניק האחרון ברשימת הקונפיגורציות הוא babel.config.js. בגלל ש jest מפעיל את babel ישירות ולא עובר דרך וובפאק אנחנו צריכים לוודא שהקונפיגורציה של בייבל זמינה בקובץ נפרד. זה התוכן אצלי על המכונה:

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
};

והוא לקוח ישירות מהמפתח options של babel-loader ב webpack-config.js (וכן אם הקונפיגורציה שלכם יותר מתוחכמת תצטרכו לקחת את כולה לקובץ ה babel.config.js).

3. קובץ הבדיקות עצמו

קובץ הבדיקות הוא בפורמט רגיל של react-testing-library וכתבתי כבר פוסט היכרות עם הספריה בעבר. בפרויקט הדוגמה השתמשתי בקובץ בדיקות פשוט שנקרא person.test.js ונמצא בתיקיית src של הפרויקט:

import React from 'react';
import { screen, render, cleanup, fireEvent } from '@testing-library/react'
import Person from './person.js'

describe('Person component', () => {
  it('should have the right message in the dom', () => {
    const { container, getByText } = render(<Person />);
    expect(getByText('Hi!')).toBeInTheDocument()
  })
})

4. הרצת הבדיקות

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

הפקודה:

npx jest

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

 PASS  src/person.test.js
  Person component
    ✓ should have the right message in the dom (51 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.797 s
Ran all test suites.

וכמובן הכיף האמיתי הוא להשאיר חלון עם בדיקות שרצות בכל פעם שאני משנה קובץ במערכת ואת זה אפשר לעשות עם המתג watch של ג'סט באופן הבא:

npx jest --watch

אבל האמת שהרבה יותר מומלץ להוסיף ל package.json את הסקריפטים המתאימים כדי כך ש npm test יפעיל את הבדיקה עם watch.

מוזמנים להוריד את פרויקט הדוגמה ולשחק עם הקוד בעצמכם בגיטהאב בקישור https://github.com/ynonp/react-testing-library-webpack-demo.