Current section: Moving to Vitest 3 exercises

Installing, Configuring, and Testing in Vitest


00:00 I will start from deleting the setup.ds file. This is the testing framework that we've spent time building throughout the whole workshop, and now it's gone. But don't be sad because of it. The code may be gone, but the things you've learned will stay in your mind forever. Now let's substitute it with the actual testing framework, with Vitest. To do that, I will open the terminal

00:19 and run npm install Vitest and provide a --save-dev flag to indicate that I'm using Vitest for development. So once this is done and Vitest is installed, we can take a look at our test file, and we can see that the functions like before_all, test, and expect are all thrown in error now because they're missing.

00:39 The thing is, Vitest is awesome, and it doesn't meddle with our globals without us knowing. So to expose these functions globally, this has to be an explicit choice that we make, and we will absolutely make the choice because we will be using these functions in each and every test suite without exception. To fix this, I will create a config file

00:57 called Vitest.config.ts. Inside it, I will import from the package Vitest/config function define_config and export it as default. To expose functions like test and expect and before_all globally, we have to provide the test object

01:17 with globals key set to true. Once we do this, well, nothing really changed. You need to remember, just like we did in our testing framework, we've only provided the runtime part for these globals right now, but we also need the type part, for TypeScript to know about them. To fix this, we need to go to tsconfig.json

01:36 and add a new property to compiler options called types, where we will include Vitest/globals. And once we provide the types, now finally TypeScript would know where these functions are coming from. They're coming from Vitest. With these changes, let's try running our tests by using npx vitest command.

01:55 We can see our gree.test.ts suite passing and all this familiar test suites reported in this visual way. But this similarity doesn't end on this visual representation alone. In fact, everything that we wrote before, so our testing setup where we mock the dates,

02:14 our expectations, and even testing promise rejections with rejects.toThrow stays the same. And this is the beauty of fundamentals. You may change the tools, you may swap the environments, but the things you learned stay forever.