- 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
React Testing Library with Jest / Vitest
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
certificate availability
Yes
certificate providing authority
Udemy
Who it is for
What you will learn
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
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!