Global values

[00:00] To mock a global location object in test, I will start from the test setup. First, I will add the before all hook, and in that hook, I will call v stub global. This method accepts two arguments. The first one is the property name that you want to mock. So in this case, it's a location string. And the second one is the value,

[00:19] the mock value for this property. I will use this URL instance as the value. This way, the global location object will share the URL properties they have in common, like host name, port, and href. Effectively, the reason for this call signature is very similar to the one behind v.spy on. What vTest is going to do, it will reassign the global property

[00:39] to the next value. So basically, property being location, and value being this new URL. And since I'm introducing this mock over here, I will make sure to clean up after myself in the after all hook by calling v unstub all globals. So what this is going to do is revert any changes

[00:57] we introduce here, and basically give us back the proper unmodified location object after these tests are done. With this setup in place, I can finally start testing all the different behaviors of this toAbsoluteURL function. So the first one is where I expect it to be called with the

[01:13] absolute URL and return that absolute URL as is. That is pretty simple. The second test case has to do with path names. So in the first scenario, I call toAbsoluteURL with a path name that is relative to the root. So in this case, I expect HTTP localhost resource be printed. Notice that

[01:32] this one doesn't have the base path from here, because this path name is relative to the root, which is HTTP localhost. And the second scenario, I expect toAbsoluteURL when it's called with a path name relative to the current path to return it including the base. So in this case, I will

[01:50] have base slash resource. With this setup, I will try running a test with npm test to see them passing. So basically what we did here, we introduced the test setup. In the before all hook, we called v.stopGlobal that stops the global location property, this global location object, to have

[02:08] the value of this new URL instance. Then we clean after ourselves with v.unstopAllGlobals. So we're doing this to achieve proper encapsulation for this test. So no matter the testing framework setup or the test environment, we know that these URLs will be always consistent, so we're able to reliably assert on them in tests.

[00:00] Spying on globals is extremely powerful, but it only works on methods, so if you want to mock a global object, whether partially or completely, you would have to use a different technique. Like in this exercise, where your task would be to test this function called toAbsoluteUrl. The purpose of this function is quite straightforward.

[00:18] It accepts the URL, which can be an absolute URL or relative path, and it always returns an absolute URL. In other words, if the URL you provided was already an absolute URL, it will return it as is. But if you provided a relative path, it will resolve it against the current location.

[00:35] And because this utility depends on the global location object, we can safely say that it's meant to be run in the browser. In order for it to run in VTest, we are using a custom test environment called HappyDOM. This environment acts like a browser-like environment in Node.js, similar to GSDOM. And it's going to provide us the location object, which is going to be localhost at

[00:54] port 3000 by default. But in your tests, in the assertions in your tests, you would have to write the entire absolute URL, including hostname and port. And you want to be in control of those. So if your colleague updates VTest configuration tomorrow, your tests don't suddenly start failing. The golden rule of assertion still holds true here.

[01:14] To do that, you would have to spy on the location object in tests. So complete the existing test suits, and bear in mind that the location object looks extremely similar to a URL instance.

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.

Learn to mock functions, time, globals, network, and modules. Practice real-world scenarios using Vitest to write effective and maintainable tests.

Mocking Techniques in Vitest

Artem Zakharchenko

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.

Mocking Techniques in Vitest

Mocking Techniques in Vitest

Transcript

Global values

Transcript