next page tester

اختبار الصفحة التالية (تم إهمالها)

تم إهمال هذا المشروع

اتخذت Next.js دورة تطوير مما يجعل نهج الاختبار الذي اعتمدته هذه المكتبة عفا عليها الزمن. تقترح محفوظات اختبار الصفحة التالية استخدام اختبار المتصفح ، بدلاً من ذلك.

مقدمة

أداة اختبار تكامل DOM المفقودة لـ NEXT.JS.

بالنظر إلى مسار Next.js ، ستقوم هذه المكتبة بتقديم الصفحة المطابقة في JSDOM ، المقدمة مع الدعائم المتوقعة المستمدة من نظام توجيه NEXT.JS وطرق جلب البيانات .

 import { getPage } from 'next-page-tester' ;
import { screen , fireEvent } from '@testing-library/react' ;

describe ( 'Blog page' , ( ) => {
  it ( 'renders blog page' , async ( ) => {
    const { render } = await getPage ( {
      route : '/blog/1' ,
    } ) ;

    render ( ) ;
    expect ( screen . getByText ( 'Blog' ) ) . toBeInTheDocument ( ) ;

    fireEvent . click ( screen . getByText ( 'Link' ) ) ;
    await screen . findByText ( 'Linked page' ) ;
  } ) ;
} ) ; 

جدول المحتويات

• ماذا
• API
• خيارات
• إعداد بيئة DEV الخاصة بك
• أمثلة
• Next.js دعم الإصدارات
• التعليمات

ماذا

تتمثل الفكرة وراء هذه المكتبة في التكاثر بأكبر قدر ممكن من الطريقة التي تعمل بها.

من أجل توفير تجربة اختبار قيمة تكرر تدفق التقديم لتطبيق next.js الفعلي next-page-tester js:

1. جلب البيانات لمسار معين
2. جعل النتيجة المقدمة من جانب الخادم إلى JSDOD كـ HTML عادي (بما في ذلك عنصر head )
3. تركيب/ترطيب تطبيق العميل على HTML المقدمة مسبقًا

التطبيق المثبت التفاعلي ويمكن اختباره مع أي مكتبة اختبار DOM (مثل @testing-library/react ).

ستعتني next-page-tester بـ:

• تحميل وحدات تنفيذ في بيئات المتصفح أو الخادم المتوقع
• حل المسارات المقدمة في مكون صفحة مطابقة
• استدعاء طرق جلب بيانات next.js ( getServerSideProps أو getInitialProps أو getStaticProps ) إذا كانت الحالة
• صفحة التفاف بمكونات مخصصة _app و _document
• محاكاة التنقل الجانبي للعميل عبر Link ، router.push ، router.replace
• معالجة عائدات الصفحات redirect
• دعم next/router ، next/head ، next/link ، next/config and Environm.

API

getPage

يقبل getPage كائن خيار ويقوم بإرجاع 4 قيم:

 import { getPage } from 'next-page-tester' ;

const { render , serverRender , serverRenderToString , page } = await getPage ( {
  options ,
} ) ;

يجعل()

اكتب: () => { nextRoot: HTMLElement<NextRoot> }
إرجاع: عنصر عنصر الجذر #__next .

ما لم يكن لديك حالة استخدام متقدمة ، فيجب عليك استخدام هذه الطريقة في الغالب. تحت الغطاء ، يستدعي serverRender() ثم يتصاعد/ترطيب تطبيق React في عنصر جذر JSDOM #__next . هذا هو ما سيحصل عليه المستخدمون/يرون عند زيارة صفحة.

ServerRender ()

اكتب: () => { nextRoot: HTMLElement<NextRoot> }
إرجاع: عنصر عنصر الجذر #__next .

حقن إخراج جانب الخادم الذي يقدمه في DOM ولكنه لا يركض. استخدمه لاختبار كيفية تقدم Next.js في السيناريوهات التالية:

• قبل رد الفعل يتصاعد
• عندما يتم تعطيل JS
• اختبارات كبار المسئولين الاقتصاديين

ServerRenderToString ()

اكتب: () => { html: string }

جعل الإخراج من جانب الخادم تقديم كسلسلة HTML. هذه طريقة نقية بدون آثار جانبية.

صفحة

النوع: React.ReactElement<AppElement>

رد فعل عنصر التطبيق.

خيارات

ملكية	وصف	يكتب	تقصير
الطريق (إلزامي)	المسار التالي (يجب أن يبدأ مع / )	string	-
Req	تعزيز كائن الطلب الافتراضي السخرية	req => req	-
الدقة	يعزز كائن الاستجابة الافتراضي المهذب	res => res	-
جهاز التوجيه	تعزيز كائن جهاز التوجيه التالي الافتراضي	router => router	-
useapp	عرض مكون التطبيق المخصص	boolean	true
المستخدمة (تجريبي. معاق مؤقتًا بسبب هذه المشكلة)	عرض مكون المستند	boolean	false
nextroot	مسار المطلق إلى مجلد جذر Next.js	string	اكتشاف السيارات
dotenvfile	المسار النسبي إلى .env	string	-
أغلفة	مسار المطلق إلى ملف الأغلفة. مفيد لتزيين شجرة المكون مع مقدمي الخدمات.	string	-
المشاركين	قائمة الوحدات النمطية التي يجب أن تحافظ على الهوية بين سياق العميل والخادم.	string[]	[]

إعداد بيئة DEV الخاصة بك

التعامل مع الواردات الخاصة

إذا لم يتم التعامل مع أنواع الملفات/المكونات الخاصة بك عن طريق Node.js (مثل أوراق الأنماط ، الصور ، .svg ، ...) ، فيجب عليك تكوين بيئة الاختبار الخاصة بك لمعالجةها بشكل صحيح. على سبيل المثال ، في حالة Jest ، قد ترغب في تكوين بعض moduleNameMapper .

إعداد بيئة JSDOM

تتوقع next-page-tester أن تصادف بيئة JSDOM. إذا كنت تستخدم Jest إضافة هذا السطر إلى تكوين jest الخاص بك:

 "testEnvironment" : "jsdom" ,

تخطي تنظيف السيارات وتهيئة المساعدين

نظرًا لأن next.js غير مصمم لتشغيله في بيئة JSDOM ، نحتاج إلى إعداد JSDOM الافتراضي للسماح بتجربة اختبار أكثر سلاسة. بشكل افتراضي ، سوف next-page-tester :

• توفير window.scrollTo IntersectionObserver
• تنظيف دوم بعد كل اختبار
• إعداد Jest للحفاظ على هوية بعض الوحدات المحددة بين "الخادم" وتنفيذ "العميل"

ومع ذلك ، يمكنك اختيار تخطي تهيئة التنظيف التلقائي والمساعدين عن طريق تعيين متغير NPT_SKIP_AUTO_SETUP ENV إلى true . يمكنك القيام بذلك باستخدام cross-env مثل:

 cross - env NPT_SKIP_AUTO_SETUP = true jest

اختياري: ترقيع Jest V26

إذا كنت تستخدم Jest V26 ، فقد تحتاج إلى تصحيحه من أجل تحميل الوحدات النمطية باستخدام بيئات الخادم/العميل المناسبة. سوف تستهدف جهود الصيانة أحدث إصدار من الدعابة.

أمثلة

ضمن مجلد الأمثلة ، نقوم بتوثيق حالات الاختبار التي تتيحها next-page-tester .

Next.js دعم الإصدارات

يركز- next-page-tester على دعم الإصدار الأخير فقط من Next.js و Jest:

الصفحة التالية-تستر	Next.js	مزاح
V0.1.0 -> V0.7.0	V9.xx	v26.xx
V0.8.0 -> V0.22.0	V10.0.0 -> V10.0.7
V0.23.0 -> V0.25.x	v10.0.8 -> v11.0.x
v0.26.0 -> v0.27.x	v10.0.8 -> v11.0.x	v27.xx
v0.28.0 -> v0.28.x	v11.1.0
v0.29.0 +	v11.1.1 -> v11.x
v0.31.0 +	v12.1.0
v0.32.0 +	v12.1.1 +

منذ:

• هذا المشروع غير مدعوم من قبل فريق Next.js
• يعتمد هذا المشروع على عدد قليل من المقاطع الداخلية التي يمكن أن تتغير دون إشعار في أي إصدار

يرجى ملاحظة أنه لا يمكننا ضمان دعم الإصدارات المستقبلية من Next.js خارج الصندوق. حتى التصحيح أو الإصدارات البسيطة يمكن أن تنكسر. في هذه الحالة ، سيتعين عليك انتظار إصدار إصدار جديد next-page-tester .

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

ملحوظات

• يتم استياء كائنات req و res في سياق جلب البيانات باستخدام Mocks-HTTP Node Mocks
• تم تصميم اختبار الصفحة التالية ليتم استخدامه مع أي إطار عمل/مكتبة اختبار ولكن يتم اختباره حاليًا فقط مع مكتبة Jest واختبار. لا تتردد في فتح مشكلة إذا واجهت مشاكل مع إعدادات مختلفة
• قد يكون من الضروري تثبيت @types/react-dom و @types/webpack عند استخدام TypeScript في وضع strict بسبب هذا الخطأ

خيار useDocument

يتم تنفيذ خيار useDocument جزئيًا وقد يكون غير مستقر.

التعليمات

كيف أسخر من مكالمات واجهة برمجة التطبيقات في أساليب جلب البيانات الخاصة بي؟

تتكون الطريقة الأولى المقترحة لسخرية طلبات الشبكة ، من السخرية من طبقة الشبكة مع مكتبات مثل Mock service worker و Mirage JS .

قد يتكون نهج آخر قابل للتطبيق من سخرية كائن fetch العالمي مع مكتبات مثل fetch-mock .

في حال كنت ترغب في اتباع نهج أكثر تقليدية يتضمن سخرًا من وحدات أراضي المستخدم المسؤولة عن جلب البيانات ، فأنت بحاجة إلى النظر في خطوة إضافية: نظرًا لأن وحدات عزل next-page-tester بين "العميل" وتقديم "الخادم" ، لن يتم تنفيذ تلك النماذج التي يتم إنشاؤها في الاختبارات (سياق العميل) في سياق الخادم (مثل طرق تجميع البيانات).

للتغلب على ذلك ، نحتاج إلى "تشويش" مثل هذه الوحدات (الحفاظ على/مشاركة) هويتها بين سياق "العميل" و "الخادم" من خلال تمريرها من خلال خيار sharedModules .

 test ( 'as a user I want to mock a module in client & server environment' , async ( ) => {
  const stub = jest . spyOn ( api , 'getData' ) . mockReturnValue ( Promise . resolve ( 'data' ) )

  const { render } = await getPage ( {
    route : '/page' ,
    nextRoot ,
    sharedModules : [ ` ${ process . cwd ( ) } /src/path/to/my/module` ] ,
  } ) ;

  expect ( stub ) . toHaveBeenCalledTimes ( 1 ) ; // this was executed in your data fetching method
}

كيف يمكنني إتاحة ملفات تعريف الارتباط في NEXT.JS بيانات جلب؟

يمكنك ضبط ملفات تعريف الارتباط عن طريق إلحاقها على document.cookie قبل الاتصال getPage . ستنشر next-page-tester ملفات تعريف الارتباط إلى ctx.req.headers.cookie بحيث تكون متاحة لطرق جلب البيانات. ينطبق هذا أيضًا على أساليب الجلب اللاحقة المكالمات الناتجة عن التنقل من جانب العميل.

 test ( 'authenticated page' , async ( ) => {
  document . cookie = 'SessionId=super=secret' ;
  document . cookie = 'SomeOtherCookie=SomeOtherValue' ;

  const { render } = await getPage ( {
    route : '/authenticated' ,
  } ) ;
  render ( ) ;
} ) ;

ملاحظة: لا يتم تنظيف document.cookie تلقائيًا. سيتعين عليك مسحه يدويًا بعد كل اختبار للحفاظ على كل شيء في عزلة.

خطأ: لم يتم تنفيذه: window.scrollto

Next.js Link Component يستدعي window.scrollTo عند النقر الذي لم يتم تنفيذه في بيئة JSDOM. لإصلاح الخطأ ، يجب عليك إعداد بيئة الاختبار أو توفير window.scrollTo خاصة بك.

تحذير: محتوى النص لا يتطابق. الخادم: خطأ "X": "y" خطأ

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

خطأ: مرجعية: الجلب غير محدد

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

تودو

• فكر في إعادة استخدام أجزاء رمز jext.js (وليس فقط الأنواع)
• النظر في دعم خيار Next.js trailingSlash
• عرض صفحة مخصصة _error
• تقديم خيار debug لتسجيل معلومات التنفيذ

المساهمين

شكراً لهؤلاء الأشخاص الرائعين (مفتاح الرموز التعبيرية):

أندريا كارارو ؟ ️ ؟	matej šnuderl ؟ ️ ؟ ؟	جيسون ويليامز ؟	Arelaxend ؟	الكفازيين ؟	Tomasz Rondio ؟	ألكساندر منديز
جان سيبك ؟	Davidorchard ؟	دواء إسماعيل ؟	أندرو هيرل ؟	ماسميدودو سونيك ؟	جيس تيلفورد ؟	جوزيف ؟
جيرجو تولاي ؟	بريت ؟	فلاد الإلاجين	دانييل ستوكمان	صنعت	الدكتور ديريك أوستن ؟	Feargal ؟
جان آر ؟	Otávio Augusto Soares ؟

يتبع هذا المشروع مواصفات جميع المساهمين. مساهمات من أي نوع ترحيب!