HowToTest
FrontEnd
Home
Courses
About
Blog
Search
HowToTestFrontend.com Sitemap
Site nav
Home
About
Contact
Blog
FAQ
Accessibility
Search
Newsletter
Sitemap
Join
Your Account
Blog posts and resources
From 88 to 24 Seconds: Drop-In Replacements That Cut CI/CD Runtime by Over Half on my frontend app
Vitest vs Jest: Why I would always pick Vitest over Jest in 2026
Why you should start using projects in Vitest configuration
How to write good frontend tests: 37 tips and tricks
Vitest Browser Mode - The Future of Frontend Testing
Automated Accessibility Testing for React - Tools and Best Practices you can use
Introducing Interactive Testing Challenges to How To Test Frontend.com
Absolutely everything you need to know about act() in React tests
Testing async React RSC components
How to add type check assertions in Vitest
Frontend Testing Glossary
Jest Cheatsheet
Welcome to the new HowToTestFrontend blog!
Code snippets and cheat sheets
How to migrate from Jest to Vitest
Flush all Promises (for tests)
React Testing Library - Targeting elements with data-testid
View all
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
React Test Challenges
Challenge: Where is the rendered component?
Challenge: Keyboard shortcut combinations
Challenge: When localStorage leaks between tests
Challenge: Split text
Challenge: Use a RegExp to find elements
Challenge: Screen Reader Only Text
Challenge: Select one of many elements
Challenge: element seems to have old content?
Challenge: Fix this async click behaviour test
Challenge: how can both assertions be passing?
Vitest and Jest Test Challenges
Challenge: Testing a debounced function
Challenge: fix this each() with beforeAll() bug
Challenge: partial object matches - a few approaches
Challenge: Using spyOn with getters
Challenge: fix the spy problem!
Challenge: Async expect().resolves bug
Challenge: fix this empty value test bug
Vitest Browser Mode
What is Vitest Browser Mode
Installing Vitest Browser Mode
Configuring & Selecting a Provider in Vitest Browser Mode
Vitest configuration projects
Setting up Vitest Browser Mode in your CI/CD Pipeline
Writing Vitest Browser Mode Tests Introduction
Rendering React Components in Browser Mode
Testing Hooks in Vitest Browser Mode
Vitest Browser Mode Locators - Introduction
Locators - getting a single element
Locators - async behaviour/polling
Locators - getting multiple elements
Locators - asserting with no matching elements
Vitest Browser Mode Locators - The Seven Query Functions
Vitest Browser Mode Locators - The Modifier Functions
Vitest Browser Mode Locators - The Interactive Methods
Vitest Browser Mode Assertions Overview
Vitest Browser Mode Assertions - Forms
Vitest Browser Mode Assertions - Accessibility
Interactivity API - userEvent Guide
Browser Mode Context Module
Vitest Browser Mode Visual Regression Testing Guide
Vitest Browser Mode mocking and spyOn