Home>Courses>Testing React Apps with Jest and React Testing Library

Testing React Apps with Jest and React Testing Library

Gain insights into writing automated tests for React apps with Jest and React Testing Library. Learn about simulating user interactions and testing asynchronous parts to enhance app reliability.

Intermediate

52 Lessons

16h

Certificate of Completion

Gain insights into writing automated tests for React apps with Jest and React Testing Library. Learn about simulating user interactions and testing asynchronous parts to enhance app reliability.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

89 Playgrounds

7 Quizzes

Course Overview

What You'll Learn

Course Content

Course Overview

The skills acquired from this course will allow you to write automated tests on your React app using Jest and React Testing Library, which are the de-facto testing tools for React. These tests will allow you to ship new versions of your app with confidence. The tests will also allow you to increase your release frequency, allowing you to get features to your customers quicker. You will learn how to write robust tests that are resilient to breaking when code is improved and refactored, reducing maintenance ...Show More

What You'll Learn

You will learn about testing React applications with Jest.

You will get hands-on experience with the React Testing Library.

You will learn about testing React applications with Jest.

Course Content

Introduction

2 Lessons

Get familiar with automated testing basics, different testing types, and test function examples.

Introduction to Automated Testing

Writing a Test Without Tools

Getting Started with Jest

8 Lessons

Get started with writing, running, and debugging Jest tests, including asynchronous functions and TypeScript integration.

Writing Our First Tests with Jest

Installing and Running Jest

Writing Asynchronous Tests

Naming Tests

Debugging Tests

Determining Code Coverage

Using TypeScript with Jest

Quiz Yourself on Jest

Using Matchers

8 Lessons

Examine matchers in Jest for comprehensive testing, including equality, errors, strings, arrays, and snapshots.

Understanding a Matcher

Checking for null and undefined

Checking for Equality

Quiz Yourself on Matchers

Getting Started with React Testing Library

5 Lessons

Grasp the fundamentals of component testing with React Testing Library and debugging techniques.

Writing a Component Test without React Testing Library

Writing a Component Test with React Testing Library

Installing RTL and Configuring Jest for Component Testing

Debugging Component Tests

Quiz Yourself on React Testing Library

React Testing Library Queries

7 Lessons

Dig into React Testing Library queries, their variants, form fields, images, and practical exercises.

Introduction to queries and getBy Variant

Quiz Yourself on RTL Queries

Exercise: RTL Queries

Firing Events

7 Lessons

Implement various user interactions in React applications using Jest and React Testing Library.

Introduction and Clicking Elements

Filling in an input Element

Selecting an Option in a select Element

Uploading a File

Hovering Over an Element

Quiz Yourself on Firing Events

Exercise: Firing Events

Mocking

8 Lessons

Master the techniques of mocking functions and modules using Jest for efficient React testing.

Understanding Mocking

Mocking a Function without Jest

Using Jest's Mock Function

Using Jest's spyOn Function

Mocking a Module

Creating a Manual Shared Module Mock

Quiz Yourself on Mocking

Exercise: Mocking

Testing Different Types of Components

6 Lessons

Try out testing React components, routes, custom hooks, and handling state for robust applications.

Testing Page Components

Testing Routes

Testing Custom React Hooks

Testing Custom Hooks with State

Quiz Yourself on Components

Exercise: Types of Components

Appendix

1 Lessons

Look at the tools and steps necessary for setting up a local development environment.

Technical Requirements for Working Locally

Course Author

Carl Rippon

Trusted by 2.5 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Carlos Matias La Borde

Software Developer

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

"I've tried probably 5-7 different sites and Educative is easily the best. It perfectly blends explanation with interactivity"

Eric Downs

Musician/Entrepeneur

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Free Resources

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath