react hooks testing library
v8.0.1
간단하고 완전한 React는 좋은 테스트 관행을 장려하는 테스트 유틸리티를 연결합니다.
현재 버전의 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.jsuseCounter.test.js멋진 사용자 정의 후크를 작성하고 테스트하고 싶지만 호출하자마자 다음 오류가 표시됩니다.
불변 위반: 후크는 함수 구성 요소의 본문 내부에서만 호출할 수 있습니다.
이 후크를 테스트하기 위해서만 구성 요소를 작성하고 싶지는 않으며 특히 전체를 함께 연결한 방법의 복잡성을 고려할 때 후크를 업데이트할 수 있는 다양한 방법을 모두 트리거할 방법을 알아내야 합니다. .
react-hooks-testing-library 하면 함수 구성 요소의 본문 내에서 실행을 처리하는 React 후크에 대한 간단한 테스트 하네스를 만들 수 있을 뿐만 아니라 입력을 업데이트하고 출력을 검색하기 위한 다양하고 유용한 유틸리티 기능을 제공할 수 있습니다. 맞춤 후크. 이 라이브러리는 실제 구성 요소 내에서 후크를 기본적으로 사용하는 것과 최대한 가까운 테스트 환경을 제공하는 것을 목표로 합니다.
이 라이브러리를 사용하면 후크를 테스트하기 위해 반응 구성 요소를 구성, 렌더링 또는 상호 작용하는 방법에 대해 걱정할 필요가 없습니다. 후크를 직접 사용하고 결과를 어설션할 수 있습니다.
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 useCounteruseCounter.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 참조를 확인하세요.
다음 멋진 분들에게 감사드립니다(이모지 키):
마이클 페이퍼 ? ? ? | 오토후스퀘어 | 패트릭 P. 헨리 ? ? | 마테우스 마르케스 | 드루브 파텔 ? ? | 너다니엘 터커 ? ? | 세르게이 그리쉬첸코 ? |
호셉 M 소브레페레 | 마르셀 티너 | 다니엘 K. ? | 빈스 말론 | 세바스찬 웨버 | 크리스티앙 길 | 자바스크립트 조 ✅ |
사라 다얀 ? | 로만 구세프 | 아담 세켈 | 케이야 사사키 | 후 첸 | 조롱 ? ? | 나아만 히르슈펠트 |
브레이든 홀 | 제이콥 MG 에반스 | 타이거 아브로디 | 암르 A. 모하메드 | 주하나 자우하이넨 | 옌스 마인더츠마 | 마르코 모레티 ? |
마틴 V. | 에로자크 | 닉 맥커디 ? | 아리아 | 마비86 | 알렉스 영 ? | 벤 램버트 |
데이비드 초레라트 | 에반 하몬 | 제이슨 브라운 | 카위 텡 | 레오니드 샤가부디노프 | 레비 정육점 | 미셸 세테파니 |
샘 | 타나이 프라탑 | 톰 리스-허드먼 | iqbal125 | 절벽 자오부프트 ? | 존 쿱스 | 조나단 페이퍼 ? |
션 베인스 | 미하일 바신 | 알렉산다르 그빅 | 조나단 홈즈 | 마이클 드 보이 ? | 안톤 지노비예프 ? | 마리아나-엑셀레이트 ? |
마탄 보렌크라우트 ? | 앤디루거 | 브라이언 웨인 ? ? | 로버트 스노우 | 크리스 첸 | 매셔스 | 라이슈신 |
이 프로젝트는 모든 기여자 사양을 따릅니다. 어떤 종류의 기여도 환영합니다!
기여하고 싶으신가요? Good First Issue 라벨을 찾아보세요.
버그, 문서 누락 또는 예상치 못한 동작에 대한 문제를 제출해 주세요.
버그 보기
새로운 기능을 제안하려면 문제를 제출해 주세요. ?를 추가하여 기능 요청에 투표하세요. 이는 유지관리자가 작업할 작업의 우선순위를 정하는 데 도움이 됩니다.
기능 요청 보기
라이브러리 사용과 관련된 질문이 있는 경우 여기에서 문제를 제기하거나 지원 커뮤니티를 방문하세요.
MIT
