Beranda>Terkait pemrograman>Kode Sumber AI
Unduh

Penguji halaman berikutnya (sudah usang)

Proyek ini sudah usang

Next.js mengambil kursus pengembangan yang membuat pendekatan pengujian diadopsi oleh perpustakaan ini usang. Pengusaha penguji halaman berikutnya menyarankan untuk menggunakan pengujian browser, sebagai gantinya.

Intro

Alat Pengujian Integrasi DOM yang hilang untuk Next.js.

Diberi rute Next.js, perpustakaan ini akan membuat halaman pencocokan di JSDOM , disediakan dengan alat peraga yang diharapkan yang berasal dari sistem perutean selanjutnya. JS dan metode pengambilan data . 

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

Daftar isi

  • Apa
  • API
  • Opsi
  • Menyiapkan Lingkungan Dev Anda
  • Contoh
  • Dukungan Versi Next.js
  • FAQ

Apa

Gagasan di balik perpustakaan ini adalah untuk mereproduksi sedekat mungkin dengan cara selanjutnya. JS bekerja tanpa memutar server, dan membuat output di lingkungan JSDOM lokal.

Untuk memberikan pengalaman pengujian yang berharga next-page-tester mereplikasi aliran rendering dari aplikasi next.js yang sebenarnya :

  1. Ambil data untuk rute yang diberikan
  2. Render hasil yang diberikan sisi server ke JSDOM sebagai HTML biasa (termasuk elemen head )
  3. memasang/melembabkan aplikasi klien ke html yang diberikan sebelumnya

Aplikasi yang dipasang bersifat interaktif dan dapat diuji dengan pustaka pengujian DOM apa pun (seperti @testing-library/react ).

next-page-tester akan mengurus:

  • Memuat dan menjalankan modul di browser yang diharapkan atau lingkungan server
  • Menyelesaikan rute yang disediakan menjadi komponen halaman yang cocok
  • Menelepon Metode Pengambilan Data Next.js ( getServerSideProps , getInitialProps atau getStaticProps ) Jika kasusnya
  • Halaman pembungkus dengan komponen _app dan _document khusus
  • meniru navigasi sisi klien melalui Link , router.push , router.replace
  • Menangani Pengembalian redirect Halaman
  • Mendukung next/router , next/head , next/link , next/config dan Variabel Lingkungan

API

getpage

getPage menerima objek opsi dan mengembalikan 4 nilai: 

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

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

memberikan()

Type: () => { nextRoot: HTMLElement<NextRoot> }
Returns: #__next Elemen Elemen Root.

Kecuali jika Anda memiliki kasus penggunaan canggih, Anda harus menggunakan metode ini. Di bawah kapnya disebut serverRender() dan kemudian memasang/melembabkan aplikasi React ke dalam elemen root JSDOM #__next . Inilah yang akan didapat/dilihat pengguna saat mereka mengunjungi halaman.

Serverrender ()

Type: () => { nextRoot: HTMLElement<NextRoot> }
Returns: #__next Elemen Elemen Root.

Suntikkan output rendering sisi server ke DOM tetapi tidak bereaksi. Gunakan untuk menguji bagaimana selanjutnya.js merender dalam skenario berikut:

  • Sebelum bereaksi mount
  • Saat JS dinonaktifkan
  • Tes SEO

ServererDerToString ()

Type: () => { html: string }

Render output rendering sisi server sebagai string HTML. Ini adalah metode murni tanpa efek samping.

halaman

Jenis: React.ReactElement<AppElement>

Reaksi elemen aplikasi.

Opsi

Milik Keterangan jenis Bawaan
rute (wajib) Rute berikutnya (harus dimulai dengan / ) string -
req Tingkatkan objek permintaan yang diejek secara default req => req -
res Tingkatkan objek respons yang diejek secara default res => res -
router Tingkatkan objek router berikutnya yang diejek router => router -
UseApp Render Komponen Aplikasi Kustom boolean true
Usedocument (Eksperimental. Disabled sementara karena masalah ini) Komponen Dokumen Render boolean false
Nextroot Jalur absolut ke folder root next.js string Auto terdeteksi
dotenvfile Jalur relatif ke variabel lingkungan yang menahan file .env string -
pembungkus Jalur absolut untuk file pembungkus. Berguna untuk menghias pohon komponen dengan penyedia mocked. string -
SharedModules Daftar modul yang harus mempertahankan identitas antara konteks klien dan server. string[] []

Menyiapkan Lingkungan Dev Anda

Menangani impor khusus

Jika halaman/komponen Anda mengimpor jenis file yang tidak ditangani secara alami oleh node.js (seperti lembar gaya, gambar, .svg , ...), Anda harus mengkonfigurasi lingkungan pengujian Anda untuk memprosesnya dengan benar. Misalnya, jika bercanda Anda mungkin ingin mengkonfigurasi beberapa moduleNameMapper .

Mengatur lingkungan JSDOM

next-page-tester mengharapkan untuk mengalami lingkungan JSDOM. Jika menggunakan Jest, tambahkan baris ini ke konfigurasi jest Anda: 

 "testEnvironment" : "jsdom" ,

Melewati Inisialisasi Pembersihan & Pembantu Otomatis

Karena Next.js tidak dirancang untuk berjalan di lingkungan JSDOM, kita perlu mengatur JSDOM default untuk memungkinkan pengalaman pengujian yang lebih halus. Secara default, next-page-tester akan:

  • Berikan window.scrollTo dan IntersectionObserver Mocks
  • Pembersihan dom setelah setiap tes
  • Pengaturan Jest Untuk Melestarikan Identitas beberapa Modul Spesifik Antara "Server" dan "Klien" Eksekusi

Namun, Anda dapat memilih untuk melewatkan inisialisasi Auto Cleanup & Helters dengan mengatur variabel Env NPT_SKIP_AUTO_SETUP ke true . Anda dapat melakukan ini dengan cross-env seperti itu: 

 cross - env NPT_SKIP_AUTO_SETUP = true jest

Opsional: Patching Jest v26

Jika menggunakan JEST V26, Anda mungkin perlu menambalnya untuk memuat modul dengan lingkungan server/klien yang tepat. Upaya pemeliharaan akan menargetkan versi lelucon terbaru.

Contoh

Di bawah Folder Contoh Kami mendokumentasikan kasus pengujian yang diaktifkan next-page-tester .

Dukungan Versi Next.js

next-page-tester berfokus pada mendukung hanya versi terakhir dari Next.js dan Jest:

Next-Page-Tester next.js Bersenda gurau
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 +

Sejak:

  • Proyek ini tidak didukung oleh tim Next.js
  • Proyek ini bergantung pada beberapa internal Next.js yang dapat berubah tanpa pemberitahuan dalam versi apa pun

Harap dicatat bahwa kami tidak dapat menjamin dukungan untuk versi berikutnya dari Next.js di luar kotak. Bahkan versi patch atau minor bisa pecah. Dalam hal ini Anda harus menunggu versi next-page-tester yang akan dirilis.

Kontribusi sangat disambut dan kami melakukan yang terbaik untuk mendukung kontributor eksternal.

Catatan

  • Data Fetching Metode 'Konteks req dan Objek res diejek dengan node-mocks-http
  • Tester halaman berikutnya dirancang untuk digunakan dengan kerangka kerja/perpustakaan pengujian tetapi saat ini hanya diuji dengan perpustakaan JEST dan pengujian. Jangan ragu untuk membuka masalah jika Anda memiliki masalah dengan pengaturan yang berbeda
  • Mungkin perlu menginstal @types/react-dom dan @types/webpack saat menggunakan naskah dalam mode strict karena bug ini

Opsi Opsi useDocument Eksperimental

Opsi useDocument sebagian diimplementasikan dan mungkin tidak stabil.

FAQ

Bagaimana cara mengejek panggilan API dalam metode pengambilan data saya?

Cara pertama yang disarankan untuk mengejek permintaan jaringan, terdiri dari mengejek pada lapisan jaringan dengan perpustakaan seperti Mock service worker dan Mirage JS .

Pendekatan lain yang layak mungkin terdiri dari mengejek objek fetch global dengan perpustakaan seperti fetch-mock .

Jika Anda menginginkan pendekatan yang lebih tradisional yang melibatkan mengejek modul lahan pengguna yang bertanggung jawab untuk mengambil data, Anda perlu mempertimbangkan langkah tambahan: karena modul isolat next-page-tester antara "klien" dan "server" rendering, mocks yang dibuat dalam tes (konteks klien) tidak akan mengeksekusi dalam konteks server (mis. Metode pengambilan data).

Untuk mengatasinya, kita perlu "mencemari" modul semacam itu untuk (melestarikan/berbagi) identitas mereka antara konteks "klien" dan "server" dengan melewatkannya melalui opsi 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
}

Bagaimana cara membuat cookie tersedia di metode pengambilan data next.js?

Anda dapat mengatur cookie dengan menambahkannya ke document.cookie sebelum menelepon getPage . next-page-tester akan menyebarkan cookie ke ctx.req.headers.cookie sehingga mereka akan tersedia untuk metode pengambilan data. Ini juga berlaku untuk panggilan metode pengambilan berikutnya yang dipicu oleh navigasi sisi klien. 

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

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

Catatan: document.cookie tidak dibersihkan secara otomatis. Anda harus membersihkannya secara manual setelah setiap tes untuk menjaga semuanya tetap terpisah.

Kesalahan: tidak diterapkan: window.scrollto

Next.js Link Komponen Memanggil window.scrollTo On Click Yang Tidak Diimplementasikan Dalam Lingkungan JSDOM. Untuk memperbaiki kesalahan, Anda harus mengatur lingkungan pengujian Anda atau menyediakan window.scrollTo Anda sendiri.

Peringatan: Konten teks tidak cocok. Server: "x" klien: "y" kesalahan

Peringatan ini berarti bahwa halaman Anda membuat secara berbeda antara server dan browser. Ini bisa menjadi perilaku yang diharapkan atau menandakan bug di kode Anda.

Kesalahan: ReferenceError: Fetch tidak didefinisikan

Peringatan ini berarti bahwa aplikasi Anda selama proses rendering melakukan beberapa permintaan jaringan yang belum diejek. Anda harus menemukannya dan mengejek sesuai kebutuhan.

Todo's

  • Pertimbangkan untuk menggunakan kembali bagian kode Next.js (bukan hanya tipe)
  • Pertimbangkan Mendukung Opsi Next.js trailingSlash
  • Render halaman _error khusus
  • Berikan opsi debug untuk mencatat info eksekusi

Kontributor

Terima kasih kepada orang -orang yang luar biasa ini (Kunci Emoji):


Andrea Carraro
? ️ ?
Matej šnuderl
? ️ ? ?
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

Derek Austin
?
Feargal
?

Jan R. Biasi
?
Otávio Augusto Soares
?

Proyek ini mengikuti spesifikasi semua-kontributor. Kontribusi apa pun yang baik!

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua