כיצד לבדוק יישומי Next.js באמצעות Jest

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

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

בדיקת יישומי Next.js

כתיבת מבחנים היא היבט חיוני ולעתים קרובות לא מוערך לזלזל בפיתוח יישומים חזקים. קל ליפול לפיתוי של משלוח קוד ישירות לייצור, בהסתמך על האמונה ש"אתה חיברת את הקוד, אז זה חייב לעבוד!"

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

מה זה ג'סט?

צְחוֹק היא מסגרת בדיקה פופולרית שנמצאת בשימוש נרחב על ידי שונים מסגרות JavaScript. הוא מספק חבילה של תכונות בדיקה כגון רץ מבחן רב עוצמה, לעג אוטומטי ובדיקת תמונת מצב.

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

צור אפליקציית מטלות של Next.js

כעת, בואו נעמיק בתהליך של הפעלת בדיקות יחידות ביישום Next.js באמצעות Jest. עם זאת, לפני שתתחיל, צור פרוייקט Next.js והתקן את התלות הנדרשת.

כדי להתחיל, בצע את השלבים הבאים:

1. צור פרויקט Next.js חדש על ידי הפעלת הפקודה הבאה בטרמינל שלך:

   npx create-next-app@latest test-tutorial

2. לאחר יצירת הפרויקט, נווט אל ספריית הפרויקט על ידי הפעלת:

   cd nextjs-test-tutorial

3. התקן את התלות הדרושות כ devDependencies על ידי הפעלת הפקודה הבאה:

   npm התקנת npm install --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

עם הגדרת הפרויקט, והתלות מותקנות, אתה מוכן כעת לבנות את היישום Next.js ולכתוב בדיקות יחידות באמצעות Jest.

צור את רכיב המטלות

בתוך ה /src ספריית הפרויקט, פתח את pages/index.js קובץ, מחק את קוד ה-boilerplate Next.js הקיים, והוסף את הקוד הבא.

ראשית, בצע את הייבוא ​​הבא והגדר שתי פונקציות שינהלו את משימות המשתמש: addTodo פונקציה ו מחק את Todo פוּנקצִיָה.

יְבוּא { useState } מ"לְהָגִיב";
יְבוּא סגנונות מ"../styles/Home.module.css";
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהבית() {
const [todos, setTodos] = useState([]);
const [newTodo, setNewTodo] = useState("");
const addTodo = () => {
אם (newTodo.trim() !== "") {
const updatedTodos = [...todos, newTodo];
 setTodos (updatedTodos);
 setNewTodo("");
 }
 };
const deleteTodo = (אינדקס) => {
const updatedTodos = [...todos];
 updatedTodos.splice (אינדקס, 1);
 setTodos (updatedTodos);
 };

הקוד משתמש ב- useState הוק כדי לאתחל ולעדכן את משתני המצב: לעשות ו newTodo. ה addTodo הפונקציה מוסיפה מטלה חדשה לרשימת המשימות כאשר ערך הקלט אינו ריק, בעוד ה- מחק את Todo הפונקציה מסירה מטלה ספציפית מהרשימה על סמך האינדקס שלה.

כעת, כתוב את הקוד עבור רכיבי JSX המוצגים ב-DOM של הדפדפן.

לַחֲזוֹר (


 סוג="טֶקסט"
 className={styles.input}
 value={newTodo}
 data-testid="קלט מטלות"
 onChange={(e) => setNewTodo (e.target.value)}
 />
"הוסף מטלה">
 הוסף Todo
 </button>
"רשימת מטלות">
 {todos.map((לעשות, אינדקס) => (


 {לעשות}
 </li>
 ))}
 </ul>
 {todos.map((לעשות, אינדקס) => (


 onClick={() => deleteTodo (אינדקס)}
 className={styles.button}
 data-testid={`מחק-מטלה-${index}`}
 >
 לִמְחוֹק
 </button>
 </div>
 ))}
 </div>
 );}

כתיבת מקרי מבחן

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

בספריית השורש, צור חדש jest.config.js קוֹבֶץ. לאחר מכן, הוסף את הקוד הבא כדי להגדיר את Jest בהתאם:

const nextJest = לִדרוֹשׁ("הבא/צחוק");
const createJestConfig = nextJest({
 במאי: "./",
});
const customJestConfig = {
 ספריות מודול: ["מודולי_צומת", "/"],
 סביבה בדיקה: "צחוק-סביבה-jsdom",
};
מודול.exports = createJestConfig (customJestConfig);

לבסוף, פתח את ה package.json קובץ והוסף סקריפט חדש בשם מִבְחָן שיבצע את הפקודה בצחוק --watchAll להפעיל את כל מקרי הבדיקה ולצפות בכל שינוי.

לאחר ביצוע העדכון, הסקריפטים שלך צריכים להיראות כך:

"תסריטים": {
"מפתח": "המפתח הבא",
"לִבנוֹת": "הבנייה הבאה",
"הַתחָלָה": "ההתחלה הבאה",
"מוֹך": "המוך הבא",
"מִבְחָן": "צחוק --watchAll"
 },

עם התצורות במקום, המשך בכתיבה וביצוע בדיקות.

בדיקת אפליקציית המשימות Next.js עם Jest

בספריית השורש של הפרויקט, צור תיקיה חדשה בשם __מבחנים__. Jest יחפש קבצי בדיקה בתיקייה זו. בתוך תיקיה זו, צור קובץ חדש בשם index.test.js.

ראשית, בצע את הייבוא ​​הבא.

יְבוּא בית מ"../src/pages/index";
יְבוּא"@testing-library/jest-dom";
יְבוּא { fireEvent, render, screen, waitFor, act } מ"@testing-library/react";

כתוב מבחן כדי לראות אם כל הרכיבים מוצגים כהלכה:

לְתַאֵר("אפליקציית Todo", () => {
 זה("מציג את אפליקציית Todo", () => {
 לְדַקלֵם(<בית />);

 expect (screen.getByTestId("קלט מטלות")).toBeInTheDocument();
 expect (screen.getByTestId("הוסף מטלה")).toBeInTheDocument();
 });
});

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

לאחר מכן, הצהרות נעשות באמצעות ה לְצַפּוֹת פונקציה כדי להבטיח שאלמנטים ספציפיים עם מזהי בדיקה, כגון קלט מטלות נמצאים בפלט המעובד. אם הרכיבים הללו נמצאים ב-DOM, הבדיקה עוברת; אחרת, זה נכשל.

כעת, הפעל את הפקודה הבאה כדי לבצע את הבדיקה.

בדיקת הפעלת npm

אתה אמור לראות תגובה דומה אם המבחן יעבור.

בדיקת פעולות שונות וסימולציה של שגיאות

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

התחל בכתיבת מקרה הבדיקה עבור פונקציונליות הוסף מטלות.

 זה("מוסיף מטלה", אסינכרון () => {
 לְדַקלֵם(<בית />);

const todoInput = screen.getByTestId("קלט מטלות");
const addTodoButton = screen.getByTestId("הוסף מטלה");
const todoList = screen.getByTestId("רשימת מטלות");
לְהַמתִין פעולה(אסינכרון () => {
 fireEvent.change (todoInput, { יַעַד: { ערך: "טודו חדש" } });
 addTodoButton.click();
 });
לְהַמתִין לחכות ל(() => {
 expect (todoList).toHaveTextContent("טודו חדש");
 });
 });

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

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

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

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

לבסוף, כתוב את מקרה המבחן עבור פונקציונליות מחק מטלות.

 זה("מוחק מטלה", אסינכרון () => {
 לְדַקלֵם(<בית />);

const todoInput = screen.getByTestId("קלט מטלות");
const addTodoButton = screen.getByTestId("הוסף מטלה");

 fireEvent.change (todoInput, { יַעַד: { ערך: "מטלה 1" } });
 fireEvent.click (addTodoButton);

const deleteTodoButton = screen.getByTestId("מחק-מטלה-0");
 fireEvent.click (deleteTodoButton);

const todoList = screen.getByTestId("רשימת מטלות");
לְהַמתִין לחכות ל(() => {
 expect (todoList).toBeEmptyDOMElement();
 });
 });

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

בדיקת יחידות באמצעות Jest

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

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