Repository files navigation

react-hooks-testing-library

Simple and complete React hooks testing utilities that encourage good testing practices.

Read The Docs

If you are using the current version ofreact-testing-library, replace

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

with

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

Once replaced,@testing-library/react-hooks can be uninstalled.

As part of the changes for React 18, it has been decided that therenderHook API provided by thislibrary will instead be included as official additions to bothreact-testing-library(PR) andreact-native-testing-library(PR) with the intention beingto provide a more cohesive and consistent implementation for our users.

Please be patient as we finalise these changes in the respective testing libraries.In the mean time you can install@testing-library/react@^13.1

• The problem
• The solution
• When to use this library
• When not to use this library
• Example
  • useCounter.js
  • useCounter.test.js
• Installation
  • Peer Dependencies
• API
• Contributors
• Issues
  • 🐛 Bugs
  • 💡 Feature Requests
  • ❓ Questions
• LICENSE

You're writing an awesome custom hook and you want to test it, but as soon as you call it you seethe following error:

Invariant Violation: Hooks can only be called inside the body of a function component.

You don't really want to write a component solely for testing this hook and have to work out how youwere going to trigger all the various ways the hook can be updated, especially given thecomplexities of how you've wired the whole thing together.

Thereact-hooks-testing-library allows you to create a simple test harness for React hooks thathandles running them within the body of a function component, as well as providing various usefulutility functions for updating the inputs and retrieving the outputs of your amazing custom hook.This library aims to provide a testing experience as close as possible to natively using your hookfrom within a real component.

Using this library, you do not have to concern yourself with how to construct, render or interactwith the react component in order to test your hook. You can just use the hook directly and assertthe results.

1. You're writing a library with one or more custom hooks that are not directly tied to a component
2. You have a complex hook that is difficult to test through component interactions

1. Your hook is defined alongside a component and is only used there
2. Your hook is easy to test by just testing the components using it

import{useState,useCallback}from'react'functionuseCounter(){const[count,setCount]=useState(0)constincrement=useCallback(()=>setCount((x)=>x+1),[])return{ count, increment}}exportdefaultuseCounter

import{renderHook,act}from'@testing-library/react-hooks'importuseCounterfrom'./useCounter'test('should increment counter',()=>{const{ result}=renderHook(()=>useCounter())act(()=>{result.current.increment()})expect(result.current.count).toBe(1)})

More advanced usage can be found in thedocumentation.

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

react-hooks-testing-library does not come bundled with a version ofreact to allow you to install the specific version you wantto test against. It also does not come installed with a specific renderer, we currently supportreact-test-renderer andreact-dom. You only need to install one of them,however, if you do have both installed, we will usereact-test-renderer as the default. For moreinformation see theinstallation docs. Generally, theinstalled versions forreact and the selected renderer should have matching versions:

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

NOTE: The minimum supported version ofreact,react-test-renderer andreact-dom is^16.9.0.

See theAPI reference.

Thanks goes to these wonderful people (emoji key):

Michael Peyper 💻📖🤔🚇🚧💬⚠️	otofu-square 💻	Patrick P. Henley 🤔👀	Matheus Marques 💻	Dhruv Patel 🐛👀	Nathaniel Tucker 🐛👀	Sergei Grishchenko 💻📖🤔
Josep M Sobrepere 📖	Marcel Tinner 📖	Daniel K. 🐛💻	Vince Malone 💻	Sebastian Weber 📝	Christian Gill 📖	JavaScript Joe ✅⚠️
Sarah Dayan 📦	Roman Gusev 📖	Adam Seckel 💻	keiya sasaki ⚠️	Hu Chen 💻📖💡	Josh 📖💬💻🤔🚧⚠️	Na'aman Hirschfeld 💻
Braydon Hall 💻	Jacob M-G Evans 💻⚠️	Tiger Abrodi 💻⚠️	Amr A.Mohammed 💻⚠️	Juhana Jauhiainen 💻	Jens Meindertsma 💻⚠️	Marco Moretti 🚇
Martin V. 📖	Erozak 📖	Nick McCurdy 🚧	Arya 📖	numb86 📖	Alex Young 🚧	Ben Lambert 📖
David Cho-Lerat 📖	Evan Harmon 📖	Jason Brown 📖	KahWee Teng 📖	Leonid Shagabutdinov 📖	Levi Butcher 📖	Michele Settepani 📖
Sam 📖	Tanay Pratap 📖	Tom Rees-Herdman 📖	iqbal125 📖	cliffzhaobupt 🚧	Jon Koops 💻	Jonathan Peyper 👀💻
Sean Baines 📖	Mikhail Vasin 📖	Aleksandar Grbic 📖	Jonathan Holmes 💻	Michaël De Boey 🚧	Anton Zinovyev 🐛💻	marianna-exelate 🚇
Matan Borenkraout 🚧	andyrooger 💻	Bryan Wain 🐛👀	Robert Snow ⚠️	Chris Chen ⚠️	Masious 📖	Laishuxin 📖

This project follows theall-contributors specification.Contributions of any kind welcome!

Looking to contribute? Look for theGood First Issuelabel.

Please file an issue for bugs, missing documentation, or unexpected behavior.

See Bugs

Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helpsmaintainers prioritize what to work on.

See Feature Requests

For questions related to using the library, you canraise issue here, orvisit a support community:

• Discord
• Stack Overflow

MIT