React Testing Deep Dive

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.