React Testing Deep Dive

Explore React Testing Strategies, TDD, Jest and RTL, Test Asynchronous Code & Components & More

TT4194

Intermediate

3 Days

Course Overview

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:

  • Design and organize a testing strategy for a large React app
  • Explain the challenges with testing React and format a plan to solve them
  • Write test suites and tests using Jest
  • Create mocks, spies, and stubs
  • Get code coverage statistics and push them to 100% coverage
  • Run and configure Jest
  • Use React Testing Library (RTL) to make unit and integration tests simple
  • Develop React apps using TDD with Jest and RTL.
  • Perform snapshot testing to protect against UI regression problems
  • Fire events as part of testing
  • Test asynchronous code and components

Course Objectives

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:

  • Design and organize a testing strategy for a large React app
  • Explain the challenges with testing React and format a plan to solve them
  • Write test suites and tests using Jest
  • Create mocks, spies, and stubs
  • Get code coverage statistics and push them to 100% coverage
  • Run and configure Jest
  • Use React Testing Library (RTL) to make unit and integration tests simple
  • Develop React apps using TDD with Jest and RTL.
  • Perform snapshot testing to protect against UI regression problems
  • Fire events as part of testing
  • Test asynchronous code and components

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.

Course Prerequisites

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:

  • TT4195          Mastering React | With Redux, Flux, Unit Testing, JSX & More – 5 days

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.

Course Agenda

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

Course Materials

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.

Raise the bar for advancing technology skills

Attend a Class!

Live scheduled classes are listed below or browse our full course catalog anytime

Special Offers

We regulary offer discounts for individuals, groups and corporate teams. Contact us

Custom Team Training

Check out custom training solutions planned around your unique needs and skills.

EveryCourse Extras

Exclusive materials, ongoing support and a free live course refresh with every class.

Hot Summer Savings!
Buy One Get One Free!

Enroll by September 30 in any TWO public classes in 2022 for the price of ONE! 

Click for Details & Additional Offers

Learn. Explore. Advance!

Extend your training investment! Recorded sessions, free re-sits and after course support included with Every Course
Trivera MiniCamps
Gain the skills you need with less time in the classroom with our short course, live-online hands-on events
Trivera QuickSkills: Free Courses and Webinars
Training on us! Keep your skills current with free live events, courses & webinars
Trivera AfterCourse: Coaching and Support
Expert level after-training support to help organizations put new training skills into practice on the job

The voices of our customers speak volumes

Special Offers
Limited Offer for most courses.

SAVE 50%

Learn More