Testing Essentials

Tools

vitest offers a rich set of features to help you run and monitor your tests effectively. Whether you prefer the watch mode for continuous feedback or need the UI dashboard for detailed insights, vitest has you covered.

Enhance Your Testing Workflow with vitest

vitest is a versatile testing tool that provides various options to run tests. Here's a breakdown of how you can use it.

React Testing

React Testing Library has become the go-to for crafting unit and integration tests in the React world.

This library is your gateway to creating tests that authentically mirror user interactions, offering invaluable insights into your application's real-world functionality.

An Introduction to the React Testing Library

Daniel Afonso

Master React Testing Library: Render components, enhance UI querying, optimize testing flow, handle events, & eliminate 'not wrapped in act' warnings.

API Mocking

Understanding the nuances of networking and effectively mocking APIs are essential skills for developers striving to build efficient, reliable, and robust web applications. In this section, we'll delve into the tools, techniques, and concepts that empower developers to gain control over network requests, optimize performance, and streamline the development process.

Mock REST and GraphQL APIs with Mock Service Worker

Artem Zakharchenko

Controlling the network is the key to fast prototyping, bullet-proof tests, and efficient debugging. Mocking the APIs you use gives you this kind of control.

Debug HTTP with Chrome DevTools Network Panel

mykola bilokonsky

・ 6 lessons

This course will examine the Network panel in Chrome DevTools.

Understanding API Mocking - Part 1: The HTTP Request Journey

API mocking is a technique to intercept HTTP requests and respond to them with mocked responses.

Cypress

Cypress has emerged as one of the most favored testing tools among frontend developers, offering a comprehensive solution for testing modern web applications. In this section, we'll explore the capabilities of Cypress, a powerful testing framework designed to simplify and streamline the testing process for web developers.

Add e2e tests with cypress to a React application

Tomasz Łakomy

・ 12 lessons

Learn how to add e2e tests with cypress.io to an existing React app, ensure the app works as intended, and add features using Cypress Driven Development.

Test Network Edge Cases with .intercept() Command in Cypress

Filip Hric

・ 10 lessons

Learn how to set up and test different network conditions using the Cypress intercept command.

A Practical Guide to Intercepting Network Requests in Cypress

In this article, we walk you through some of the capabilities of Cypress’ .intercept() command. It is a super useful tool, especially for testing hard-to-reach places of your app.

Testing Accessibility

In today's digital age, ensuring that web applications are accessible to all users is not just a matter of good practice—it's a necessity. This section is designed to equip you with the knowledge and skills necessary to create web applications that are inclusive and accessible to everyone.

Develop Accessible Web Apps with React

Erin Doyle

・ 28 lessons

Have a jump start on auditing and fixing accessibility issues in your applications and gain a better understanding of your target users and how to approach your web app design.

Auditing React Apps for Accessibility

Erin Doyle

・ 9 lessons

At the end of this course, you will be able to add auditing tools to your development workflow for accessibility issues in your applications and ultimately automate those audits.

Create an Accessible Audio Player with the HTML Media Element and React

Lindsey Kopacz

・ 15 lessons

We'll be focusing on building an accessible component by using a built-in browser API with React to implement best practices in accessibility custom features.