Unit Testing (Vitest) Tutorial #1 - What is Unit Testing?

Key Takeaways

All right then, gang. In this course, we're going to be diving into the mysterious world of testing, specifically unit testing in JavaScript. Now, testing in general, I think, is one of those topics that a lot of new web developers tend to put off learning for a long, long time because maybe they think it's boring or too complex or it just gets in the way or maybe it's something they'll never really need anyway. I was firmly in that camp when I started out and it took me years to learn how to test my code for all of those reasons. But actually, it's not boring. It doesn't have to be hard. And in the age of AI and aentic coding, I would argue that learning how to test your code properly is more important than ever, especially when you're not the one writing all the code yourself anymore. On top of that, learning how to write tests, in my opinion, will most likely make you a better programmer because it forces you to think about how your codebase and functions are structured, about edge cases, what could go wrong with your code, or how it might be better refactored, and so on. So, regardless of how often you think you might need to test your code in the future, learning how to test is nearly always going to benefit you as a developer. Now, when it comes to testing your applications, there's different types of tests that we can write. We can write end to end tests, which are broad tests that kind of simulate user behavior and interaction with the application, like filling out forms maybe or navigating pages. We can write integration tests, which allow us to test how different parts of the application work together, like maybe how different modules or functions integrate with one another. And then we've also got unit tests which are small and focused tests that allow us to test individual functions or components in isolation. And typically you might have a combination of all three types of test in a well tested application. In this course we're going to be focusing on unit testing because I think it's a good place to start when you're learning how to test and it's going to provide you with a solid foundation for understanding other types of tests in the future. Now, to do this, we'll be using a testing framework, and there's plenty to choose from, like Jest, Jasmine, Mocker, and others. We're going to be using one called Vest, which is a modern testing framework built specifically for testing JavaScript and TypeScript project. It's fast, it's really easy to set up, and it's got good support for modern JavaScript features right out of the box. That said, Vest uses a lot of the same methods and patterns as Jest. So pretty much everything you learn here with Vest will carry over almost one:one if you ever decide to use at a later point. So then we'll be installing Vest into a simple JavaScript project later on. But to begin with, I just want to laser in on exactly what unit tests are and when we should use them. So in simple terms, a unit test is just a small piece of code that tests a specific function or module in your application. And the goal of that unit test is to ensure the function or module that you're testing behaves the way it's expected to under different conditions. For example, you might have a function that applies a discount to products by using a promo code. So you could write a unit test for that function to check it applies the correct discount when a valid promo code is provided and also that it doesn't apply discounts for invalid codes. You might also test edge cases like if there's white space before the promo code or if it's lowerase and not uppercase and so forth. And the key thing to remember about a unit test is that it should be isolated from the rest of the application. So that means it should only test the specific function or module in question and not rely on other parts of the application or any external services. And that isolation then makes it much easier to pinpoint where bugs come from because when a test fails, you know exactly which piece of code is responsible. Also, unit tests aren't really concerned with how a function is implemented. They care about what it does. So in most cases we should focus on testing the inputs and the outputs not the internal logic that gets it there. In that respect you could think of the function being tested as like a black box where you provide inputs and you expect certain outputs and you don't worry too much about what the function does inside the box. Now there will be exceptions to that oversimplification and when you're correcting failing tests you're going to need to look inside that box to see why it's not working as expected. But it's a nice mental model to have when you first start writing unit tests. As for what you should test and what you shouldn't test, well, that is an entire topic in itself with a lot of strong opinions on both sides. Some developers aren't going to be happy unless they're unit testing absolutely everything. And other developers don't like to write unit tests at all. Personally, I like to sit somewhere in the middle and I only make unit tests where I see the value in doing so. for example, for any functions that have complex logic or have a lot of edge cases or functions that are critical to the behavior of the application or even to double up as documentation for how a function is intended to be used. In all these scenarios, I would see good value in creating unit tests. On the other hand, I would usually skip writing tests for trivial functions that are unlikely to change much or for code that's already well covered by other types of tests. Ultimately though, what you choose to test will depend on the specific needs of your application as well as your own development process, workflow, and preferences. But in general, I think it's a good idea to get a balance of just enough tests to ensure code reliability, I guess, without them becoming a productivity roadblock. With all that in mind, then let's set up a brand new project and install Vest so we can start making some tests. So, I've got a folder open inside VS Code called Vest unit testing. And the only thing inside this is a source folder where all the source code we'll actually be testing is going to live. We'll also create a test folder later when we start making test files. The first thing we need to do though is create a new package.json file to manage the project dependencies. And we'll also be registering the test scripts in here later as well. Now to make a package file, we'll be using npm, the node package manager. And for that reason, you're going to have to have Node.js installed on your computer. If you don't have Node installed, you can download it and install it easily from node.js.org. If you don't know whether you have it installed, you can just open a terminal, which you can do by toggling this icon up here in VS Code, and then run the command node, then a space, and then hyphen v, and then we can press enter. If it is installed, then you should get a version number printed back. Now, to use vitest, you're going to need node version 18, I think it is, or above. So if you see a version less than this, you will need to download and install a more recent version from that same node.js.org website. Anyway, once you have Node installed, you can make a new package file in your project by running the command npm init followed by the Y flag. And you'll need to make sure you do this in the root of your project's directory, which you should be in by default when you're using VS Code's integrated terminal. Anyway, this should generate the file for us with all of the default properties and values. So, if we open that file up, we should see a script property, which is where we're going to set up the scripts later on for testing. And when we install V test in a moment, we'll see that dependency listed in this file as well. Now, in a real project, we could add the type property to this file and set it equal to module to tell Node that we're using modern ES module syntax, import, and export statements. But for this course, we don't need to do that because we'll be running our code through VEST's runtime, which already understands modern module syntax right out of the box. So the next thing we need to do then is install VEST. I'm on the Vest getting started guide then, which shows us how to install it into a brand new project. And if we scroll down a little bit, we can see that all we need to do is run this install command right here, npm install with the D flag to install this only as a dev dependency and then vest. And when we say something is a dev dependency, it means we only need that package during development, not for the production code. Anyway, let's copy this command and head back to the project. And actually, I've just noticed down here, you require node version 20 or greater, not 18 as I said earlier. So, I got that wrong. It's 20 or greater. So, if you have a version less than that, definitely go and update it. All right, then. So, in the project, let's open up the terminal again. And I'm just going to clear this to give us some room. Then I will paste in that command npm install hyphen capital D and then v test and press enter. All right then. So now we have a new project with a package.json file and we've installed V test as a dev dependency into this project which is tucked away inside the node modules folder. There's one more thing I want to do in this lesson and that is to set up a test script inside the package file which we can then run whenever we want to test our functions. So let's open that file up and head to the script property down here which already has a test script created. And at the moment the value of that script is just to echo this message saying we don't have any tests specified. So we just need to replace that with the command v test. And this v test command when we run the script will automatically look for any test files in this project directory and run any tests inside them. Now at the moment we don't have any test files or tests. So if we run this script then it won't do much. And I'm going to quickly show you that by running it down in the terminal which we can do by writing npm run followed by the name of the script which in this case is test and then we hit enter. Now when we do that you can see that vest tells us well there's no tests. Now we can exit this process by pressing Q for quit and that's going to put us back into the terminal. So, that is the script we're going to be running later once we have some tests and we're going to make our first one in the next lesson. By the way, if you want to get instant early access to this entire course now without waiting for it to be uploaded to YouTube, you can grab it on the net.dev website for just $3. So, I will leave a link to this page down below the video. You can also get it as part of this testing bundle I've released, which includes a brand new React testing course as well, not available anywhere else, and that is just $7 for both courses. So again, I'll leave this link below the video. Otherwise, my friends, please don't forget to like the video, share, and subscribe to the channel.