react hooks testing library

perpustakaan-pengujian-kait-reaksi

Utilitas pengujian React hooks yang sederhana dan lengkap yang mendorong praktik pengujian yang baik.

Baca Dokumen

---

Catatan tentang Dukungan React 18

Jika Anda menggunakan versi react-testing-library saat ini, ganti

 import { renderHook } from '@testing-library/react-hooks'

dengan

 import { renderHook } from '@testing-library/react'

Setelah diganti, @testing-library/react-hooks dapat dihapus instalasinya.

Detail

Sebagai bagian dari perubahan pada React 18, telah diputuskan bahwa renderHook API yang disediakan oleh perpustakaan ini akan disertakan sebagai tambahan resmi pada react-testing-library (PR) dan react-native-testing-library (PR) dengan tujuannya adalah untuk memberikan implementasi yang lebih kohesif dan konsisten bagi pengguna kami.

Harap bersabar saat kami menyelesaikan perubahan ini di perpustakaan pengujian masing-masing. Sementara itu, Anda dapat menginstal @testing-library/react@^13.1

Daftar isi

• Masalahnya
• Solusinya
• Kapan menggunakan perpustakaan ini
• Kapan tidak menggunakan perpustakaan ini
• Contoh
  • useCounter.js
  • useCounter.test.js
• Instalasi
  • Ketergantungan Rekan
• API
• Kontributor
• Masalah
  • ? Bug
  • Permintaan Fitur
  • ❓ Pertanyaan
• LISENSI

Masalahnya

Anda sedang menulis pengait khusus yang mengagumkan dan ingin mengujinya, tetapi segera setelah Anda memanggilnya, Anda akan melihat kesalahan berikut:

Pelanggaran Invarian: Kait hanya dapat dipanggil di dalam badan komponen fungsi.

Anda tidak benar-benar ingin menulis komponen hanya untuk menguji hook ini dan harus mencari tahu bagaimana Anda akan memicu berbagai cara untuk memperbarui hook, terutama mengingat kompleksitas cara Anda menyatukan semuanya. .

Solusinya

react-hooks-testing-library memungkinkan Anda membuat test harness sederhana untuk React hooks yang menangani pengoperasiannya di dalam tubuh komponen fungsi, serta menyediakan berbagai fungsi utilitas yang berguna untuk memperbarui input dan mengambil output menakjubkan Anda. kait khusus. Pustaka ini bertujuan untuk memberikan pengalaman pengujian sedekat mungkin dengan penggunaan hook Anda secara asli dari dalam komponen nyata.

Dengan menggunakan pustaka ini, Anda tidak perlu memikirkan cara membuat, merender, atau berinteraksi dengan komponen reaksi untuk menguji hook Anda. Anda cukup menggunakan hook secara langsung dan menegaskan hasilnya.

Kapan menggunakan perpustakaan ini

1. Anda sedang menulis perpustakaan dengan satu atau lebih kait khusus yang tidak terikat langsung ke komponen
2. Anda memiliki kaitan kompleks yang sulit diuji melalui interaksi komponen

Kapan tidak menggunakan perpustakaan ini

1. Hook Anda ditentukan di samping komponen dan hanya digunakan di sana
2. Hook Anda mudah untuk diuji hanya dengan menguji komponen yang menggunakannya

Contoh

useCounter.js

 import { useState , useCallback } from 'react'

function useCounter ( ) {
  const [ count , setCount ] = useState ( 0 )

  const increment = useCallback ( ( ) => setCount ( ( x ) => x + 1 ) , [ ] )

  return { count , increment }
}

export default useCounter

useCounter.test.js

 import { renderHook , act } from '@testing-library/react-hooks'
import useCounter from './useCounter'

test ( 'should increment counter' , ( ) => {
  const { result } = renderHook ( ( ) => useCounter ( ) )

  act ( ( ) => {
    result . current . increment ( )
  } )

  expect ( result . current . count ) . toBe ( 1 )
} )

Penggunaan lebih lanjut dapat ditemukan di dokumentasi.

Instalasi

npm install --save-dev @testing-library/react-hooks

Ketergantungan Rekan

react-hooks-testing-library tidak dibundel dengan versi react untuk memungkinkan Anda menginstal versi spesifik yang ingin Anda uji. Itu juga tidak diinstal dengan penyaji tertentu, saat ini kami mendukung react-test-renderer dan react-dom . Anda hanya perlu menginstal salah satunya, namun jika Anda sudah menginstal keduanya, kami akan menggunakan react-test-renderer sebagai default. Untuk informasi lebih lanjut lihat dokumen instalasi. Umumnya, versi terinstal untuk react dan penyaji yang dipilih harus memiliki versi yang cocok:

npm install react@^16.9.0
npm install --save-dev react-test-renderer@^16.9.0

CATATAN: Versi minimum yang didukung dari react , react-test-renderer dan react-dom adalah ^16.9.0 .

API

Lihat referensi API.

Kontributor

Terima kasih kepada orang-orang hebat ini (kunci emoji):

Michael Peyper ? ? ? ️	otofu-persegi	Patrick P.Henley ? ?	Matheus Marques	Dhruv Patel ? ?	Natanael Tucker ? ?	Sergei Grishchenko ?
Josep M Sobrepere	Marcel Tinner	Daniel K. ?	Vin Malone	Sebastian Weber	Christian Gill	JavaScript Joe ✅ ️
Sarah Dayan ?	Romawi Gusev	Adam Sekkel	keiya Sasaki ️	Hu Chen	Josh ? ? ️	Na'aman Hirschfeld
Balai Braydon	Yakub MG Evans ️	Harimau Abrodi ️	Amr A.Mohammed ️	Juhana Jauhiainen	Jens Meindertsma ️	Marco Moretti ?
Martin V.	Erozak	Nick McCurdy ?	Arya	mati rasa86	Alex Muda ?	Ben Lambert
David Cho-Lerat	Evan Harmon	Jason Brown	KahWee Teng	Leonid Shagabutdinov	Levi Jagal	Michele Settepani
Sam	Tanay Pratap	Tom Rees-Herdman	iqbal125	cliffzhaobutt ?	Jon Koops	Jonathan Peyper ?
Sean Baines	Mikhail Vasin	Aleksandar Grbic	Jonatan Holmes	Michael De Boey ?	Anton Zinoviev ?	marianna-exlate ?
Matan Borenkraout ?	andyroger	Bryan Wain ? ?	Robert Salju ️	Chris Chen ️	besar	Lashuxin

Proyek ini mengikuti spesifikasi semua kontributor. Kontribusi apa pun diterima!

Masalah

Ingin berkontribusi? Carilah label Good First Issue.

? Bug

Silakan ajukan masalah untuk bug, dokumentasi yang hilang, atau perilaku yang tidak terduga.

Lihat Bug

Permintaan Fitur

Silakan ajukan masalah untuk menyarankan fitur baru. Beri suara pada permintaan fitur dengan menambahkan?. Hal ini membantu pengelola memprioritaskan apa yang harus dikerjakan.

Lihat Permintaan Fitur

❓ Pertanyaan

Untuk pertanyaan terkait penggunaan perpustakaan, Anda dapat menyampaikan masalah di sini, atau kunjungi komunitas dukungan:

• Perselisihan
• Tumpukan Melimpah

LISENSI

MIT