Testing Conditional Rendering - 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

Testing Conditional Rendering

Testing when things are conditionally rendering in your components is going to make up a large percentage of your frontend tests.

Sometimes they'll be conditional based on the props, but also very often based on clicks, after data has loaded, when forms are filled out etc.

Loading full lesson content & code...

Ready to try running tests for this lesson?

Loading...