React completely changes the way that web applications are built, so it's not surprising that testing web apps built with React requires modern skills and techniques geared to keep up with this fast-changing technology. React Testing Deep Dive is a hands-on course designed to show you how to properly test React apps. Throughout this fast-paced course, you'll explore, ;earn and use the real-world skills required to fully unit-test and integration-test React apps, troubleshoot React apps, and build React apps using TDD (test-driven development).
Chock full of modern testing tools and methods, this course will take you through the philosophy of testing, unit testing, and TDD. You'll learn how to maximize Jest itself with its code coverage, mocking, spying, and stubbing capabilities. The course wraps up having you apply your newly learned skills via React Testing Library so that you can prove out the UI/UX of all your React components.
Working in a hands-on learning environment you'll learn to:
This course combines expert lecture, real-world demonstrations and group discussions with machine-based practical labs and exercises. Working in a hands-on learning environment led by our expert instructor, you will:
Need different skills or topics? If your team requires different topics or tools, additional skills or custom approach, this course may be further adjusted to accommodate. We offer additional full stack, React, web developer and other related topics that may be blended with this course for a track that best suits your needs. Our team can help design the course or learning path that best meets your needs and skills goals.
This course is for intermediate skilled web developers with solid React and JavaScript programming background.
Take Before: Attendees should have experience with the topics in the following courses, or should have recently attended these as a pre-requisite:
Please see the Related Courses tab for Pre-Requisite course specifics and links, links to similar courses you might review as an alternative, as well as suggested Next-Step Follow-On Courses and Learning Path recommendations.
React from a testing perspective
How React actually works
What would you test?
How do you automate that?!?
Transpiling, bundling, minifying with webpack
Testing overview
Types of tests
Static vs dynamic
White vs black box
Testing is not debugging
Unit vs integration testing
Testing tools
Tools overview
Runners
Frameworks
Assertion libraries
Code coverage
Headless
Mocks, stubs, and spies
Automated testing with Jest
The case for automated testing
History
Why choose Jest over Jasmine for React?
How to install
How to configure
How to run
Writing a simple test
Matchers
How assertions work with matchers
All the matchers
Equality - values vs. ref
Truthy/falsy
Testing array contents
Matching RegEx
Test suites
Organizing in suites
Setups & Teardowns
Sharing variables
Writing a good test
Arrange, act, assert
Edge cases
Positive and negative tests
Testing exceptions
TDD
The phases of TDD
The case for TDD
React TDD life hacks
Mocking, Spying, and stubbing
The case for mocking
Overview
Stubs
The three ways to mock with Jest
Auto-mocking
How to auto mock
Mocking an entire library
Manual mocking
Setting up manual mocking
Things to watch out for
Restoring after a mock
Spying
When to spy; How to spy
Spying vs mocking
Testing asynchronous activities
Why this is a challenge
Setting up async tests
The done() method
Challenges with React components
Why can't we just test React?
What can't be easily tested with Jest
Problems with rendering
Rendering subcomponents
Solving those issues
The secret way to think in React testing
React Testing Library
Where it came from
History
RTL vs Enzyme
Exploring RenderResults
The render method
Properties of a RenderResult
The debug() method
Querying elements
The problem with traditional tests
Making it easy to find things on a page
get vs query
get vs find
By vs AllBy
Examples with ByText
Bonus! Querying by RegEx
Queries
The ways to query
ByLabelText
ByRole
ByTestId
ByAltText
The others
Queries by priority
The RTL matchers
Why additional matchers?
toBeInTheDocument
toBeDisabled
toBeInvalid
toContainElement
toHaveAttribute
The rest
Triggering events
The two ways to trigger an event
How to use fireEvent
The advantages of userEvent
Using userEvent
Snapshot testing
What is snapshot testing?
How to run a test
What to do when they fail
How to save the new result
Data-driven test with test.each() (time permitting)
Why do this?
Tagged templates
How to create the tests
Student Materials: Each participant will receive a Student Guide with course notes, code samples, software tutorials, step-by-step written lab instructions, diagrams and related reference materials and resource links. Students will also receive the project files (or code, if applicable) and solutions required for the hands-on work. Any courseware of lab materials provided in a cloud (if applicable) will also be made available to you separately.
Hands-On Setup Made Simple! Our dedicated tech team will work with you to ensure our ‘easy-access’ cloud-based course environment, or local installation, is accessible, fully-tested and verified as ready to go well in advance of the course start date, ensuring a smooth start to class and effective learning experience for all participants. We can also help you install this course locally if preferred. Please inquire for details and options.
Every-Course Extras = High-Value & Long-Term Learning Support! All Public Schedule courses include our unique EveryCourse Extras package (Post-Course Resource Site access with Review Labs & Live Instructor Follow-on Support, access to QuickSkills recorded High-Value lessons, Free *Live* Course Refresh Re-Takes, early access to Special Offers, Free Courses & more). Please inquire for details.
Live scheduled classes are listed below or browse our full course catalog anytime
Check out custom training solutions planned around your unique needs and skills.
Exclusive materials, ongoing support and a free live course refresh with every class.
Mix, Match & Master!
2FOR1: Two Courses, One Price!
Enroll in *any* two public courses (for 2023 *OR* 2024 dates!) by December 31, for one price! Learn something new, or share the promo!
Special Offers
Limited Offer for most courses.
SAVE 50%