When does class start/end?
Classes begin promptly at 9:00 am, and typically end at 5:00 pm.
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
