React Testing Library with Jest Vitest

React Testing Library with Jest / Vitest, available at $129.99, has an average rating of 4.6, with 117 lectures, based on 7177 reviews, and has 39145 subscribers.

You will learn about Testing simple and complex React applications with React Testing Library React Testing best Practices: how to test behavior instead of implementation Making the most of Jest watch mode, including running only one file or test at a time Common errors returned by Testing Library and how to correct them Test-Driven Development: writing tests alongside production code, to ensure thorough test coverage This course is ideal for individuals who are React coders who want to learn how to write functional tests for their apps or React application engineers who want confidence that writing code doesnt break existing behavior (tests, for the win!) It is particularly useful for React coders who want to learn how to write functional tests for their apps or React application engineers who want confidence that writing code doesnt break existing behavior (tests, for the win!).

Enroll now: React Testing Library with Jest / Vitest

Summary

Title: React Testing Library with Jest / Vitest

Price: $129.99

Average Rating: 4.6

Number of Lectures: 117

Number of Published Lectures: 86

Number of Curriculum Items: 117

Number of Published Curriculum Objects: 86

Original Price: $64.99

Quality Status: approved

Status: Live

What You Will Learn

Testing simple and complex React applications with React Testing Library

React Testing best Practices: how to test behavior instead of implementation

Making the most of Jest watch mode, including running only one file or test at a time

Common errors returned by Testing Library and how to correct them

Test-Driven Development: writing tests alongside production code, to ensure thorough test coverage

Who Should Attend

React coders who want to learn how to write functional tests for their apps

React application engineers who want confidence that writing code doesnt break existing behavior (tests, for the win!)

Target Audiences

React coders who want to learn how to write functional tests for their apps

React application engineers who want confidence that writing code doesnt break existing behavior (tests, for the win!)

Major course updates in November 2023! 

Projects are written in Vite, a lightweight and lightning-fast base for React apps

Projects use Vitest, a test framework that’s much faster than Jest
Note: Vitest code syntax is identical to Jest; all code presented in the course works with both Vitest and Jest.

The course presents Mock Service Worker v2 syntax, which was released in October 2023.

React Testing Library has become an extremely popular option for testing React, and with good reason! This detailed, comprehensive course provides a solid foundation for React app tests.

Best Practices

React Testing Library is famously opinionated about testing best practices, and is written to encourage these best practices. This course teaches:

testing behavior over testing implementation

tests that interact with your app the way a user would

finding elements by accessibility handles, to make sure your code is accessible as possible

Broad range of testing examples

The course apps start very with very simple examples (clicking a button to change its color) and work up to progressively more complicated testing concepts, such as: 

testing asynchronous page changes

simulating data from a server using Mock Service Worker

applying a context provider to a component when rendering

The course builds up to complex concepts gradually, in a way designed to support your learning and ensure your success.

Practice your new skills

You will also have plenty of opportunities to practice what you’ve learned. The course provides “code quizzes” while building the course projects, where you can apply what you learned and then watch a video to see the solution. The (optional) final section provides even more exercises to complete the second app and reinforce concepts from the course.

Optional React lectures

Any significant React code covered in the course is isolated into separate lectures. Students have a choice: those who want to reinforce their React skills (or learn new ones!) can watch those lectures, while students who feel confident in their React skills can skip them.

Supportive Instructor

The instructor has a proven track record of responding to course Q&A in a helpful and supportive way. She loves to engage with students, answer questions about course concepts, and help debug students’ code for the course projects.

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction to React Testing Library and Jest / Vitest

Lecture 2: Link to course GitHub repo

Lecture 3: First Test with Testing Library

Lecture 4: Jest and Jest-DOM Assertions

Lecture 5: Jest and Vitest: How Tests Work

Lecture 6: TDD: Test Driven Development

Lecture 7: React Testing Library Philosophy

Lecture 8: Functional Testing vs Unit Testing

Lecture 9: TDD (Test Driven Development) vs BDD (Behavior Driven Development)

Lecture 10: Testing Library and Accessibility

Lecture 11: RESOURCE: Where to find code if youd rather not write React for this course

Chapter 2: Simple App: Color Button

Lecture 1: Overall Course Plan

Lecture 2: Start Color Button App

Lecture 3: `logRoles` method for debugging roles

Lecture 4: Test Behavior when Clicking Button

Lecture 5: OPTIONAL React Code: Click Button to Change Color

Lecture 6: Manual Acceptance Testing

Lecture 7: Test Initial Condition of Button and Checkbox

Lecture 8: Introduction to Code Quizzes

Lecture 9: Code Quiz! Confirm Button Disable on Checkbox Check

Lecture 10: Code Quiz Solution: Confirm Button Disable on Checkbox Check

Lecture 11: Code Quiz! Disabled Button Turns Gray

Lecture 12: Unit Testing Functions

Lecture 13: Code Quiz! Update Tests for New Color Names

Lecture 14: When to Unit Test

Lecture 15: Review: Simple App

Chapter 3: ESLint with Testing Library, plus Prettier

Lecture 1: ESLint and Prettier

Lecture 2: ESLint for Testing Library, Jest-DOM and Vitest

Lecture 3: Configuring ESLint and Prettier in VSCode

Chapter 4: Sundaes On Demand: Form Review and Popover

Lecture 1: Introduction to Sundaes on Demand

Lecture 2: WARNING: VSCode may look different!

Lecture 3: Code Organization and Introduction to SummaryForm

Lecture 4: Code Quiz: Checkbox Enables Button

Lecture 5: OPTIONAL React Code: SummaryForm Checkbox and Button

Lecture 6: React Bootstrap Popover and Testing Library userEvent

Lecture 7: Replace `fireEvent` with `userEvent`

Lecture 8: Screen Query Methods

Lecture 9: Testing Element is Not on Page: Popover Tests

Lecture 10: OPTIONAL React Code: Popover

Lecture 11: Review: Summary Form

Chapter 5: Simulating Server Response with Mock Service Worker

Lecture 1: OrderEntry Server Data Introduction

Lecture 2: Introduction to Mock Service Worker and Handlers

Lecture 3: Why not mock axios using Jest / Vitest?

Lecture 4: Setting up the Mock Service Worker Server

Lecture 5: Tests with Mock Service Worker: Scoop Options

Lecture 6: TROUBLESHOOTING: ReferenceError: Response is not defined

Lecture 7: OPTIONAL React Code: Options and ScoopOption Components

Lecture 8: Using `await findBy` to Find Elements that Populate Asynchronously

Lecture 9: Code Quiz! Topping Options from Server

Lecture 10: Error Server Response Planning

Lecture 11: Simulating Server Error Response in Tests

Lecture 12: OPTIONAL React Code: Alert Banner for Options Server Error

Lecture 13: Tools for Debugging Tests

Lecture 14: OPTIONAL: Why doesnt name work with the role alert?

Lecture 15: Review: Server Error Response and Test Debugging Tools

Chapter 6: Testing Components Wrapped in a Provider

Lecture 1: Intro to Tests for Total and Subtotals

Lecture 2: Entering Text Input: Subtotal Tests

Lecture 3: OPTIONAL React Code: OrderDetails Context

Lecture 4: OPTIONAL React Code: Use Context to Display Scoops Subtotal

Lecture 5: Adding Context to Test Setup

Lecture 6: Creating Custom Render to Wrap in Provider By Default

Lecture 7: Review: Scoops Subtotal with Context

Lecture 8: Code Quiz! Toppings Subtotal

Lecture 9: OPTIONAL React Code: Toppings Checkboxes

Lecture 10: Note on expected warning in the next lecture

Lecture 11: Code Quiz! Grand Total

Lecture 12: OPTIONAL: Not wrapped in act() Warning

Lecture 13: OPTIONAL: Why is the explicit unmount needed

Lecture 14: Manual Acceptance Testing

Chapter 7: Final Exam: Order Phases

Lecture 1: Introduction to Final Exam: Order Phases

Lecture 2: Tips for the new MSW Handler

Lecture 3: Debugging Tips

Lecture 4: OPTIONAL React Hints for Order Phase Coding

Lecture 5: NOTE: outdated code in the next lecture

Lecture 6: Final Exam Solution

Lecture 7: OPTIONAL React Code: Order Phases

Lecture 8: Review: Final Exam, and Introduction to Optional Practice

Lecture 9: Common Mistakes with React Testing Library

Chapter 8: Optional Extra Practice

Lecture 1: Standard Questions for New Tests and Introduction to Exercises

Lecture 2: Conditional Toppings Section on Summary Page

Lecture 3: Disable Order Button if No Scoops Ordered

Lecture 4: Red Input Box for Invalid Scoop Count

Lecture 5: No Scoops Subtotal Update for Invalid Scoop Count

Lecture 6: Server Error on Order Confirmation Page

Lecture 7: Congratulations and Thank You!

Chapter 9: Bonus

Lecture 1: Coupons!

Instructors

Bonnie Schulkin
Teacher | Coder | Mediocre Bassist

Rating Distribution

1 stars: 47 votes

2 stars: 73 votes

3 stars: 561 votes

4 stars: 2222 votes

5 stars: 4274 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!