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