IntroductionCourse Outline

Duration

3 Days

Overview

React completely changes the way that web apps are built so it's not surprising that testing web apps built with React is also different. This React Testing training teaches React developers how to leverage the modern testing tools and methods available in React. Participants learn the philosophy of testing, unit testing, and TDD, and how to maximize Jest itself with its code coverage, mocking, spying, and stubbing capabilities.

Objectives

  • 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

Audience 

Experienced React developers who want to understand the most effective ways to test their React apps.

Prerequisites

All attendees must have a strong knowledge of React and JavaScript. Solid HTML5 and CSS knowledge is helpful.

Outline for React Testing Training

  • 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
    • An overview
  • 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
  • Conclusion