Testing Next.js Apps with Vitest

[00:00:00]
>> Scott Moss: Testing, anybody here use Vitest? Okay, cool, we're just going to use Vitest. So there really isn't a lot of Next js specific things in here. Most of it is like React specific because again, when it comes to like rendering and things like APIs, Next js just leans on the standards.

[00:00:16]
It leans on Web standards for APIs, it leans on React very heavily when it comes to rendering. So whatever you have to do in React, whatever you have to do with testing any other API, it's pretty much the same thing you have to do in here with some caveats, like small amounts of things that are super simple.

[00:00:32]
But we're going to use Vitest, which is a really popular testing library, with some other helpers and things like that. We're going to mock out the DOM with JS DOM for simulating browser environments in the server, which is pretty cool. I remember JS Dom was like just coming out, I remember you had to run your JavaScript, your client test in the unit test in the browser and see the output there.

[00:00:57]
Like it's crazy that you could just do that, you don't have to do that anymore. Or it's crazy that you used to have to do that cuz this is just so much simpler. Yeah, I'm just walking through, like how to set this up. You don't need to set this up because, do I have this?

[00:01:13]
Yeah, I already have it in the repo, I believe, or I'm on the main branch, so of course I'm saying that, but let me check out to, yes, it's not in the repo, I'm lying. Let me check out to, where's the last one I left out on, 13?

[00:01:29]
I think it was 13, let me see. No, I went to 15 because there was one branch that didn't have any code. The edge config branch didn't have any code, so I skipped it and checked out the 15 because testing is branch 16. Okay, so let's be on 15 then, that works.

[00:01:52]
Cool, so we can go ahead and set this up. What I meant to say is all your dependencies are actually installed, but we do need to set all this stuff up. Again, this is not Next js specific, so we can just mostly copy and paste this stuff. And I'll give antidotes on things that are specific to Next js, but most of this you would do on any React project.

[00:02:10]
So there's nothing special about Next js here. There's some stuff here, so I'll talk about this, but everything else is just not specific to Next js, so go ahead and do an NPM install. I'm gonna do this just in case, whoa, whoa, whoa, relax. Install all those things.

[00:02:34]
There's a lot of stuff here, so we got a Vitest, we got the plugin for React, we got this thing right here because we use relative paths or special paths with the @ sign, this handles that. This testing library helps us with React with as far as like rendering components and things like that.

[00:02:52]
This testing library for the DOM pretty much helps us with mocking out the DOM, which sits on top of this other library called JS DOM, which is a virtual DOM outside of the browser. So, it's a lot of stuff going on here. First thing we need to do is set up our Vitest config.mjs, so I'll do that on the root, I'll say the vitest.config.mjs.

[00:03:19]
If you don't know what MJS is, this is the syntax that Node uses for you to tell it that this file is gonna use the new ES modules syntax. Because node by default didn't support this, it supported CommonJS, which is the require statement. So they're now converging and now the browsers and Node both use this syntax, but to tell Node that you're doing that, you have to use the MJS syntax or you have to specifically say it in your package JSON.

[00:03:50]
You have to put type module in here, but so, MJS just means, hey, I'm using this. Otherwise you got to use require and nobody wants to use require. So we're in the JSDOM environment, we wanna test all these files, so anything that ends with .test or .spec globals.

[00:04:07]
This just means that if you've ever written a test and you have to do the different suites like describe it tests the expect. If you want all those things globally without having to import them, you put global true. And then a setup file is just a file that, hey, we need you to run this file first before you do anything.

[00:04:25]
And typically this is where you set up your global mocks and stuff like that, which is what we're gonna do. We're gonna mock things out globally because every test we run needs to have these mocks, so why not just do them in one place? So for those mocks, we'll grab this file right here, the vitest.setup.ts, and I'll go through it.

[00:04:47]
Vitest.setup.ts. So what am I doing here? Just mocking out some of the packages that I run into issues with, specifically around like browser stuff. Cuz we're not gonna be running this code in the browser, we're gonna be running this code in Node, mocking out the DOM. But the DOM doesn't always have a lot of this stuff as far as like stuff on the window, the browser stuff, so mocking out all this navigation stuff, mocking out a lot of this image stuff.

[00:05:23]
Next js does some pretty crazy stuff with the image component, even though we're not using it. Same thing with the link component, mocking that out to just create an anchor tag cuz this link component does like prefetching and all this other stuff. So just mock it out, and those are the ones that I typically have issues with.

[00:05:39]
So it's pretty easy to mock stuff out with Vitest, you just call the mock function the name of the package. This returns a function, in this function, you return an object. This object is keyed with the things that are exported from here and then you can provide your own implementation of it.

[00:06:00]
So I'm saying, hey, if somebody does use router, this is what I want you to give them. Somebody does use path, give them this, somebody does use search params, give them this. Just mocking it out.
>> Scott Moss: All righty, so now we just want to set up our commands so we can just set up these three testing ones.

[00:06:23]
We're only gonna use one, but we're gonna set these up in our package JSON. We got a test command, we have a test UI command. I put this here because sometimes you might have different tests like unit test and then like UI test, and you can actually add like different flags and stuff.

[00:06:44]
And then coverage is just telling you how much of the stuff you've actually tested.