# HowToTestFrontend > Biggest and best resource about learning how to write good quality tests for frontend applications (such as your React or NextJS app), including how to write good tests, how to use libraries and tools such as Vitest, Jest, React Testing Library and more. ## Optional - [Full content index (llms-full.txt)](https://howtotestfrontend.com/llms-full.txt) ## Main navigation pages - [Home](https://howtotestfrontend.com/) - [Courses](https://howtotestfrontend.com/courses) - [Resources](https://howtotestfrontend.com/resources) - [Snippets](https://howtotestfrontend.com/snippets) - [About](https://howtotestfrontend.com/static/about) - [FAQ](https://howtotestfrontend.com/static/faq) - [Contact](https://howtotestfrontend.com/static/contact) ## In depth blog posts about frontend testing: - [React Testing Questions That Trip Up Engineers](https://howtotestfrontend.com/resources/react-testing-interview-questions) - [Code Smells when you get AI to write your Frontend Tests](https://howtotestfrontend.com/resources/frontend-ai-generated-test-code-smells) - [Why you should use Faker to improve the quality of your tests](https://howtotestfrontend.com/resources/why-you-should-use-faker) - [Frontend Libraries and Tools You Should Be Aware Of](https://howtotestfrontend.com/resources/frontend-libraries-and-tools-you-should-be-aware-of) - [From 88 to 24 Seconds: Drop-In Replacements That Cut CI/CD Runtime by Over Half on my frontend app](https://howtotestfrontend.com/resources/speed-up-ci-on-frontend-apps) - [Vitest vs Jest: Why I would always pick Vitest over Jest in 2026](https://howtotestfrontend.com/resources/vitest-vs-jest-which-to-pick) - [Why you should start using projects in Vitest configuration](https://howtotestfrontend.com/resources/vitest-config-projects) - [How to write good frontend tests: 37 tips and tricks](https://howtotestfrontend.com/resources/how-to-write-good-frontend-tests) - [Vitest Browser Mode - The Future of Frontend Testing](https://howtotestfrontend.com/resources/vitest-browser-mode-guide-and-setup-info) - [Automated Accessibility Testing for React - Tools and Best Practices you can use](https://howtotestfrontend.com/resources/accessibility-testing-your-react-app) - [Introducing Interactive Testing Challenges to How To Test Frontend.com](https://howtotestfrontend.com/resources/introducing-testing-challenges-on-howtotestfrontend.com) - [Absolutely everything you need to know about act() in React tests](https://howtotestfrontend.com/resources/react-act-function-everything-you-need-to-know) - [Testing async React RSC components](https://howtotestfrontend.com/resources/testing-async-react-rsc-components) - [How to add type check assertions in Vitest](https://howtotestfrontend.com/resources/add-type-checks-to-your-tests-in-vitest) - [Frontend Testing Glossary](https://howtotestfrontend.com/resources/frontend-testing-glossary) - [Jest Cheatsheet](https://howtotestfrontend.com/resources/jest-cheatsheet) - [Welcome to the new HowToTestFrontend blog!](https://howtotestfrontend.com/resources/welcome) ## Snippets and cheat sheets - [How to migrate from Jest to Vitest](https://howtotestfrontend.com/snippets/migrate-from-jest-to-vitest) - [Flush all Promises (for tests)](https://howtotestfrontend.com/snippets/flush-all-promises-in-tests) - [React Testing Library - Targeting elements with data-testid](https://howtotestfrontend.com/snippets/using-test-ids) ## Learn How To Test Frontend Courses and lessons ### [Jest/Vitest Testing Fundamentals](https://howtotestfrontend.com/courses/jest-vitest-fundamentals) - [Jest/Vitest Testing Fundamentals: Your First Test](https://howtotestfrontend.com/courses/jest-vitest-fundamentals/your-first-test) - [Jest/Vitest Testing Fundamentals: Execute test code with test() and it()](https://howtotestfrontend.com/courses/jest-vitest-fundamentals/test-structure-test-it) - [Jest/Vitest Testing Fundamentals: Organise your tests with describe() blocks](https://howtotestfrontend.com/courses/jest-vitest-fundamentals/test-structure-describe) - [Jest/Vitest Testing Fundamentals: Common Matchers](https://howtotestfrontend.com/courses/jest-vitest-fundamentals/common-matchers) - [Jest/Vitest Testing Fundamentals: Testing Numbers](https://howtotestfrontend.com/courses/jest-vitest-fundamentals/testing-numbers) - [Jest/Vitest Testing Fundamentals: Testing Strings](https://howtotestfrontend.com/courses/jest-vitest-fundamentals/testing-strings) - [Jest/Vitest Testing Fundamentals: Testing Arrays](https://howtotestfrontend.com/courses/jest-vitest-fundamentals/testing-arrays) - [Jest/Vitest Testing Fundamentals: Testing Objects](https://howtotestfrontend.com/courses/jest-vitest-fundamentals/testing-objects) - [Jest/Vitest Testing Fundamentals: Testing with Negation (.not)](https://howtotestfrontend.com/courses/jest-vitest-fundamentals/testing-negation-not) - [Jest/Vitest Testing Fundamentals: Testing Exceptions and Errors](https://howtotestfrontend.com/courses/jest-vitest-fundamentals/testing-exceptions) - [Jest/Vitest Testing Fundamentals: Async Testing with Promises](https://howtotestfrontend.com/courses/jest-vitest-fundamentals/async-testing-promises) - [Jest/Vitest Testing Fundamentals: Fake timers and fake system time](https://howtotestfrontend.com/courses/jest-vitest-fundamentals/testing-timers) - [Jest/Vitest Testing Fundamentals: Snapshots and Inline Snapshots](https://howtotestfrontend.com/courses/jest-vitest-fundamentals/snapshots-and-inline-snapshots) - [Jest/Vitest Testing Fundamentals: Setup and Teardown with beforeEach/afterEach](https://howtotestfrontend.com/courses/jest-vitest-fundamentals/setup-teardown-before-after) - [Jest/Vitest Testing Fundamentals: Using each() to loop over test data](https://howtotestfrontend.com/courses/jest-vitest-fundamentals/vitest-each-and-jest-each) - [Jest/Vitest Testing Fundamentals: Skip, Todo, and Only](https://howtotestfrontend.com/courses/jest-vitest-fundamentals/skip-todo-only) - [Jest/Vitest Testing Fundamentals: Mocking imports and dependencies with mock()](https://howtotestfrontend.com/courses/jest-vitest-fundamentals/mocking-imports-with-jest-mock-or-vi-mock) - [Jest/Vitest Testing Fundamentals: Function Mocking (jest.fn/vi.fn)](https://howtotestfrontend.com/courses/jest-vitest-fundamentals/mock-functions-basics) - [Jest/Vitest Testing Fundamentals: Spying on Functions with jest.spyOn()](https://howtotestfrontend.com/courses/jest-vitest-fundamentals/spying-functions-jest-vitest-spyon) ### [React Frontend Testing](https://howtotestfrontend.com/courses/react-frontend-testing) - [React Frontend Testing: Setting Up React Testing Library](https://howtotestfrontend.com/courses/react-frontend-testing/setting-up-react-testing-library) - [React Frontend Testing: Rendering React components in your tests](https://howtotestfrontend.com/courses/react-frontend-testing/rendering-react-components-in-react-testing-library) - [React Frontend Testing: The screen object](https://howtotestfrontend.com/courses/react-frontend-testing/react-testing-library-screen) - [React Frontend Testing: The act() function](https://howtotestfrontend.com/courses/react-frontend-testing/react-testing-act-function) - [React Frontend Testing: Synchronous Element Queries with React Testing Library getBy](https://howtotestfrontend.com/courses/react-frontend-testing/synchronous-element-react-testing-library-queries-getby) - [React Frontend Testing: Getting one element vs multiple elements](https://howtotestfrontend.com/courses/react-frontend-testing/react-testing-library-getby-vs-getallby) - [React Frontend Testing: Optional Element Queries with React Testing Library queryBy](https://howtotestfrontend.com/courses/react-frontend-testing/optional-element-queries-queryby-react-testing-library) - [React Frontend Testing: Asynchronous Element Queries with React Testing Library findBy](https://howtotestfrontend.com/courses/react-frontend-testing/async-element-queries-findby-react-testing-library) - [React Frontend Testing: Testing interaction - userEvent vs fireEvent](https://howtotestfrontend.com/courses/react-frontend-testing/testing-user-interactions-userevent-vs-fireevent) - [React Frontend Testing: Testing User Interactions (userEvent)](https://howtotestfrontend.com/courses/react-frontend-testing/testing-user-interactions-userevent) - [React Frontend Testing: Testing User Interactions (fireEvent)](https://howtotestfrontend.com/courses/react-frontend-testing/testing-user-interactions) - [React Frontend Testing: Testing Props](https://howtotestfrontend.com/courses/react-frontend-testing/testing-react-props) - [React Frontend Testing: Testing Conditional Rendering](https://howtotestfrontend.com/courses/react-frontend-testing/testing-conditional-rendering) - [React Frontend Testing: Testing Lists and Dynamic Content](https://howtotestfrontend.com/courses/react-frontend-testing/testing-lists-dynamic-content) - [React Frontend Testing: waitFor() in React Testing Library](https://howtotestfrontend.com/courses/react-frontend-testing/wait-for-react-testing-library) - [React Frontend Testing: within() in React Testing Library](https://howtotestfrontend.com/courses/react-frontend-testing/within-react-testing-library) - [React Frontend Testing: Testing Forms and Input Validation](https://howtotestfrontend.com/courses/react-frontend-testing/testing-forms-validation) - [React Frontend Testing: Testing Component Events](https://howtotestfrontend.com/courses/react-frontend-testing/testing-component-events) - [React Frontend Testing: Testing Custom Hooks](https://howtotestfrontend.com/courses/react-frontend-testing/testing-custom-hooks) - [React Frontend Testing: Testing Context Providers](https://howtotestfrontend.com/courses/react-frontend-testing/testing-context-providers) - [React Frontend Testing: Testing API Calls](https://howtotestfrontend.com/courses/react-frontend-testing/testing-api-calls) ### [Finding elements with React Testing Library queries](https://howtotestfrontend.com/courses/finding-elements-with-react-testing-library-queries) - [Finding elements with React Testing Library queries: Intro to React Testing Library queries](https://howtotestfrontend.com/courses/finding-elements-with-react-testing-library-queries/rtl-queries-intro) - [Finding elements with React Testing Library queries: GetBy, QueryBy, FindBy](https://howtotestfrontend.com/courses/finding-elements-with-react-testing-library-queries/rtl-queries-getby-vs-queryby-vs-findby) - [Finding elements with React Testing Library queries: Single vs Multiple queries](https://howtotestfrontend.com/courses/finding-elements-with-react-testing-library-queries/rtl-queries-single-multiple) - [Finding elements with React Testing Library queries: Picking a query function by priority](https://howtotestfrontend.com/courses/finding-elements-with-react-testing-library-queries/rtl-queries-priority) - [Finding elements with React Testing Library queries: Accessing queries with the screen object](https://howtotestfrontend.com/courses/finding-elements-with-react-testing-library-queries/rtl-queries-screen) - [Finding elements with React Testing Library queries: Common query options (except TextMatch)](https://howtotestfrontend.com/courses/finding-elements-with-react-testing-library-queries/rtl-query-options) - [Finding elements with React Testing Library queries: TextMatch in detail](https://howtotestfrontend.com/courses/finding-elements-with-react-testing-library-queries/rtl-query-textmatch) - [Finding elements with React Testing Library queries: Getting direct access to the DOM](https://howtotestfrontend.com/courses/finding-elements-with-react-testing-library-queries/rtl-query-direct-access-to-dom) - [Finding elements with React Testing Library queries: ByRole (common uses)](https://howtotestfrontend.com/courses/finding-elements-with-react-testing-library-queries/rtl-byrole-in-depth) - [Finding elements with React Testing Library queries: ByRole (less common uses)](https://howtotestfrontend.com/courses/finding-elements-with-react-testing-library-queries/rtl-byrole-in-depth-advanced) - [Finding elements with React Testing Library queries: ByLabelText](https://howtotestfrontend.com/courses/finding-elements-with-react-testing-library-queries/rtl-bylabeltext-in-depth) - [Finding elements with React Testing Library queries: ByPlaceholderText](https://howtotestfrontend.com/courses/finding-elements-with-react-testing-library-queries/rtl-byplaceholdertext-in-depth) - [Finding elements with React Testing Library queries: ByText](https://howtotestfrontend.com/courses/finding-elements-with-react-testing-library-queries/rtl-bytext-in-depth) - [Finding elements with React Testing Library queries: ByDisplayValue](https://howtotestfrontend.com/courses/finding-elements-with-react-testing-library-queries/rtl-bydisplayvalue-in-depth) - [Finding elements with React Testing Library queries: ByAltText](https://howtotestfrontend.com/courses/finding-elements-with-react-testing-library-queries/rtl-byalttext-in-depth) - [Finding elements with React Testing Library queries: ByTitle](https://howtotestfrontend.com/courses/finding-elements-with-react-testing-library-queries/rtl-bytitle-in-depth) - [Finding elements with React Testing Library queries: ByTestId](https://howtotestfrontend.com/courses/finding-elements-with-react-testing-library-queries/rtl-bytestid-in-depth) ### [React Testing Library DOM Matchers](https://howtotestfrontend.com/courses/react-testing-library-dom-matchers) - [React Testing Library DOM Matchers: DOM Matchers Introduction](https://howtotestfrontend.com/courses/react-testing-library-dom-matchers/react-testing-dom-matchers-intro) - [React Testing Library DOM Matchers: DOM Matchers - Structure](https://howtotestfrontend.com/courses/react-testing-library-dom-matchers/react-testing-dom-matchers-structure) - [React Testing Library DOM Matchers: DOM Matchers - Styling and Attributes](https://howtotestfrontend.com/courses/react-testing-library-dom-matchers/react-testing-dom-matchers-styling-and-attributes) - [React Testing Library DOM Matchers: DOM Matchers - Element State & Visibility](https://howtotestfrontend.com/courses/react-testing-library-dom-matchers/react-testing-dom-matchers-state-visibility) - [React Testing Library DOM Matchers: DOM Matchers - Form Elements](https://howtotestfrontend.com/courses/react-testing-library-dom-matchers/react-testing-dom-matchers-form) - [React Testing Library DOM Matchers: DOM Matchers - Accessibility](https://howtotestfrontend.com/courses/react-testing-library-dom-matchers/react-testing-dom-matchers-accessibility) - [React Testing Library DOM Matchers: Deprecated DOM Matchers](https://howtotestfrontend.com/courses/react-testing-library-dom-matchers/rtl-deprecated-matchers) ### [React Test Challenges](https://howtotestfrontend.com/courses/react-test-challenges) - [React Test Challenges: Challenge: Where is the rendered component?](https://howtotestfrontend.com/courses/react-test-challenges/testing-challenge-where-is-rendered-component) - [React Test Challenges: Challenge: Keyboard shortcut combinations](https://howtotestfrontend.com/courses/react-test-challenges/react-challenge-keyboard-shortcut-combinations) - [React Test Challenges: Challenge: When localStorage leaks between tests](https://howtotestfrontend.com/courses/react-test-challenges/react-challenge-localstorage-leaking-between-tests) - [React Test Challenges: Challenge: Split text](https://howtotestfrontend.com/courses/react-test-challenges/testing-challenge-split-text) - [React Test Challenges: Challenge: Use a RegExp to find elements](https://howtotestfrontend.com/courses/react-test-challenges/react-challenge-regex) - [React Test Challenges: Challenge: Screen Reader Only Text](https://howtotestfrontend.com/courses/react-test-challenges/react-challenge-screen-reader-only-text) - [React Test Challenges: Challenge: Select one of many elements](https://howtotestfrontend.com/courses/react-test-challenges/react-challenge-select-one-of-many) - [React Test Challenges: Challenge: element seems to have old content?](https://howtotestfrontend.com/courses/react-test-challenges/react-challenge-element-has-old-content) - [React Test Challenges: Challenge: Fix this async click behaviour test](https://howtotestfrontend.com/courses/react-test-challenges/react-challenge-fix-async-test-bug) - [React Test Challenges: Challenge: how can both assertions be passing?](https://howtotestfrontend.com/courses/react-test-challenges/react-challenge-both-assertions-passing) ### [Vitest and Jest Test Challenges](https://howtotestfrontend.com/courses/vitest-and-jest-test-challenges) - [Vitest and Jest Test Challenges: Challenge: Testing a debounced function](https://howtotestfrontend.com/courses/vitest-and-jest-test-challenges/react-challenge-testing-debounce) - [Vitest and Jest Test Challenges: Challenge: fix this each() with beforeAll() bug](https://howtotestfrontend.com/courses/vitest-and-jest-test-challenges/react-challenge-each-with-before-all-bug-in-tests) - [Vitest and Jest Test Challenges: Challenge: partial object matches - a few approaches](https://howtotestfrontend.com/courses/vitest-and-jest-test-challenges/test-challenge-partial-object-matches) - [Vitest and Jest Test Challenges: Challenge: Using spyOn with getters](https://howtotestfrontend.com/courses/vitest-and-jest-test-challenges/react-challenge-spyon-with-getters) - [Vitest and Jest Test Challenges: Challenge: fix the spy problem!](https://howtotestfrontend.com/courses/vitest-and-jest-test-challenges/react-challenge-fix-spy-problem) - [Vitest and Jest Test Challenges: Challenge: Async expect().resolves bug](https://howtotestfrontend.com/courses/vitest-and-jest-test-challenges/test-challenge-async-expect-resolves-bug) - [Vitest and Jest Test Challenges: Challenge: fix this empty value test bug](https://howtotestfrontend.com/courses/vitest-and-jest-test-challenges/test-challenge-fix-empty-value-test-bug) ### [Vitest Browser Mode](https://howtotestfrontend.com/courses/vitest-browser-mode) - [Vitest Browser Mode: What is Vitest Browser Mode](https://howtotestfrontend.com/courses/vitest-browser-mode/what-is-vitest-browser-mode) - [Vitest Browser Mode: Installing Vitest Browser Mode](https://howtotestfrontend.com/courses/vitest-browser-mode/installing-vitest-browser-mode) - [Vitest Browser Mode: Configuring & Selecting a Provider in Vitest Browser Mode](https://howtotestfrontend.com/courses/vitest-browser-mode/selecting-a-provider) - [Vitest Browser Mode: Vitest configuration projects](https://howtotestfrontend.com/courses/vitest-browser-mode/vitest-configuration-projects) - [Vitest Browser Mode: Setting up Vitest Browser Mode in your CI/CD Pipeline](https://howtotestfrontend.com/courses/vitest-browser-mode/setting-up-vitest-browser-mode-ci-cd) - [Vitest Browser Mode: Writing Vitest Browser Mode Tests Introduction](https://howtotestfrontend.com/courses/vitest-browser-mode/writing-vitest-browser-mode-tests-intro) - [Vitest Browser Mode: Rendering React Components in Browser Mode](https://howtotestfrontend.com/courses/vitest-browser-mode/rendering-react-components-browser-mode) - [Vitest Browser Mode: Testing Hooks in Vitest Browser Mode](https://howtotestfrontend.com/courses/vitest-browser-mode/vitest-browser-mode-test-react-hooks) - [Vitest Browser Mode: Vitest Browser Mode Locators - Introduction](https://howtotestfrontend.com/courses/vitest-browser-mode/vitest-browser-mode-locators-intro) - [Vitest Browser Mode: Locators - getting a single element](https://howtotestfrontend.com/courses/vitest-browser-mode/vitest-browser-mode-locators-get-single-element) - [Vitest Browser Mode: Locators - async behaviour/polling](https://howtotestfrontend.com/courses/vitest-browser-mode/vitest-browser-mode-locators-async-polling) - [Vitest Browser Mode: Locators - getting multiple elements](https://howtotestfrontend.com/courses/vitest-browser-mode/vitest-browser-mode-locators-get-multiple-elements) - [Vitest Browser Mode: Locators - asserting with no matching elements](https://howtotestfrontend.com/courses/vitest-browser-mode/vitest-browser-mode-locators-assert-no-matching) - [Vitest Browser Mode: Vitest Browser Mode Locators - The Seven Query Functions](https://howtotestfrontend.com/courses/vitest-browser-mode/vitest-browser-mode-seven-query-functions) - [Vitest Browser Mode: Vitest Browser Mode Locators - The Modifier Functions](https://howtotestfrontend.com/courses/vitest-browser-mode/vitest-browser-mode-modifier-functions) - [Vitest Browser Mode: Vitest Browser Mode Locators - The Interactive Methods](https://howtotestfrontend.com/courses/vitest-browser-mode/vitest-browser-mode-interactive-methods) - [Vitest Browser Mode: Vitest Browser Mode Assertions Overview](https://howtotestfrontend.com/courses/vitest-browser-mode/vitest-browser-mode-assertions-overview) - [Vitest Browser Mode: Vitest Browser Mode Assertions - Forms](https://howtotestfrontend.com/courses/vitest-browser-mode/vitest-browser-mode-form-assertions) - [Vitest Browser Mode: Vitest Browser Mode Assertions - Accessibility](https://howtotestfrontend.com/courses/vitest-browser-mode/vitest-browser-mode-accessibility-assertions) - [Vitest Browser Mode: Interactivity API - userEvent Guide](https://howtotestfrontend.com/courses/vitest-browser-mode/interactivity-api-user-event-guide) - [Vitest Browser Mode: Browser Mode Context Module](https://howtotestfrontend.com/courses/vitest-browser-mode/browser-mode-context-module) - [Vitest Browser Mode: Vitest Browser Mode Visual Regression Testing Guide](https://howtotestfrontend.com/courses/vitest-browser-mode/vitest-browser-mode-visual-regression-screenshot-lesson) - [Vitest Browser Mode: Vitest Browser Mode mocking and spyOn](https://howtotestfrontend.com/courses/vitest-browser-mode/vitest-browser-mode-mock-and-spyon)