Loading
Current section: Workshop Introduction 1 exercises
lesson

Intro to Mocking Techniques in Vitest

Transcript

00:00 Hi, and welcome to the Mocking Techniques Workshop on Epic Web. My name is Artem, and today I will do my best to make you really good at mocking. Because mocking is such a powerful technique to know. You will be using it all the time when testing. To create the right test setup, to reduce complexity, to isolate and reproduce just

00:18 the right behaviors of the tested code. And this workshop contains everything you need to know to mock anything in TypeScript. Throughout these exercises, you will be working with a testing framework called VTest. But don't worry, things you learn today will transcend any particular tools, so you'll be able to apply them just as easily in frameworks like Jest, for example.

00:37 I worked really hard to handpick and create just the right real-world examples for every mocking technique I want you to understand. As a result, this whole workshop is split in a number of blocks, where every block represents a particular thing you will be learning how to mock. You will start from the boundaries, and you will learn how mocking is essentially a tool

00:56 to create boundaries in your tests. And you will do so using one of my most favorite teaching techniques, visualization. Right after that, you will jump straight into action, learning how to mock functions. You will see how to create mock functions to supply them as an input in your test, how

01:11 to spy on any function to know how and when it's being called, and also how to mock function implementation, so you'll be able to tap just into the right logical branch when testing your code. After that, there will be date and time, and you will become a true magician, being able to freeze time in your test. You will learn how to test things dependent on functions like setTimeout and setInterval,

01:31 as well as tasks scheduled for later through APIs like processNextTake and queueMicroTask. Right after that, there will be a block dedicated to globals, and you will discover how to mock global values, methods, and also environment variables to create just the perfect setup your code needs. And of course, we cannot talk about mocking without mentioning API mocking.

01:50 So in the next block dedicated to the network, you will learn how to intercept requests and mock their responses using a library called MockServiceWorker. You will see how to integrate MSW into your project, as well as write your first request handler, a function responsible for controlling the network, and you will use it to reproduce

02:07 all sorts of network-related scenarios like successful and error responses, request errors for when your app goes offline, as well as controlling response timing so you're able to test loading states of your code or things like promise trace conditions. And last but not least, there will be exercises on mocking modules.

02:25 And even before you get to that, you will explore the alternatives to mocking modules related to techniques like dependency injection and using fakes. And of course, you will learn how to mock modules and tasks in a type-safe and efficient way using built-in APIs in VTest. I hope you're ready because this is a crazy amount of exercises waiting for you to go through them.

02:44 I'm really excited for you to join me today, and let's begin.