Testing Props - 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 Props

So far all our lessons have not touched props - although they are some of the simplest things learn when using React Testing Library.

For most typical tests, you will just need to pass them into your render() function like this:

render(
  <YourComponent name="Bob" age={80} />
);

Loading full lesson content & code...

Ready to try running tests for this lesson?

Loading...