Testing Lists and Dynamic Content - 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 Lists and Dynamic Content

Testing lists of data or dynamic content is not much different from the previous lessons.

You will probably load the data via a fetch call (covered in a later lesson) or pass them in via props.

In this lesson we will go over some tips and tricks that are useful when testing this sort of component.

Loading full lesson content & code...

Ready to try running tests for this lesson?

Loading...