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
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
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
Sorry! It looks like we haven’t updated our dates for the class you selected yet. There’s a quick way to find out. Contact us at 502.265.3057 or email info@training4it.com
Request a Date