Testing Custom Hooks - React Frontend Testing | How To Test Frontend

React Frontend Testing

Course on testing React applications, using React Testing Library (with Jest or Vitest). Covers everything you will need to know to be able to test your Frontend applications

React Testing Basics

Setting Up React Testing Library

Rendering React components in your tests

The screen object

The act() function

React Testing Library (RTL) queries

Synchronous Element Queries with React Testing Library getBy

Getting one element vs multiple elements

Optional Element Queries with React Testing Library queryBy

Asynchronous Element Queries with React Testing Library findBy

Testing User Interactions

Testing interaction - userEvent vs fireEvent

Testing User Interactions (userEvent)

Testing User Interactions (fireEvent)

Component Testing Basics

Testing Conditional Rendering

Testing Lists and Dynamic Content

waitFor() in React Testing Library

within() in React Testing Library

Testing Forms and Input Validation

Testing Component Events

Advanced Component Patterns

Testing Custom Hooks

Testing Context Providers

Integration Testing

Testing API Calls

React Testing: Testing Custom Hooks

Hooks are a great way to abstract and reuse functionality between React components.

Testing them is very straightforward too with some helper functions from React Testing Library.

In this lesson we will write and test a useCounter hook, which lets you increment/decrement/reset a counter.

Loading full lesson content & code...

Share this lessonTweet (X) it

Invite a teammate to learn with you by sharing this lesson or dropping the link in your team chat.

Ready to try running tests for this lesson?

Loading...