React Testing Library with Jest / Vitest

BY
Udemy

Learn more about the principles and techniques involved in using the react testing library to test react applications.

Mode

Online

Fees

₹ 599 3499

Quick Facts

particular details
Medium of instructions English
Mode of learning Self study
Mode of Delivery Video and Text Based

Course overview

React Testing Package is a compact library that provides a full variety of tools for testing React. React Testing Framework enables developers to quickly test elements to replicate user behavior when combined with the Jest testing library. The built-in React DOM testing tools in the React Testing Library simulate genuine user interactions using React applications. Bonnie Schulkin, a professional coder, bassist, and teacher, developed the Testing React with Jest and React Testing Library (RTL) certification course, which is made available by Udemy.

Testing React with Jest and React Testing Library (RTL) online classes provide more than 7.5 hours of detailed sessions accompanied by 15 articles, 14 downloadable resources, and quizzes that aim to provide participants with a comprehensive understanding of the strategies involved with testing react application using react testing library. Testing React with Jest and React Testing Library (RTL) online training discusses the strategies associated with Jest for testing react as well as explains the concepts involved with order entry server data, mock service worker, and error server response.

The highlights

  • Certificate of completion
  • Self-paced course
  • 7.5 hours of pre-recorded video content
  • 15 articles
  • 14 downloadable resources
  • Quizzes

Program offerings

  • Online course
  • Learning resources.
  • 30-day money-back guarantee
  • Unlimited access
  • Accessible on mobile devices and tv

Course and certificate fees

Fees information
₹ 599  ₹3,499
certificate availability

Yes

certificate providing authority

Udemy

What you will learn

Software development skills

After completing the Testing React with Jest and React Testing Library (RTL) online certification, participants will acquire a detailed understanding of the fundamentals of React and strategies involved with testing react. Participants will explore techniques involved with testing react applications using react testing library. Participants will learn about the fundamentals of tools like Jest, and mock service workers as well as will acquire the knowledge of the methodologies involved with error server response and order entry server.

The syllabus

Introduction

  • Introduction to Testing Library and Jest
  • Create-React-App
  • First Test with Testing Library
  • Jest and Jest-DOM Assertions
  • Jest: Watch Mode and How Tests Work
  • TDD: Test Driven Development
  • React Testing Library Philosophy
  • Functional Testing vs Unit Testing
  • TDD (Test Driven Development) vs BDD (Behavior Driven Development)
  • Testing Library and Accessibility

Simple App: Color Button

  • Overall Course Plan
  • Start Color Button App
  • Test that Finds Button by Role and Clicks Button
  • OPTIONAL React Code: Click Button to Change Color
  • Manual Acceptance Testing
  • Test Initial Condition of Button and Checkbox
  • Introduction to Code Quizzes
  • Code Quiz! Confirm Button Disable on Checkbox Check
  • Code Quiz Solution: Confirm Button Disable on Checkbox Check
  • Finding Checkbox with Label
  • Code Quiz! Disabled Button Turns Gray
  • Unit Testing Functions
  • Code Quiz! Update Tests for New Color Names
  • When to Unit Test
  • Review: Simple App

ESLint with Testing Library, plus Prettier

  • ESLint and Prettier
  • NOTE: update to the following lecture!
  • ESLint for Testing Library and Jest-DOM
  • PLEASE READ: update to the following lecture
  • Configure ESLint in VSCode
  • Instructions for displaying ESLint in the status bar for VSCode 1.58.0+
  • Configure Prettier in VSCode
  • Review: ESLint and Prettier

Sundaes On Demand: Form Review and Popover

  • Introduction to Sundaes on Demand
  • ESLint and Prettier Setup
  • React Bootstrap Setup
  • Code Organization and Introduction to SummaryForm
  • Code Quiz: Checkbox Enables Button
  • OPTIONAL React Code: SummaryForm Checkbox and Button
  • React Bootstrap Popover and Testing Library userEvent
  • Screen Query Methods
  • Testing Element is Not on Page: Start Popover Tests
  • NOTE for those using react-bootstrap 2.x
  • OPTIONAL React Code: Popover
  • "Not wrapped in act(...)" Error, Async Disappearance
  • Review: Summary Form

Simulating Server Response with Mock Service Worker

  • OrderEntry Server Data Introduction
  • Introduction to Mock Service Worker and Handlers
  • Setting up the Mock Service Worker Server
  • Tests with Mock Service Worker: Scoop Options
  • OPTIONAL React Code: Options and ScoopOption Components
  • Using `await findBy` to Find Elements that Populate Asynchronously
  • Code Quiz! Topping Options from Server
  • Error Server Response Planning
  • Simulating Server Error Response in Tests
  • NOTE: last half of next lecture is NOT optional!
  • OPTIONAL React Code: Alert Banner for Options Server Error
  • Running only Selected Tests, and `waitFor`
  • Tests passing but getting warnings / errors?
  • Review: Server Error Response and Test Debugging Tools

Testing Components Wrapped in a Provider

  • Intro to Tests for Total and Subtotals
  • Entering Text Input: Subtotal Tests
  • OPTIONAL React Code: OrderDetails Context
  • OPTIONAL React Code: Use Context to Display Scoops Subtotal
  • Adding Context to Test Setup; Test Catching Error in Code
  • Creating Custom Render to Wrap in Provider By Default
  • Review: Scoops Subtotal with Context
  • Code Quiz! Toppings Subtotal
  • OPTIONAL React Code: Toppings Checkboxes
  • Note on equivalent error strings for next lecture
  • Code Quiz! Grand Total
  • "Unmounted Component" Error
  • What Should Functional Tests Catch? and Refactor

Final Exam: Order Phases

  • Introduction to Final Exam: Order Phases
  • Adding a New Handler: Copy/Paste Warning!
  • Debugging Tips
  • OPTIONAL React Hints for Order Phase Coding
  • Final Exam Solution
  • OPTIONAL React Code: Order Phases
  • Jest Mock Functions as Props
  • Review: Final Exam, and Introduction to Optional Practice
  • Common Mistakes with React Testing Library

Optional Extra Practice

  • Standard Questions for New Tests and Introduction to Exercises
  • Confirm "Loading" Text
  • Conditional Toppings Section on Summary Page
  • Disable Order Button if No Scoops Ordered
  • Red Input Box for Invalid Scoop Count
  • No Scoops Subtotal Update for Invalid Scoop Count
  • Server Error on Order Confirmation Page
  • Congratulations and Thank You!

Bonus

  • Coupons!

Instructors

Ms Bonnie Schulkin
Teacher
Udemy

Trending Courses

Popular Courses

Popular Platforms

Learn more about the Courses

Download the Careers360 App on your Android phone

Regular exam updates, QnA, Predictors, College Applications & E-books now on your Mobile

Careers360 App
150M+ Students
30,000+ Colleges
500+ Exams
1500+ E-books