HowToTest
FrontEnd
Home
Courses
About
Blog
HowToTestFrontend.com Sitemap
Site nav
Home
About
Contact
Blog
FAQ
Accessibility
Newsletter
Sitemap
Join
Your Account
Blog posts and resources
Testing async React RSC components
How to add type check assertions in Vitest
Absolutely everything you need to know about act() in React tests
Frontend Testing Glossary
Jest Cheatsheet
Welcome to the new HowToTestFrontend blog!
Courses
Jest/Vitest Testing Fundamentals
Your First Test
Execute test code with test() and it()
Organise your tests with describe() blocks
Common Matchers
Testing Numbers
Testing Strings
Testing Arrays
Testing Objects
Testing with Negation (.not)
Testing Exceptions and Errors
Async Testing with Promises
Fake timers and fake system time
Snapshots and Inline Snapshots
Setup and Teardown with beforeEach/afterEach
Using each() to loop over test data
Skip, Todo, and Only
Mocking imports and dependencies with mock()
Function Mocking (jest.fn/vi.fn)
Spying on Functions with jest.spyOn()
React Frontend Testing
Setting Up React Testing Library
Rendering React components in your tests
The screen object
The act() function
Synchronous Element Queries with React Testing Library getBy
Getting one element vs multiple elements
Optional Element Queries with React Testing Library queryBy
Asynchronous Element Queries with React Testing Library findBy
Testing interaction - userEvent vs fireEvent
Testing User Interactions (userEvent)
Testing User Interactions (fireEvent)
Testing Props
Testing Conditional Rendering
Testing Lists and Dynamic Content
waitFor() in React Testing Library
within() in React Testing Library
Testing Forms and Input Validation
Testing Component Events
Testing Custom Hooks
Testing Context Providers
Testing API Calls
Finding elements with React Testing Library queries
Intro to React Testing Library queries
GetBy, QueryBy, FindBy
Single vs Multiple queries
Picking a query function by priority
Accessing queries with the screen object
Common query options (except TextMatch)
TextMatch in detail
Getting direct access to the DOM
ByRole (common uses)
ByRole (less common uses)
ByLabelText
ByPlaceholderText
ByText
ByDisplayValue
ByAltText
ByTitle
ByTestId
React Testing Library DOM Matchers
DOM Matchers Introduction
DOM Matchers - Structure
DOM Matchers - Styling and Attributes
DOM Matchers - Element State & Visibility
DOM Matchers - Form Elements
DOM Matchers - Accessibility
Deprecated DOM Matchers