7854  Reviews star_rate star_rate star_rate star_rate star_half

React Testing

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...

Read More
$2,090 USD
Course Code TP3345
Duration 3 days
Available Formats Classroom

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.

Skills Gained

  • 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

Who Can Benefit

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.

Course Details

Outline

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