Artem Zakharchenko

This workshop covers testing framework structure, asynchronous code, and migrating to Vitest.

Testing Fundamentals Workshop Introduction

Introduction

In this first section, you'll learn by example the core principle of having intentions when testing.

Overview of Testing Principles

Learn how writing an automated test captures your intentions, while manually calling console.log() and viewing the result only really lives in your head.

Learn how you can explicitly define your intentions and automatically test your code without any testing frameworks.

Implement the Automated Greeting Test

Write an Intentional Test

Learn how to create an expect function that provides a readable API for writing tests and refactor existing tests to use it.

Trusting Your Test

Debugging Intent vs. Implementation

You've completed the principles exercise!

Testing Principles Outro

Principles

In this exercise, you will learn about the setup, action, and assertion phases of automated testing and how they applied to testing our simple greet function.

Structure Your Tests

Learn how to write declarative and readable assertions in your TypeScript tests using a custom expect function.

Implement a Declarative API

Imperative vs. Declarative Assertions

In this exercise, you will figure out how to create a test function to isolate and report test results.

Learn how to create a simple testing function in JavaScript to wrap existing tests, provide meaningful test names, and display visual indicators.

Create Test Blocks for Better Organization

Isolating Tests with Test Blocks

In this exercise you'll be figuring out how to separate the test cases into a separate module and make testing functions globally available.

Learn how to gracefully move tests to a separate file, export functions, make test functions global, and run tests using Node.js.

Modular Tests and Global Helpers

Move Tests into Modules

Learn how to handle side effects introduced by the Date constructor in your JavaScript tests.

Create global hooks for setup and tear-down, mock the Date constructor using a Proxy, and then restore it after your tests are ran.

Implement Hooks for Test Setup & Cleanup

Handle Test Side Effects

You learned how to write declarative assertions, provide test isolation, put your tests in separate files, and deal with testing setup.

Test Structure Recap

Test Structure

In this exercise, you will expand your testing library to support testing asynchronous code, and then write tests for an asynchronous greet function.

Overview of Testing Async Code

In this problem, you'll need to figure out how to adjust the test function to support asynchronous callbacks.

Learn how to handle asynchronous functions in tests by using the `await` keyword and marking test functions as asynchronous. 

Awaiting Async Tests

Handling Promises in Tests

In this problem, you will need to figure out how to handle a pending promise and then chain .rejects.toThrow on expect.

In this solution, you'll learn how to use the object chaining syntax to extend the `expect` function with a new assertion called `rejects`.

Handling Promise Rejections

Error Assertions for Rejected Promises

In this problem, you'll create a waitFor method that can await state changes to a notification manager.

Learn how to use a waitFor method to retry a callback until it no longer throws an error or until the maximum number of retries is reached.

Reliably Wait for Async Operations

Testing with Async Side Effects

You've learned about asynchronicity that you can and can't control, and testing strategies for dealing with both.

Recap of Testing Asynchronous Code

Testing Asynchronous Code

In this final section, you'll be migrating your tests to Vitest.

Overview of Vitest

Your task is to follow the outlined steps to migrate your project from your custom framework to Vitest.

Congrats! You are now ready to apply everything you've learned today about testing in practice!

Installing, Configuring, and Testing in Vitest

Migrate Tests to Vitest

Outro to the Moving to Vitest section of the Testing Fundamentals workshop.

Vitest Review

Moving to Vitest

After completing this workshop you are now equipped to approach any test. There is a lot more to learn about testing! Be sure to check out the linked materials.

Testing Fundamentals Workshop Outro

Testing Fundamentals

Intro to Mocking Techniques in Vitest

Workshop Introduction

Intro to Boundaries

Test boundaries

Recap of Boundaries

Boundaries

Intro to Functions

Mock functions

Spies

Mock implementation

Recap of Functions

Functions

Intro to Date and time

Date and time

Timers

Ticks and tasks

Recap of Date and time

Intro to Globals

Global methods

Global values

Environment variables

Recap of Globals

Globals

Intro to Network

Set up MSW

Mock responses

Error responses

Network errors

Response delay

Recap of Network

Network

Intro to Modules

Dependency injection

Private side effects

Recap of Modules

Modules

Mocking Techniques in Vitest Outro

Workshop Outro

Mocking Techniques in Vitest

Learn about the world of React component testing using Vitest and discover best practices that will help you write reliable and maintainable tests for your components.

Introduction to React Component Testing with Vitest Browser Mode

Explore the history of browser-like environments, their advantages and disadvantages, and reasons to switch to actual browser testing.

Sunsetting JSDOM

Break JSDOM

Learn about the challenges of browser-like environments such as GSDOM, how it impacts component testing, and how to utilize Vitest browser mode as a solution.

Recap Of Sunsetting JSDOM

Vitest new browser mode promotes a proper component testing strategy, allowing you to run tests in actual browsers rather than simulated Node.js environments.

Vitest Browser Mode

Learn how to install Vitas Browser Mode dependencies and configure your React project for seamless browser-based testing of your components.

Streamline your testing process by updating your tasks to utilize Vitest's powerful browser mode capabilities.

Installation and Setup

Learn how to transform your existing test cases for React components by switching from React test library to Vitest.

Get started with Vitest Browser Mode and experience improved React component testing through well-structured concepts like locator objects and streamlined element selectors.

Migrate The Test

Learn how to make your browser testing more reliable and explicit by switching from the default preview provider to PlayWrite in Vitest.

Learn how to install and configure Playwright as a browser automation tool for Vitest, ensuring more reliable component testing for your web applications.

Playwright

Make sure your component tests include the necessary styles for both visual consistency and accessibility, by updating your testing setup.

Learn how to apply styles consistently to all component tests and use a global browser setup to handle unique situations.

Shared Assets

Learn how to configure Vitest to handle unit tests, integration tests, and component tests within the same codebase for efficient testing.

Understand how to distinguish between unit and browser tests with Vitest workspaces for better organization, smooth execution, and easier debugging.

Multiple Workspaces

Dive into the versatile world of Vitest Browser Remote, exploring installation, migration, custom asset loading, and best practices for component-level testing.

Outro Vitest Browser Mode

Improve your component testing knowledge through a guided exploration of accessibility selectors, user events, API mocking, element presence, and page navigation to ensure high-quality web applications.

Best Practices

Learn how to test React components by focusing on user interactions and selecting elements in an accessible way.

Queries

Move beyond basic component tasks to interact with UI elements, just like real users do, for more effective browser automation testing.

Writing test cases to simulate user interactions for applying discount codes using Playwright and Vitest.

User Events

Network Mocking

Learn how to build reliable tests for element presence and disappearance in discount form applications, while avoiding false positives.

Explore techniques to test React components using Vitest, including waiting for elements to appear or disappear efficiently and accurately without inversing assertions.

Element Presence

Learn how to create a custom wrapper function in React Router to provide the missing routing context to your isolated component tests.

Discover how to use React Router's Memory Router to achieve better test boundaries and maintain component-level test isolation.

Page Navigation

Gain in-depth knowledge of web testing best practices and lay the groundwork for successfully debugging test failures.

Recap Of Best Practices

Learn to conquer failing tests with advanced debugging techniques in this exercise focused on component-level tests in the browser.

Debugging Tests

Learn helpful strategies for debugging component tests by examining the DOM state at different points during the test execution process.

Learn how to efficiently debug your DOM issues using the debug method from Vitest, locating specific elements and fixing layout problems.

DOM Snapshots

Uncover the power of the debugger statement in JavaScript and explore how to set up Visual Studio Code for debugging and attaching to browser tests.

Troubleshoot and debug failing tests more effectively with breakpoints and debug mode, making test execution stop so that you can examine the problematic steps.

Debugger

Learn debugging features such as in-line breakpoints and conditional breakpoints, and see how they can help you tackle the root cause of complex issues in your JavaScript codebase.

Learn how to use conditional breakpoints to effectively debug issues with React components and understand their implications in your tests.

Breakpoints

Find out how to quickly deal with failed tests while increasing productivity and embracing CI pipelines using a variety of JavaScript debugging techniques.

Recap Of Debugging

Improve your web development skills by learning advanced component testing methodologies, effective debugging techniques, and how to put your newfound knowledge into practice.

React Component Testing with Vitest Outro

Outro

React Component Testing with Vitest

Learn advanced Vitest patterns: IDE setup, multi-project config, custom fixtures, matchers, profiling, and speeding up slow test suites.

Advanced Vitest Patterns Introduction

Boost your productivity in Vitest with IDE integration and smart config options that streamline writing and running your tests.

Setup Introduction

Set up the Vitest extension in VS Code to view, run, and debug tests directly in the editor for a smoother testing workflow.

Run tests inline, watch them continuously, and debug failed cases in VS Code with the Vitest extension for faster feedback.

Visual Studio Code extension solution

Visual Studio Code extension

Configure Vitest with multiple workspaces to separate unit tests and edge tests, each running in the right environment.

Set up Vitest with unit and edge workspaces, using node and edge-runtime environments, to test different layers of your app.

Multiple Workspaces Solution

Enable and configure code coverage in Vitest with the v8 provider to review test gaps and identify untested parts of your code.

Enable code coverage in Vitest with the v8 provider, generate HTML reports, preview in Vitest UI, and spot untested code paths.

Code Coverage Solution

Code Coverage

Take a short break before we dive into customizing the test context and extending Vitest to better fit your workflow.

Setup Outro

Setup

Learn how to use custom fixtures in Vitest to hide setup complexity and make your tests read like simple, focused scenarios.

Context Introduction

Extend Vitest with custom fixtures like createMockCart() using Faker to generate test data and simplify cart total calculations.

Learn how to extend Vitest with custom fixtures like createMockCart, using Faker for mock data and best practices for test design.

Custom Fixtures Solution

Custom Fixtures

Make Vitest fixtures run automatically by disabling lazy initialization—useful for global setups like mocked databases or APIs.

Enable automatic Vitest fixtures with auto: true to ensure setup and cleanup always run—ideal for mocks like databases or APIs.

Automatic Fixtures Solution

Automatic Fixtures

You’ve built custom fixtures and improved your test setup. Next up: assertions, matchers, and equality testers.


Context Outro

Context

Assertions define your expectations. Learn to write powerful matchers, clearer failures, and handle complex states with ease.

Assertions Introduction

Use custom Vitest matchers like .toMatchSchema() to validate data against Zod schemas, reducing test boilerplate and improving clarity.

Create custom Vitest matchers like .toMatchSchema() with Zod for cleaner, type-safe tests and extend expect directly in setup.

Custom Matchers Solution

Custom Matchers

Learn how asymmetric matchers work in Vitest and extend types so custom matchers like .toMatchSchema() are recognized by TypeScript.

The Testing Bundle

The Testing Bundle