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

Test Structure Recap

[00:00] Whoa! You completed the test structure exercise. That's been a lot of information from how to write declarative assertions, to providing test isolation, and then putting tests in separate files, and finally dealing with testing setup. But did you know that your brain actually memorizes knowledge when you rest? So take a few minutes off, and when you're ready, come back to learn

[00:19] more about testing asynchronous code.

Writing tests for their own sake is a pointless chore:

```tsx
describe('add numbers', () => {
  it('should add two numbers', () => {
    expect(add(1, 2)).toBe(3)
  })

  it('should add two other numbers', () => {
    expect(add(3, 4)).toBe(7)
  })
});
```

Another annoying testing problem is when tests are too brittle, and paint your logs red even though the application seems to work just fine.

When your tests lack real purpose or seem to fail for no good reason, it's no wonder you start to question their value.

Tests are supposed to give you confidence in your code, and save you from shipping broken stuff to prod. So why does writing them feel like such a burden?

The problem is that tests like these are focused on implementation details instead of the underlying behavior. Everyone talks about the importance of testing, but there's a lack of understanding about how to write tests that are actually useful.

How would it feel to have 100% trust in your tests, knowing that any failures are not a false alarm? What if you could seamlessly translate the underlying behavior of your application into tests that are easy (and even fun) to write?

It's possible, but it requires you to take a step back from just syntax.

In order to have the confidence you're testing the right things in the right ways, you need to dig into the underlying patterns behind the scenes of a testing framework.

This is exactly what you will do in Testing Fundamentals.

In this workshop, Artem Zakharchenko, testing expert and creator of the Mock Service Worker API mocking library, will guide you through creating your own version of the Vitest testing framework.

Building a testing framework from scratch will give you a deep understanding of how the pieces fit together, and change the way you think about testing for the better.

## What You'll Learn

The workshop is broken out into four parts, each with its own challenges and exercises that build upon the last:

### Principles

First, you'll explore the principles and mental models that underlie testing strategies. This is where you will begin to distinguish between the intention of your code and its implementation details. When you focus the intention of what your code should accomplish, you can write tests that are more resilient to change.

### Test Structure

Next, you'll do a deep dive into the structure of the testing framework. You'll create your own `expect` and `test` functions, configure your test environment, and use hooks to manage side effects in your tests.

### Testing Asynchronous Code

Testing asynchronous code requires a slightly different approach when compared to testing synchronous code. Here you'll practice with testing promises and async functions, as well as handling errors and rejections.

### Moving to Vitest

Once you've learned the fundamentals of testing and built your own mini-framework, you will migrate your tests to the Vitest framework. This process will cement your understanding of not just the "hows", but also the "whys" of testing.

## Who This Workshop Is For

This workshop is for developers who have some testing experience, but feel like they're missing the bigger picture. If you're tired of writing tests that feel like a chore, and want to understand how to write tests that are actually useful, this workshop is for you.

In the Testing Fundamentals workshop, you will learn testing principles, framework structure, async handling, and more by building a mini testing-framework!

Testing Fundamentals

Artem Zakharchenko

Let’s face it, mocking can be really confusing.

First, you need to know what to mock. Then, find the right way to mock that thing so it doesn’t compromise your test suite. Over-mock, and your tests become pointless. Under-mock, and they get brittle instead.

In either case, you put in so much effort, and you don’t feel like you’re getting much in return.

This is where Artem comes in. He’s been proving developer misconceptions around mocking wrong for nearly a decade, and he’s here to make you a mocking pro.

## What You’ll Learn

In this hands-on workshop, you’ll learn:

- The purpose of mocking;
- What to mock and when;
- How to write mocks that bring value instead of being a maintenance chore;
- How to separate your mocks from implementation details;
- Type safety strategies for your mocks;
- And **all the mocking techniques** you will need to test your code!

By solving targeted, real-world problems using the Vitest framework, you’ll gain a comprehensive understanding of mocking and finally unlock it as a useful tool in your testing arsenal.

## Workshop Structure

This workshop contains 6 exercise blocks dedicated to various techniques on mocking different data types.

### Boundaries

Understand what mocking really is, and learn how it helps you create test boundaries. See what each mock you introduce does to your tested code using visual metaphors.

### Mocking Functions

Functions are at the heart of JavaScript logic. Learn how to mock functions for effective input-output testing. Create mock functions, spy on function calls, and mock function implementation to tap into the right behaviors of the tested code.

### Mocking Date and Time

Eliminate the side effects of ever-changing date and time in your tests. Learn how to freeze time and mock date/time-dependent code to ensure consistent test results across different runs and time zones.

### Mocking Globals

Explore how to mock implicit dependencies, in a non-intrusive way. Learn to mock global values, methods, and environment variables to create the perfect test setup without meddling with things you don't own.

### Mocking Network

Gain control over network communication and test your client-side code reliably. Intercept requests and mock responses using Mock Service Worker. Reproduce various network scenarios, from success and error responses to offline behavior and response timing.

### Mocking Modules

Understand when to use module mocking and explore alternative techniques before you do. Learn how to mock modules in a type-safe and efficient way using built-in APIs in Vitest.

## Who This Workshop Is For

This workshop is meant for all developers, both those who are new to automated testing and those who’ve been writing tests for years. If you are unsure when to introduce mocks into your test suite, or how to do that so you don’t have to refactor it the next day, this workshop was made specifically for you.

Mocking Techniques in Vitest

The closer your tests resemble how your software is being used, the more confidence they will give you. There’s so many great patterns stemming from this simple rule, patterns I’m sure you’re already using to write better tests.

Then, there’s the elephant in the room. **Your test environment.**

For decades, web developers have been testing their UIs in make-believe environments that are neither the browser nor Node.js. It made them come up with a frankly ridiculous amount of test setup, polyfills, and workarounds just to make it work. Remember when you had to mock `location` in tests? `window.matchMedia`? Yeah…

It’s time to abandon such practices. The tools have improved and there’s no excuse for you to be sleeping on it. It’s time for you to learn how to use Vitest Browser Mode for in-browser component testing!

## What You’ll Learn

In this workshop, you will learn a new approach to component testing that’s both different and the same. It is different because you will write and run your tests in the actual browser, taking advantage of the standard APIs and powerful browser automation. It is the same because it’s still the component level test you know and love, with rendering, querying, and asserting. 

Your users don’t interact with the UIs you build in JSDOM. They do that in the real browser, and now your tests will too!

### **Sunsetting JSDOM**

The first step in our journey is understanding why browser-like environments fall short. JSDOM has served us well, but it's time to recognize its limitations. You'll experience firsthand how browser-like environments like JSDOM are letting you down.

We'll explore examples of valid JavaScript code that works perfectly in browsers and Node.js but fails in JSDOM, undermining the value of the tests you work so hard to write. You'll discover why these inconsistencies happen and why moving to real browser testing is the solution.

### **Vitest Browser Mode**

Vitest Browser Mode allows you to run isolated component-level tests in the actual browser while providing the convenience and flexibility of integration-level testing. It's not a full end-to-end testing framework like Playwright or Cypress, but rather the perfect middle ground for component testing.

In this module, you'll learn:

- How to install and configure Vitest Browser Mode in your project;
- The technical differences between how JSDOM and Browser Mode run your tests;
- Steps needed to migrate existing JSDOM tests to Browser Mode;
- How to set up Playwright as the browser automation provider for your component tests;
- Common setup scenarios like applying global assets in tests and configuring Vitest for both unit and component-level testing within the same project.

### **Best Practices**

Choosing the right tools is important, but knowledge that transcends any particular tool is even more valuable. In this section, we'll focus on five key areas of best practices when it comes to testing your React components:

- **Queries**: Find elements on the page the same way your users or their assistive technology would;
- **User events**: Interact with the tested elements from the user’s perspective;
- **API mocking**: Use Mock Service Worker to intercept requests and handle their responses as well as discover how to efficiently use MSW in Vitest Browser Mode by creating a custom test context;
- **Element presence**: Test elements that should (or shouldn't) appear on the page reliably without false positives or flaky results.
- **Page navigation**: Learn where to draw the line when testing page transitions and routing in the actual browser.

### **Debugging Tests**

The true value of tests comes when they fail. But dealing with failing tests can be quite frustrating without the right techniques.

In this block, you'll learn some of my favorite debugging techniques that go well beyond console logging:

- How to inspect the DOM state at any point in test;
- Using the debugger statement to stop JavaScript execution entirely;
- Wielding conditional breakpoints to step through the problematic code.

These techniques will transform your approach to test failures from dread to confidence so the next time you see a failing test you will know what to do.

## Who Is This Workshop For

This workshop is for all React developers who want to write reliable and valuable tests for their components. Whether you're new to component testing or have been writing tests for years, you will inevitably learn new tools, APIs, and techniques to gain more value out of your test suite. That’s my sole motivation behind this material.

React Component Testing with Vitest

Epic Testing Bundle

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

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

Testing Fundamentals

Transcript

Test Structure Recap

Transcript