- We're gonna keep chugging
away at this series for building and testing
your react component. If you're interested in the
card above (bell chimes), there's a link for the initial video where we build out the
react tab component itself. You can also check out the last video in another card above (bell chimes), that gives a brief overview of testing. Alright, with the
housekeeping out of the way, today we're gonna do all the setup to get testing up and
running on our component. So, without further ado. (upbeat music) If you're new to Self Teach Me
channel, welcome. (chuckles) My name is Amy Dutton. I'm a web designer and developer. If you're just getting into this space, sometimes it's hard to know where to start or what resources to trust. I wanna help you level up and
get to where you wanna be. If this sounds interesting to you, hit the subscribe button below. I'm starting with the react tab component that we've already built. You can find all the code on GitHub. I'll include a link in
the description below. Feel free to download it and follow along. I'll forewarn you though. There's quite a bit of
setup to this process but you only have to do
this on a project once and then you're golden. So please, please, please,
just hang in there. And if you're interested, I've created a checklist
that you can download. So the link for that will
be in the description below. The first thing that we need to do is add React Testing
Library to our code base. So, let's pull up the documentation. Okay, there's a line here
at the top to install. This uses NPM but we've been using yarn. So I'm gonna modify this slightly. The name of the library should
still be the same though. So I'm gonna give that a copy and then let's pull up your terminal and yarn uses the keyword
add instead of install. So I'm gonna say yarn add, and then we want it to add
this as a dev dependency. So I'm going to add the dev flag. All this dev flag means is that, we don't need this package in production. This is only for testing our code within the development environment, and then the name of the library. So, let's hit enter and this will take a hot minute. Perf, perf, perf. Okay, perfect. We're also going to install Jest. So, if we take a look
at that documentation. So let's click on the docs link. There is a lineup here to install Jest. So we can just give that a copy and paste within our terminal and then hit enter. While we pass the time, let's
look at some internet cats. (upbeat music) When we started building this
application in the last video, we used Next.js. But if you have a
different starting point, say you started with Create React App, it will automatically
install Jest for you. Of course, it won't hurt if you
add the yarn add line again. So how do you know if
you have it installed? Open up your package.json file
and look for the word Jest. We just installed it, so there it is. Okay, we have one more package to install. This is called jest-dom. Again, if we look at the top
of the documentation page, then we can run this one line. Give that a copy, paste that guy in. - Okay, if you're like me, you might be wondering
what are all these packages and what do they do. Well, it's a valid question. So Jest is a JavaScript testing framework that's managed by the Facebook team. Basically, it provides a
foundation for all of our tests. We've included the React Testing Library so that we can test our react components. The jest-dom package is an extension of the React Testing Library. It has a few matchers that make it easier for these two libraries
to talk to each other. Our packages are in place, but Jest requires a
little bit more set up. So if you head over to their documentation and we want to scroll down to the additional configuration section, let's initialize Jest. So I'm gonna say yarn run Jest init. This is just gonna ask us a few questions and build out our config file for us. Would you like to use Jest
when running test script in package.js? Capital Y or yes. Okay, choose the test environment that will be used for testing. I select jsdom. Do you want Jest to add coverage reports? No. Which providers should be
used to instrument code for coverage? We want Babel. Automatically clear mock calls and instances between every test. No, okay. If we go back over to our documentation, we need to run this line
within the terminal. So give that a copy and a paste. Okay, so let's go back
to our documentation and it says to create a file
within the root of our project called babble.config.js. So I give that a copy. So then if you go back
to our documentation, it says that we need to create
this file, babel.config.js, within the root of our project. And you need to copy and paste this. Okay, so let's give that a save. Then we also need Babel
to work with Next.js. Okay, if we go to the
Next.js documentation, you'll see this snippet at the top. So, this is implemented
using a babel.rc file and we are actually using
a babel.config.js file. So it's the same thing. It's just in a slightly different format. So, I'm gonna copy this preset and let's go back to our code. And here, this is an array of presets so this is the first item and its details. So we wanna paste it here,
in that array of presets. Okay, so we need to write a few scripts in order to run our tests. Hopefully you didn't panic and your palms didn't start sweating when I said write scripts. This is really quite simple. So open up your packages. Open up your projects package.json file. You should see something like this. You'll notice the name of
your project at the top, react tabs and then several
different things are listed. So let's jump down to
the dependency section. In the previous video when
we built our tab component, we used Next.js's install script. This automatically installed next, react and react dom for us. Then under the dev dependencies
are the testing packages that we added. As I mentioned earlier, we only need these packages
when we're developing, not in production. So, they're listed in a different section. Now, going back to the top,
I have a few scripts listed. Maybe remember from our last video, when we wanted to run our project locally, we went over to the
terminal and typed yarn dev. Well, that's defined here
in the script section. So when we run yarn dev, it looks at that dev
line and runs next dev behind the scenes. If we wanted to build our project, we could run yarn build from the terminal and it would run next
build behind the scenes. So you may not have realized it, but when we ran yarn run Jest init, the first question asked it
us if we'd like to run Jest when running the test
script in package.json. We said yes and so it
automatically created test jest for us. I do wanna point out that sometimes, I'll put all of my JavaScript folders, so pages, components and utils,
inside a source directory. I could limit Jest to only
run inside that source by saying test jest source. Makes things a little bit more efficient but since all of my
folders are in the route, we will just leave it the way that it was. Any time we want to run our test suite, we can head over to the terminal and actually VS code
has a terminal built in. So I like to use their
terminal for testing that way it appears right next to my code. I'm gonna type Ctrl + Tilde to open it up. And then I'm gonna type
yarn run test and hit enter. So, you should see a message
that looks like this. Even though this is an error,
this is perfectly fine. It's working just like it should. It's just saying that
we don't have any tests within our project. Okay, so under the script section, we want to add another command. Before we close our package.json file, I wanna do one more thing. Just under the script section, I want to add another command. So I'ma type comma. I'm gonna say test: watch,
yarn run test -- -- watch. This script will keep
watching our test files for any changes that way we
don't have to keep telling it to run the test script
each time we make a change. So we just turn it on and it watches all of our files for us. Okay, so within the terminal,
I'm going to run it. Yarn run test:watch. Okay, so you should see
something like this. Okay, I'm gonna leave you hanging. We have everything set
up and in the next video, I'll explain how to test
our utility function. As I mentioned at the
beginning of the video, I've created a checklist
that you can download that includes all the steps and everything that we went through to set up testing on our project. So, link in the description below. As always, I posted the code
for this video on GitHub. Feel free to download
it, use it, modify it, whatever it's yours. The idea behind this video
series came out of a course that I'm working on that
builds a web application from start to finish. These YouTube videos have
been really fun to make as we build these one off small projects, but I wanted to do something that strings everything together, putting them into the
context of a bigger picture. If this is something that you
think you'd be interested in, there's a link in the description below to join the wait list that
way you get more information, early access and launch perks. If you like this video and
want to see more videos on web design and development, hit the subscribe button below. Hit the bell icon to receive notifications when new videos are posted. Until then, keep coding. ♪ Hey ♪
