Download next page tester - next page tester Quellcode herunterladen

next page tester

AI-Quellcode

1.0.0

Herunterladen

NÄCHSTER Seitentester (veraltet)

Dieses Projekt ist veraltet

NEXT.JS nahm einen Entwicklungskurs ab, wodurch der von dieser Bibliothek verfolgte Testansatz veraltet ist. Nächste Seitentester -Wartungsprüfer empfehlen stattdessen Browser -Tests.

Intro

Das fehlende DOM -Integrationstest -Tool für Next.js.

In dieser Bibliothek wird die Matching -Seite in JSDOM mit den erwarteten Requisiten aus dem Routing -System und den Datenabrufmethoden von Next.js enthält.

 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' ) ;
  } ) ;
} ) ;

Inhaltsverzeichnis

Was
API
Optionen
Einrichten Ihrer Entwicklerumgebung
Beispiele
NEXT.JS -Versionen Unterstützung
FAQ

Was

Die Idee hinter dieser Bibliothek ist es, so genau wie möglich zu reproduzieren, wie es als nächstes funktioniert. Js funktioniert, ohne Server zu spinnen, und die Ausgabe in einer lokalen JSDOM -Umgebung zu rendern.

Um eine wertvolle Testerfahrung next-page-tester zu bieten, reproduziert der Rendering-Fluss einer tatsächlichen next.js -Anwendung :

Daten für eine bestimmte Route abrufen
Rendern Sie das serverseitige Ergebnis von JSDOM als einfaches HTML (einschließlich head ).
montieren/hydratieren Sie die Client -Anwendung auf das zuvor gerenderte HTML

Die montierte Anwendung ist interaktiv und kann mit jeder DOM-Testbibliothek getestet werden (wie @testing-library/react ).

next-page-tester kümmert sich um:

Laden und Ausführen von Modulen in den erwarteten Browser- oder Serverumgebungen
Lösen Sie die Bereitstellung von Routen in die Seitenkomponente zur Übereinstimmung
Rufen Sie die Methoden zum Abheben von Daten ( getServerSideProps , getInitialProps oder getStaticProps ) an, wenn der Fall
Wickelseite mit benutzerdefinierten _app und _document
Emulierung der Client -Seitennavigation über Link , router.push , router.replace
Umleitungen der Seiten der Seiten redirect zurück
Unterstützung von next/router , next/head , next/link , next/config und Umgebungsvariablen

API

Getpage

getPage akzeptiert ein Optionsobjekt und gibt 4 Werte zurück:

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

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

machen()

Typ: () => { nextRoot: HTMLElement<NextRoot> }
Gibt zurück: #__next Root Element Element.

Wenn Sie nicht über einen erweiterten Anwendungsfall verfügen, sollten Sie diese Methode meistens anwenden. Unter der Motorhaube ruft es serverRender() auf und montiert/hydratiert die React -Anwendung in JSDOM #__next Root -Element. Dies ist, was Benutzer beim Besuch einer Seite bekommen/sehen würden.

serverrender ()

Typ: () => { nextRoot: HTMLElement<NextRoot> }
Gibt zurück: #__next Root Element Element.

Injizieren Sie die Ausgabe der Serverseite in das DOM, reagieren jedoch nicht. Verwenden Sie es, um zu testen, wie Next.js in den folgenden Szenarien rendert:

Vor dem Reagieren des Reittierens
Wenn JS deaktiviert ist
SEO -Tests

serverrendertostring ()

Typ: () => { html: string }

Rendern Sie die Ausgabe der Serverseite als HTML -Zeichenfolge. Dies ist eine reine Methode ohne Nebenwirkungen.

Seite

Typ: React.ReactElement<AppElement>

Reagieren Sie Element der Anwendung.

Optionen

Eigentum	Beschreibung	Typ	Standard
Route (obligatorisch)	Nächste Route (muss mit `/` ) beginnen	`string`	- -
Req	Verbessern Sie das verspottete Anforderungsobjekt aus dem Standard	`req => req`	- -
res	Verbessern Sie das verspottete Antwortobjekt aus dem Standard	`res => res`	- -
Router	Verbessern Sie den Standard -Router -Objekt aus Standardverspottet	`router => router`	- -
Usapp	Benutzerdefinierte App -Komponente rendern	`boolean`	`true`
~~Gebrauchtanschluss~~ (experimentell. Aufgrund dieses Problems vorübergehend deaktiviert)	Dokumentkomponente rendern	`boolean`	`false`
Nextroot	Absoluter Pfad zum nächsten.js Root -Ordner	`string`	automatisch erkannt
dotenvfile	Relativer Weg zu einer `.env` -Datei -Holding -Umgebungsvariablen	`string`	- -
Wrapper	Absolute Pfad zur Wrappers -Datei. Nützlich, um den Komponentenbaum mit verspotteten Anbietern zu dekorieren.	`string`	- -
SharedModules	Liste der Module, die die Identität zwischen Client- und Serverkontext bewahren sollten.	`string[]`	[]

Einrichten Ihrer Entwicklerumgebung

Umgang mit besonderen Importen

Wenn Ihre Seiten/Komponenten Dateitypen importieren, die nicht von Node.js (wie Stilblätter, Bilder, .svg , ...) nicht behandelt werden, sollten Sie Ihre Testumgebung so konfigurieren, dass sie sie ordnungsgemäß verarbeiten. ZB im Falle eines Scherzes möchten Sie möglicherweise einige moduleNameMapper konfigurieren.

Setup JSDOM -Umgebung

next-page-tester erwartet, dass er in eine JSDOM-Umgebung trifft. Wenn Sie Scherz verwenden, fügen Sie diese Zeile Ihrer jest hinzu:

 "testEnvironment" : "jsdom" ,

Überspringen Sie die automatische Reinigung und Helfer -Initialisierung

Da Next.js nicht in einer JSDOM -Umgebung ausgelegt ist, müssen wir das Standard -JSDOM einrichten, um ein reibungsloseres Testerlebnis zu ermöglichen. Standardmäßig wird next-page-tester :

Geben Sie window.scrollTo IntersectionObserver .
Reinigen Sie DOM nach jedem Test
Setzen Sie einen Scherz ein, um die Identität einiger spezifischer Module zwischen "Server" und "Client" auszuführen

Sie können jedoch die automatische Reinigung und die Initialisierung der Helfer überspringen, indem Sie die Variable NPT_SKIP_AUTO_SETUP auf true einstellen. Sie können dies mit cross-env -Like tun:

 cross - env NPT_SKIP_AUTO_SETUP = true jest

Optional: Patch -Scherz V26

Wenn Sie Scherz V26 verwenden, müssen Sie es möglicherweise pflücken, um Module mit geeigneten Server-/Client -Umgebungen zu laden. Die Wartungsbemühungen richten sich an die neueste Scherzversion.

Beispiele

Unter Beispiele-Ordner dokumentieren wir die Testfälle, die next-page-tester ermöglicht.

NEXT.JS -Versionen Unterstützung

next-page-tester konzentriert sich darauf, nur die letzte Version von Next.js und Scherz zu unterstützen:

Nächstes-Page-Tester	Weiter.js	Scherz
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 +

Seit:

Dieses Projekt wird vom Next.js -Team nicht unterstützt
Dieses Projekt stützt sich auf einige Next.js -Interna, die sich in jeder Version ohne Vorankündigung ändern können

Bitte beachten Sie, dass wir die Unterstützung für zukünftige Versionen von Next.js nicht garantieren können. Sogar Patch oder kleinere Versionen könnten brechen. In diesem Fall müssen Sie darauf warten, dass eine neue Version next-page-tester veröffentlichen wird.

Beiträge sind sehr willkommen und wir tun unser Bestes, um externe Mitwirkende zu unterstützen.

Notizen

Der Kontext der req und res Objekte werden mit Node-Mocks-Http verspottet
Der nächste Seiten -Tester ist so konzipiert, dass er mit jedem Test -Framework/-bibliothek verwendet werden soll. Derzeit wird es nur mit Scherz- und Testbibliothek getestet. Fühlen Sie sich frei, ein Problem zu eröffnen, wenn Sie Probleme mit verschiedenen Setups hatten
Es ist möglicherweise erforderlich @types/react-dom und @types/webpack zu installieren, wenn Sie den TypeScript im strict Modus verwenden, aufgrund dieses Fehlers

Experimentelles `useDocument`

Die Option useDocument ist teilweise implementiert und kann instabil sein.

FAQ

Wie verspottete ich API -Aufrufe in meinen Datenabrufenmethoden?

Der erste vorgeschlagene Weg, um Netzwerkanfragen zu verspotten, besteht aus der Verspottung in der Netzwerkschicht mit Bibliotheken wie Mock service worker und Mirage JS .

Ein weiterer praktikabler Ansatz könnte darin bestehen, das globale fetch Objekt mit Bibliotheken wie fetch-mock zu verspotten.

Falls Sie einen traditionelleren Ansatz wünschen, bei dem die Benutzer Landmodule verspottet werden, die für das Abrufen von Daten verantwortlich sind, müssen Sie einen zusätzlichen Schritt in Betracht ziehen: Da next-page-tester Module zwischen "Client" und "Server" -Rendern isoliert, werden die in Tests erstellten Mocks (z. B. Datenerziehungsmethoden) nicht ausgeführt.

Um dies zu überwinden, müssen wir solche Module "verdichten", um ihre Identität zwischen "Client" und "Server" -Kontext zu erhalten/zu teilen), indem wir sie über die Option sharedModules weitergeben.

 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
}

Wie mache ich Cookies in Next.js Data Abrufmethoden verfügbar?

Sie können Cookies festlegen, indem Sie sie an document.cookie anhängen, bevor Sie getPage anrufen. next-page-tester wird Cookies an ctx.req.headers.cookie ausbreiten, damit sie den Datenabrufmethoden zur Verfügung stehen. Dies gilt auch für nachfolgende Abfassungsmethodenaufrufe, die durch die Client -Seitennavigation ausgelöst werden.

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

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

Hinweis: document.cookie wird nicht automatisch aufgeräumt. Sie müssen es nach jedem Test manuell klären, um alles isoliert zu halten.

Fehler: Nicht implementiert: Fenster.Scrollto

NEXT.JS Link -Komponente ruft window.scrollTo auf. Um den Fehler zu beheben, sollten Sie Ihre Testumgebung einrichten oder Ihr eigenes window.scrollTo angeben.

Warnung: Textinhalt stimmte nicht überein. Server: "X" Client: "y" Fehler

Diese Warnung bedeutet, dass Ihre Seite zwischen Server und Browser anders macht. Dies kann ein erwartetes Verhalten sein oder einen Fehler in Ihrem Code signalisieren.

Fehler: ReferenzError: Fetch ist nicht definiert

Diese Warnung bedeutet, dass Ihre Anwendung während des Rendering -Prozesses einige nicht verspottete Netzwerkanforderungen durchführt. Sie sollten sie finden und nach Bedarf verspotten.

Todo's

Erwägen Sie, Next.js Code -Teile wiederzuverwenden (nicht nur Typen)
Erwägen Sie die Unterstützung von Next.js trailingSlash -Option
_error Seite rendern
Geben Sie eine debug -Option zur Protokollierung von Ausführungsinformationen an

Mitwirkende

Vielen Dank an diese wunderbaren Menschen (Emoji -Schlüssel):

_{Andrea Carraro} ? Euen ?	_{Matej Šnuderl} ? Euen ? ?	_{Jason Williams} ?	_Arelaxend ?	_Kfazinic ?	_{Tomasz Rondio} ?	_{Alexander Mendes}
_{Jan Sepke} ?	_Davidorchard ?	_{Doaa ismael} ?	_{Andrew Hurle} ?	_{Massimeddu-sonic} ?	_{Jess Telford} ?	_Joseph ?
_{Gergo Tolnai} ?	_Brett ?	_{Vlad Elagin}	_{Daniel Stockman}	_Madeuz	_{Dr. Derek Austin} ?	_Feargal ?
_{Jan R. Biasi} ?	_{Otávio Augusto steigt} ?