ดาวน์โหลด react hooks testing library - ดาวน์โหลด react hooks testing library ซอร์สโค้ด

react hooks testing library

ซอร์สโค้ดอื่น ๆ

v8.0.1

ดาวน์โหลด

react-hooks-testing-library

ยูทิลิตีการทดสอบ React hooks ที่เรียบง่ายและสมบูรณ์ซึ่งส่งเสริมแนวทางการทดสอบที่ดี

อ่านเอกสาร

หมายเหตุเกี่ยวกับการสนับสนุน React 18

หากคุณใช้ react-testing-library เวอร์ชันปัจจุบัน ให้แทนที่

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

กับ

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

เมื่อถูกแทนที่แล้ว @testing-library/react-hooks ก็สามารถถอนการติดตั้งได้

รายละเอียด

ในฐานะที่เป็นส่วนหนึ่งของการเปลี่ยนแปลงสำหรับ React 18 มีการตัดสินใจว่า renderHook API ที่ไลบรารีนี้จัดทำขึ้นจะถูกรวมเป็นส่วนเพิ่มเติมอย่างเป็นทางการของทั้ง react-testing-library (PR) และ react-native-testing-library (PR) ด้วย ความตั้งใจที่จะจัดให้มีการใช้งานที่สอดคล้องกันและสม่ำเสมอมากขึ้นสำหรับผู้ใช้ของเรา

โปรดอดใจรอในขณะที่เราสรุปการเปลี่ยนแปลงเหล่านี้ในไลบรารีการทดสอบที่เกี่ยวข้อง ในระหว่างนี้คุณสามารถติดตั้ง @testing-library/react@^13.1

สารบัญ

ปัญหา
การแก้ปัญหา
เมื่อใดควรใช้ห้องสมุดนี้
เมื่อใดที่จะไม่ใช้ห้องสมุดนี้
ตัวอย่าง
- useCounter.js
- useCounter.test.js
การติดตั้ง
- การพึ่งพาเพื่อน
เอพีไอ
ผู้ร่วมให้ข้อมูล
ปัญหา
- - แมลง
- คำขอคุณลักษณะ
- ❓ คำถาม
ใบอนุญาต

ปัญหา

คุณกำลังเขียน hook แบบกำหนดเองที่ยอดเยี่ยม และต้องการทดสอบ แต่ทันทีที่คุณเรียกมัน คุณจะเห็นข้อผิดพลาดต่อไปนี้:

การละเมิดที่ไม่คงที่: สามารถเรียก Hooks ได้ภายในเนื้อหาของส่วนประกอบฟังก์ชันเท่านั้น

คุณคงไม่อยากเขียน Component เพื่อทดสอบ Hook นี้เพียงอย่างเดียว และต้องหาวิธีที่คุณจะทริกเกอร์วิธีต่างๆ ทั้งหมดที่ Hook สามารถอัปเดตได้ โดยเฉพาะอย่างยิ่งเมื่อพิจารณาถึงความซับซ้อนของวิธีที่คุณเชื่อมโยงสิ่งทั้งหมดเข้าด้วยกัน .

การแก้ปัญหา

react-hooks-testing-library ช่วยให้คุณสร้างชุดทดสอบอย่างง่ายสำหรับ React hooks ที่จัดการการทำงานภายในเนื้อหาของส่วนประกอบฟังก์ชัน เช่นเดียวกับการให้ฟังก์ชันยูทิลิตี้ที่มีประโยชน์มากมายสำหรับการอัปเดตอินพุตและดึงเอาต์พุตที่น่าทึ่งของคุณ ตะขอที่กำหนดเอง ไลบรารีนี้มีจุดมุ่งหมายเพื่อมอบประสบการณ์การทดสอบที่ใกล้เคียงกับการใช้ hook ของคุณจากภายในส่วนประกอบจริงมากที่สุดเท่าที่จะเป็นไปได้

เมื่อใช้ไลบรารีนี้ คุณไม่ต้องกังวลกับวิธีสร้าง เรนเดอร์ หรือโต้ตอบกับส่วนประกอบการโต้ตอบเพื่อทดสอบ hook ของคุณ คุณสามารถใช้เบ็ดได้โดยตรงและยืนยันผลลัพธ์

เมื่อใดควรใช้ห้องสมุดนี้

คุณกำลังเขียนไลบรารีด้วย hooks แบบกำหนดเองอย่างน้อยหนึ่งรายการที่ไม่ได้เชื่อมโยงโดยตรงกับส่วนประกอบ
คุณมีตะขอที่ซับซ้อนซึ่งยากต่อการทดสอบผ่านการโต้ตอบของส่วนประกอบ

เมื่อใดที่จะไม่ใช้ห้องสมุดนี้

hook ของคุณถูกกำหนดไว้ข้างส่วนประกอบและใช้เฉพาะที่นั่นเท่านั้น
เบ็ดของคุณทดสอบได้ง่ายเพียงทดสอบส่วนประกอบต่างๆ โดยใช้มัน

ตัวอย่าง

`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 )
} )

การใช้งานขั้นสูงเพิ่มเติมสามารถพบได้ในเอกสารประกอบ

การติดตั้ง

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

การพึ่งพาเพื่อน

react-hooks-testing-library ไม่ได้มาพร้อมกับเวอร์ชันของ react เพื่อให้คุณสามารถติดตั้งเวอร์ชันเฉพาะที่คุณต้องการทดสอบได้ นอกจากนี้ยังไม่ได้ติดตั้งมาพร้อมกับตัวเรนเดอร์เฉพาะ ขณะนี้เรารองรับ react-test-renderer และ react-dom คุณจะต้องติดตั้งเพียงอย่างใดอย่างหนึ่ง อย่างไรก็ตาม หากคุณได้ติดตั้งทั้งสองอย่างแล้ว เราจะใช้ react-test-renderer เป็นค่าเริ่มต้น สำหรับข้อมูลเพิ่มเติม โปรดดูเอกสารการติดตั้ง โดยทั่วไป เวอร์ชันที่ติดตั้งสำหรับ react และตัวเรนเดอร์ที่เลือกควรมีเวอร์ชันที่ตรงกัน:

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

หมายเหตุ: เวอร์ชันขั้นต่ำที่รองรับของ react , react-test-renderer และ react-dom คือ ^16.9.0

เอพีไอ

ดูการอ้างอิง API

ผู้ร่วมให้ข้อมูล

ขอขอบคุณผู้คนที่แสนวิเศษเหล่านี้ (คีย์อีโมจิ):

_{ไมเคิล เพย์เปอร์} - - -	_{โอโตฟุ-สแควร์}	_{แพทริค พี. เฮนลีย์} - -	_{มาเธอุส มาร์เกส}	_{ธรุฟ ปาเตล} - -	_{นาธาเนียล ทัคเกอร์} - -	_{เซอร์เก กริชเชนโก้} -
_{โจเซป เอ็ม โซเบรเปเร}	_{มาร์เซล ทินเนอร์}	_{แดเนียล เค.} -	_{วินซ์ มาโลน}	_{เซบาสเตียน เวเบอร์}	_{คริสเตียน กิลล์}	_{จาวาสคริปต์ โจ}
_{ซาราห์ ดายัน} -	_{โรมัน กูเซฟ}	_{อดัม เซคเคิล}	_{เคย์ยะ ซาซากิ}	_{หูเฉิน}	_จอช - -	_{นาอามาน เฮิร์ชเฟลด์}
_{เบรย์ดอน ฮอลล์}	_{เจค็อบ เอ็มจี อีแวนส์}	_{ไทเกอร์ อโบรดี}	_{อัมร์ เอ. โมฮัมเหม็ด}	_{จูฮานา เจาเฮียเนน}	_{เจนส์ ไมน์เดิร์ตมา}	_{มาร์โก มอเร็ตติ} -
_{มาร์ติน วี.}	_{เอโรซัค}	_{นิค แมคเคอร์ดี} -	_{อารยา}	_{มึนงง86}	_{อเล็กซ์ ยัง} -	_{เบน แลมเบิร์ต}
_{เดวิด โช-ลีรัตน์}	_{อีวาน ฮาร์มอน}	_{เจสัน บราวน์}	_{คาวีเต็ง}	_{เลโอนิด ชากาบุตดินอฟ}	_{ลีวาย บุชเชอร์}	_{มิเคเล่ เซตเตปานี}
_แซม	_{ธเนศ ประทักษ์}	_{ทอม รีส์-เฮิร์ดแมน}	_{อิคบาล125}	_{Cliffzhaobupt} -	_{จอน คูปส์}	_{โจนาธาน เพย์เปอร์} -
_{ฌอน เบนส์}	_{มิคาอิล วาซิน}	_{อเล็กซานดาร์ กราบิช}	_{โจนาธาน โฮล์มส์}	_{ไมเคิล เดอ โบอี้} -	_{แอนตัน ซิโนเวียฟ} -	_{มารีอานา-exelate} -
_{มาตัน โบเรนเคราท์} -	_{แอนดรูเกอร์}	_{ไบรอัน เวน} - -	_{โรเบิร์ต สโนว์}	_{คริส เฉิน}	_{มาเซียส}	_{ไหลชูซิน}