كيفية اختبار تطبيقات Next.js باستخدام Jest

الهدف الأساسي لأي عملية تطوير هو بناء تطبيقات جاهزة للإنتاج. لتحقيق ذلك ، من الضروري كتابة رمز لا يفي بالمتطلبات الوظيفية فحسب ، بل يظل ثابتًا وموثوقًا به بمرور الوقت. يعمل الاختبار كإجراء وقائي ، مما يضمن عمل التطبيقات كما هو متوقع حتى مع إجراء تحديثات جديدة أثناء التطوير.

بينما قد تستغرق كتابة الاختبارات الشاملة التي تشمل حالات الحافة المختلفة وقتًا طويلاً ، إلا أنها تساعد في تحديد المشكلات وحلها قبل أن تصل إلى بيئات الإنتاج.

اختبار تطبيقات Next.js

تعد اختبارات الكتابة جانبًا أساسيًا وغالبًا ما يتم التقليل من شأنه في تطوير تطبيقات قوية. من السهل الوقوع في إغراء رمز الشحن مباشرة للإنتاج ، بالاعتماد على الاعتقاد بأنك "أنت من تأليف الكود ، لذا يجب أن يعمل!"

ومع ذلك ، يمكن أن يؤدي هذا النهج إلى مشاكل وأخطاء غير متوقعة في بيئات الإنتاج. نتيجة لذلك ، يمكن أن يساعد اعتماد نهج التطوير المستند إلى الاختبار (TDD) في زيادة ثقتك في التعليمات البرمجية وتقليل الوقت الذي تقضيه تصحيح الأخطاء الطفيفة وحلها التي كان من الممكن أن تنزلق إلى الإنتاج.

ما هي الدعابة؟

دعابة هو إطار اختبار شائع يستخدم على نطاق واسع بواسطة مختلف أطر عمل جافا سكريبت. يوفر مجموعة من ميزات الاختبار مثل عداء اختبار قوي ، والسخرية التلقائية ، واختبار اللقطة.

من الناحية المثالية ، تكون هذه الميزات مفيدة في تحقيق تغطية اختبار شاملة وضمان موثوقية تطبيقك أنواع مختلفة من الاختبارات.

قم بإنشاء تطبيق Next.js To-Do

الآن ، دعنا نتعمق في عملية تشغيل اختبارات الوحدة على تطبيق Next.js باستخدام Jest. ومع ذلك ، قبل أن تبدأ ، أنشئ مشروع Next.js وثبّت التبعيات المطلوبة.

للبدء ، اتبع الخطوات التالية:

1. أنشئ مشروع Next.js جديدًا عن طريق تشغيل الأمر التالي في جهازك الطرفي:

   npx create-next-app @ latest test-tutorial

2. بعد إنشاء المشروع ، انتقل إلى دليل المشروع عن طريق تشغيل:

   cd nextjs-test-tutorial

3. تثبيت التبعيات اللازمة مثل devDependencies عن طريق تشغيل الأمر التالي:

   npm install npm install - save-dev jest @ testing-library / رد فعل @ test-library / jest-dom jest-environment-jsdom

مع إعداد المشروع وتثبيت التبعيات ، أنت الآن جاهز لإنشاء تطبيق Next.js وكتابة اختبارات الوحدة باستخدام Jest.

قم بإنشاء مكون المهام الواجبة

في ال /src دليل المشروع ، افتح ملف الصفحات / index.js ملف ، احذف رمز boilerplate Next.js الحالي ، وأضف الكود التالي.

أولاً ، قم بإجراء عمليات الاستيراد التالية وحدد وظيفتين ستديران مهام المستخدم: addTodo وظيفة و حذف وظيفة.

يستورد {useState} من"تتفاعل";
يستورد الأنماط من"../styles/Home.module.css";
يصدّرتقصيروظيفةبيت() {
مقدار ثابت [todos، setTodos] = useState ([]) ؛
مقدار ثابت [newTodo، setNewTodo] = useState ("");
مقدار ثابت addTodo = () => {
لو (newTodo.trim ()! == "") {
مقدار ثابت updatedTodos = [... todos، newTodo] ؛
 setTodos (updatedTodos) ،
 setNewTodo ("");
 }
 };
مقدار ثابت deleteTodo = (فِهرِس) => {
مقدار ثابت updatedTodos = [... todos] ،
 updatedTodos.splice (الفهرس ، 1);
 setTodos (updatedTodos) ،
 };

يستخدم الكود الامتداد useState ربط لتهيئة وتحديث متغيرات الحالة: تودوس و newTodo. ال addTodo تضيف الوظيفة To-Do جديدًا إلى قائمة المهام عندما لا تكون قيمة الإدخال فارغة ، في حين أن ملف حذف تعمل الوظيفة على إزالة مهام محددة من القائمة بناءً على فهرسها.

الآن ، اكتب الكود الخاص بعناصر JSX المعروضة على DOM بالمتصفح.

يعود (


 اكتب ="نص"
 className = {styles.input}
 القيمة = {newTodo}
 اختبار البيانات ="todo-input"
 onChange = {(e) => setNewTodo (e.target.value)}
 />
"add-todo">
 أضف Todo
 </button>
"عمل قائمة">
 {todos.map ((todo ، index) => (


 {لكى يفعل}
 </li>
 ))}
 </ul>
 {todos.map ((todo ، index) => (


 onClick = {() => deleteTodo (index)}
 className = {styles.button}
 data-testid = {حذف-todo-$ {index}`}
 >
 يمسح
 </button>
 </div>
 ))}
 </div>
 );}

كتابة حالات الاختبار

قبل أن تبدأ في كتابة حالات الاختبار ، من الضروري تكوين Jest وفقًا لمتطلبات الاختبار الخاصة بك. يتضمن هذا إنشاء وتخصيص ملف jest.config.js ملف ، والذي يعمل كأساس لإعداد الاختبار الخاص بك.

في الدليل الجذر ، قم بإنشاء ملف jest.config.js ملف. بعد ذلك ، أضف الكود التالي لتهيئة Jest وفقًا لذلك:

مقدار ثابت nextJest = يتطلب("التالي / دعابة");
مقدار ثابت createJestConfig = nextJest ({
 دير: "./",
});
مقدار ثابت customJestConfig = {
 وحدة الدلائل: ["node_modules", "/"],
 اختبار البيئة: "jest-environment-jsdom",
};
وحدة.exports = createJestConfig (customJestConfig) ،

أخيرًا ، افتح ملف package.json ملف وإضافة نص جديد يسمى امتحان من شأنها تنفيذ الأمر دعابة - مشاهدة الكل لتشغيل جميع حالات الاختبار ومراقبة أي تغييرات.

بعد إجراء التحديث ، يجب أن تبدو البرامج النصية الخاصة بك كما يلي:

"نصوص": {
"ديف": "المطور التالي",
"يبني": "البناء التالي",
"يبدأ": "البداية التالية",
"لينت": "الوبر التالي",
"امتحان": "jest - مشاهدة الكل"
 },

مع وجود التكوينات في مكانها الصحيح ، تابع كتابة الاختبارات وتنفيذها.

اختبار تطبيق Next.js To-Do بدعابة

في الدليل الجذر للمشروع ، قم بإنشاء مجلد جديد يسمى __الاختبارات__. سيبحث Jest عن ملفات الاختبار في هذا المجلد. داخل هذا المجلد ، قم بإنشاء ملف جديد يسمى index.test.js.

أولاً ، قم بإجراء عمليات الاستيراد التالية.

يستورد بيت من"../src/pages/index";
يستورد"@ test-library / jest-dom";
يستورد {fireEvent، render، screen، waitFor، act} من"@ test-library / رد فعل";

اكتب اختبارًا لمعرفة ما إذا كانت جميع العناصر يتم عرضها بشكل صحيح:

يصف("تطبيق Todo", () => {
 هو - هي("يعرض تطبيق todo", () => {
 يجعل(<بيت />);

 توقع (screen.getByTestId ("todo-input")). toBeInTheDocument () ؛
 توقع (screen.getByTestId ("add-todo")). toBeInTheDocument () ؛
 });
});

تتحقق حالة الاختبار من عرض تطبيق To-Do وعناصره بشكل صحيح. داخل حالة الاختبار ، بيت المكون باستخدام يجعل وظيفة من مكتبة الاختبار.

بعد ذلك ، يتم إجراء التأكيدات باستخدام يتوقع للتأكد من أن العناصر المحددة مع معرفات الاختبار ، مثل ما يجب عمله موجودة في الإخراج المقدم. إذا تم العثور على هذه العناصر في DOM ، ينجح الاختبار ؛ وإلا فإنه يفشل.

الآن ، قم بتشغيل الأمر التالي لتنفيذ الاختبار.

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

يجب أن ترى استجابة مماثلة إذا نجح الاختبار.

اختبار الإجراءات المختلفة ومحاكاة الأخطاء

قم بوصف حالات الاختبار هذه للتحقق من وظائف ميزة إضافة المهام وحذف المهام.

ابدأ بكتابة حالة الاختبار لوظيفة Add To-Do.

 هو - هي("تضيف ما يجب عمله", غير متزامن () => {
 يجعل(<بيت />);

مقدار ثابت todoInput = screen.getByTestId ("todo-input");
مقدار ثابت addTodoButton = screen.getByTestId ("add-todo");
مقدار ثابت todoList = screen.getByTestId ("عمل قائمة");
انتظر يمثل(غير متزامن () => {
 fireEvent.change (todoInput، { هدف: { قيمة: "تودو الجديدة" } });
 addTodoButton.click () ،
 });
انتظر أنتظر لأجل(() => {
 توقع (todoList). toHaveTextContent ("تودو الجديدة");
 });
 });

يحاكي مقتطف الشفرة أعلاه تفاعل المستخدم عن طريق الكتابة في حقل الإدخال والنقر فوق الزر "إضافة". بعد ذلك ، باستخدام قيمة إدخال To-Do وهمية ، يتحقق من إضافة قيمة الإدخال بنجاح إلى قائمة المهام.

احفظ الملف وتحقق من المحطة. يجب إعادة تشغيل الاختبار تلقائيًا وتسجيل الخروج بنتائج اختبار مماثلة.

لمحاكاة خطأ اختبار ، قم بتعديل معرف اختبار زر الإضافة وأعد تشغيل الاختبار. مع هذا التحديث ، يجب أن يفشل الاختبار وتسجيل الخروج رسالة خطأ تشير إلى الخطأ المحدد الذي تمت مواجهته.

من الناحية المثالية ، في قاعدة بيانات أكبر مع العديد من المساهمين الذين يقومون بإجراء تغييرات متكررة ، يلعب الاختبار دورًا مهمًا في تحديد الأخطاء المحتملة التي قد تؤدي إلى فشل النظام. عن طريق الاختبار ، يمكنك بسهولة تحديد التناقضات ، مثل تلك الموضحة أعلاه ، وحلها أثناء التطوير.

أخيرًا ، اكتب حالة الاختبار لوظيفة Delete To-Do.

 هو - هي("يحذف مهمة", غير متزامن () => {
 يجعل(<بيت />);

مقدار ثابت todoInput = screen.getByTestId ("todo-input");
مقدار ثابت addTodoButton = screen.getByTestId ("add-todo");

 fireEvent.change (todoInput، { هدف: { قيمة: "Todo 1" } });
 fireEvent.click (addTodoButton) ؛

مقدار ثابت deleteTodoButton = screen.getByTestId ("حذف-todo-0");
 fireEvent.click (deleteTodoButton) ؛

مقدار ثابت todoList = screen.getByTestId ("عمل قائمة");
انتظر أنتظر لأجل(() => {
 توقع (todoList) .toBeEmptyDOMElement () ،
 });
 });

مرة أخرى ، يتحقق مما إذا تم حذف المهام بنجاح. احفظ الملف لتنفيذ الاختبار.

اختبار الوحدة باستخدام الدعابة

زودك هذا الدليل بالمعرفة اللازمة لكتابة وتنفيذ اختبارات وحدة بسيطة ، باستخدام مكون المهام الواجبة كمثال. لضمان استقرار وموثوقية الميزات الأساسية لتطبيقك وتقليل فرص مشاكل غير متوقعة في بيئات الإنتاج ، من المهم إعطاء الأولوية لاختبارات الكتابة لمفتاحك عناصر.

علاوة على ذلك ، يمكنك تحسين نهج الاختبار الخاص بك من خلال دمج اختبارات اللقطة والاختبارات الشاملة.